Skip to main content
DatePicker combines a trigger button with a popover calendar. The button displays the selected date (or placeholder text when empty), and clicking it opens a calendar for selection. It’s the most user-friendly way to collect a single date.

​
Basic Usage

​
Displaying the Selection

Give the DatePicker a name to store the selected date in state, then reference it with {{ }} interpolation. The button itself shows the formatted date, and you can display it elsewhere too:

​
In a Form

DatePicker works naturally alongside other form controls, syncing its value to state via the name prop like any other input.

​
API Reference

DatePicker Parameters

​
placeholder
str
default:"Pick a date"
Button text when no date is selected.
​
name
str | None
default:"None"
State key for the selected date (stored as an ISO string).
​
on_change
Action | list[Action] | None
default:"None"
Action(s) triggered when the date changes.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

DatePicker
{
  "type": "DatePicker",
  "placeholder?": "string",
  "name?": "string",
  "onChange?": "Action | Action[]",
  "cssClass?": "string"
}
For the complete protocol schema, see DatePicker.