Date Picker

Single day and range calendars in a popover, with locale-aware month titles and week start.

Also known as: calendar, date range, range picker

Installation

Install with the CLI, or copy the component source into your project.

Add date-picker (npm)

1
npx --yes -p @default-file/ui df-ui add date-picker

Single day field with a fixed ISO value. The calendar opens from the trigger.

Start date

Open calendar for one day. The selected day is 12 March 2026. The week starts on Sunday in en-US.

DateRangePicker with a start and end day. The selected span is 9 to 20 March 2026.

de-DE locale. The month title is German. The week starts on Monday.

min and max keep selection inside March 2026. Weekends are disabled.

Disabled trigger with a committed day.

Start date

Empty single and range fields with custom placeholder copy.

Single-day DatePicker and range DateRangePicker. Both open a locale-aware calendar in a popover.

Available on DatePicker and DateRangePicker.

Prop	Type	Default	Notes
locale	string	"en-US"	BCP 47 locale for the month title and the first day of the week.
min	string \| null	-	Earliest selectable ISO day.
max	string \| null	-	Latest selectable ISO day.
disabledDates	(dayIso: string) => boolean	-	Return true to disable a specific day.
placeholder	string	-	Trigger field placeholder when empty.
open	boolean	-	Controlled open state for the calendar popover.
defaultOpen	boolean	-	Uncontrolled initial open state.
onOpenChange	(open: boolean) => void	-	Called when the popover open state changes.
disabled	boolean	-	Disable the trigger and calendar.
id	string	-	Id forwarded to the trigger input.
aria-label	string	-	Accessible name for the trigger when no external label is used.
className	string	-	Additional styles on the root.

Prop	Type	Default	Notes
value	string \| null	-	Controlled ISO day value.
defaultValue	string \| null	-	Uncontrolled initial ISO day.
onChange	(value: string \| null) => void	-	Called when the selected day changes.

Prop	Type	Default	Notes
value	DateRangeValue \| null	-	Controlled { start, end } ISO day range.
defaultValue	DateRangeValue \| null	-	Uncontrolled initial range.
onChange	(value: DateRangeValue \| null) => void	-	Called when the range changes.