Date Picker
Select a day from a calendar popover with support for uncontrolled fields, controlled state, and constrained month navigation.
Installation
Uncontrolled Field
Start with the default picker when the field can manage its own selected day until a form submits it.
Preview
Starts with a default value and submits through a hidden input named deliveryDate.
Uncontrolled Field
Default date: May 14, 2026
Field name: deliveryDate
Use default-value when the picker can hold its own state until form submission.
Controlled Value
Use value and on-value-change when the rest of the page needs to react to the selected date.
Preview
Controlled Value
{formatLongDate(controlledDate, 'No date selected yet.')}
{formatIsoLine(controlledDate)}
Keep the selected day in local state when summaries, filters, or follow-up actions need the same value.
Bounded Planning Window
Use dropdown month and year controls with a fixed year range when the picker should stay inside a known planning window.
Preview
Uses a dropdown caption and a bounded year window for faster planning workflows.
Planning Window
Years available: 2026 to 2027
Caption: month and year dropdown
Use caption-layout="dropdown" with year bounds when users need fast navigation inside a fixed window.