DateTimePicker

The built-in datetimepicker tag — a combined date-and-time field with a calendar plus a time picker. Usage, the string value, and a live example.

A combined date-and-time field — it opens a calendar to pick the day and a time picker for the clock, in one control. Reach for it when an event needs both. It carries the usual Input wrapper and hydrates into an interactive island.

Use it as {% datetimepicker %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'datetimepicker', …).

Dates are strings

The value is a date-time string — YYYY-MM-DD HH:mm:ss (or YYYY-MM-DD HH:mm without withSeconds), never a Date.

A date-and-time field

withSeconds adds the seconds field; valueFormat controls the display.

Starts at

Source: Markdown

Source: Python

Attributes

Omit any attribute to take its Mantine default.

Attribute	Valid values	Description
`defaultValue`	`YYYY-MM-DD HH:mm:ss` string	Initial value (a date-time string).
`valueFormat`	a dayjs format string	How the value is displayed.
`withSeconds`	bool (`true` / `false`)	Show and capture seconds.
`label`	string	Field label above the input.
`description`	string	Helper text below the label.
`placeholder`	string	Placeholder shown when empty.
`error`	string	Validation message; switches the field to the error color.
`size`	`xs`, `sm`, `md`, `lg`, `xl`	Control size.
`radius`	`xs`–`xl` or a CSS length	Corner radius.
`variant`	`default`, `filled`, `unstyled`	Input style.
`required`	bool (`true` / `false`)	Mark required and add the asterisk.
`withAsterisk`	bool (`true` / `false`)	Add the asterisk without the HTML `required`.
`disabled`	bool (`true` / `false`)	Render the field disabled.
`clearable`	bool (`true` / `false`)	Show an × to clear the value.

CSS Selectors

Target a {% datetimepicker %} from your own CSS with the island data attribute or the Mantine Styles API part classes:

/* Every DateTimePicker instance on the page */
[data-aardvark-island="DateTimePicker"] { }

/* Mantine Styles API parts */
.mantine-DateTimePicker-root { }
.mantine-DateTimePicker-input { }
.mantine-DateTimePicker-section { }

Injecting Attributes

Pass attr={…} to forward raw HTML attributes — including inline event handlers — straight onto the rendered element. Here it is wired to onchange, so choosing a date-time logs the field value to the console and alerts it:

Starts at

Source: Markdown

Source: Python