DateInput

The built-in dateinput tag — a free-typing date field that parses what you type against a display format. Usage, the string value, and a live example.

A free-typing date field: type a date (or pick it) and it’s parsed against valueFormat, showing the formatted result. Reach for it when a plain, keyboard-first date entry beats a full calendar popover. It carries the same Input wrapper as TextInput — label, description, error, sizes — and hydrates into an interactive island.

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

Dates are strings

Mantine 9’s date components take and return date strings — YYYY-MM-DD (or YYYY-MM-DD HH:mm when the format includes time), never Date objects. So defaultValue is a string like '2026-01-15'.

A basic field

defaultValue seeds the field (a YYYY-MM-DD string); valueFormat controls how it’s displayed.

Release date

Source: Markdown

Source: Python

Sizes, variants, and validation

size and radius run xs–xl; variant is default, filled, or unstyled. error shows a validation message, and required / withAsterisk add the asterisk.

Start

Pick the first day

Due

A due date is required

Source: Markdown

Source: Python

Attributes

Omit any attribute to take its Mantine default.

Attribute	Valid values	Description
`defaultValue`	`YYYY-MM-DD` string	Initial value (a date string, never a `Date`).
`valueFormat`	a dayjs format string (e.g. `MMM D, YYYY`)	How the value is displayed and parsed. Defaults to `MMMM D, YYYY`.
`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` (default), `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.

Good to know

Free typing is parsed against valueFormat, so what a reader types has to match the format the field displays. Text it can’t read as a date is discarded and the last valid value comes back as soon as the field loses focus — nothing is left half-entered. clearable also makes the calendar deselect: clicking the already-selected day empties the field instead of re-picking it.

CSS Selectors

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

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

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

Injecting Attributes

Pass attr={…} to forward raw HTML attributes — including inline event handlers — straight onto the rendered element. Picking a day in the calendar fires change right away; a typed date fires it when the field loses focus, the way any text input does. Here it is wired to onchange, so either route logs the new value to the console and alerts it:

Release date

Source: Markdown

Source: Python