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

​
Reading the Value

Use .rx to get a reactive reference to the selected date. The value is an ISO date string once a date is picked, but starts as undefined when nothing is selected. Use .then() to handle both states — showing formatted text when a date exists, and fallback text otherwise: Before a date is picked, the text shows “None yet”. Pick a date and it updates instantly — the .date("long") pipe formats an ISO string like "2026-04-02" into "April 2, 2026".

​
In a Form

DatePicker works naturally alongside other form controls. Each component’s value syncs to state automatically — use .rx to reference it elsewhere:

​
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",
  "name?": "string",
  "placeholder?": "string",
  "onChange?": "Action | Action[]",
  "cssClass?": "string"
}
For the complete protocol schema, see DatePicker.