DatePickerInput

The built-in datepickerinput tag — a date field that opens a calendar to pick a day, a range, or several days. Usage, the type modes, and live examples.

A date field that opens a calendar popover to pick a value — one day, a range, or several days, set by type. Reach for it over DateInput when you want the calendar UI rather than free typing. It carries the usual Input wrapper and hydrates into an interactive island.

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

Dates are strings

Values are date strings (YYYY-MM-DD). For type='range' or type='multiple', pass defaultValue as a JSON array of those strings — e.g. '["2026-01-01","2026-01-07"]'.

Pick a single day

Ship date

Source: Markdown

Source: Python

Pick a range

type='range' selects a start and end day; seed it with a two-element JSON array.

Sprint

Source: Markdown

Source: Python

Attributes

Omit any attribute to take its Mantine default.

Attribute	Valid values	Description
`type`	`default` (single), `range`, `multiple`	What the calendar selects.
`defaultValue`	`YYYY-MM-DD` string, or a JSON array of them for `range` / `multiple`	Initial value.
`valueFormat`	a dayjs format string	How the value is displayed.
`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 {% datepickerinput %} from your own CSS with the island data attribute or the Mantine Styles API part classes:

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

/* Mantine Styles API parts */
.mantine-DatePickerInput-root { }
.mantine-DatePickerInput-input { }
.mantine-DatePickerInput-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 logs the field value to the console and alerts it:

Ship date

Source: Markdown

Source: Python