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.
`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 {% 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. Here it is wired to onchange, so committing a typed value or picking a date logs the new value to the console and alerts it:

Release date

Source: Markdown

Source: Python