Forms

Date Picker

A trigger button paired with a popover calendar. Selects a single date.

Import

import { DatePicker } from "@mikenotthepope/substrateui"

Direction

Month-navigation chevrons flip automatically so "previous month" points in the reading direction. Week start day is a locale concern, not a direction concern — Saturday-start vs. Sunday-start calendars are controlled by the calendar locale prop, not by dir.

Labels

This one carries formatting as well as text — a date rendered US-style in a French locale is wrong even when every string around it is translated. Override one instance with the labels prop on the component, or every instance at once through LabelsProvider's datePicker key — the provider is how you translate the set once instead of at each call site.

Prop	Type	Default	Description
`placeholder`	`string`	`"Pick a date"`	Trigger text with no date selected.
`rangePlaceholder`	`string`	`"Pick a date range"`	Trigger text in range mode.
`locale`	`string`	`"en-US"`	BCP 47 tag the default formatters use, and the calendar's own locale.
`formatDate`	`(date: Date) => string`	`Intl, per locale`	Full date in the trigger. Replace for a format Intl doesn't produce.
`formatDateShort`	`(date: Date) => string`	`Intl, per locale`	Compact date, used for each end of a range.

API Reference

Prop	Type	Default	Description
`date`	`Date`	—	The controlled selected date.
`onDateChange`	`(date: Date \| undefined) => void`	—	Callback fired when the selected date changes.
`placeholder`	`string`	`"Pick a date"`	Placeholder text when no date is selected.