Date select

A date picker in a popover, for a single day or a range. In single mode one click picks a day and closes the popover; in range mode two clicks pick the start and end with a live hover preview in between. Optional presets fill common values in one click. Works controlled or uncontrolled, and the mode discriminant switches the value type between Date and DateRange. The range variant powers the control in the Finance showcase.

function startOfDay(d) {  return new Date(d.getFullYear(), d.getMonth(), d.getDate());}function daysAgo(n) {  const d = startOfDay(new Date());  d.setDate(d.getDate() - n);  return d;}
const rangePresets = [  { label: 'Last 7 days', value: () => ({ start: daysAgo(6), end: startOfDay(new Date()) }) },  { label: 'Last 30 days', value: () => ({ start: daysAgo(29), end: startOfDay(new Date()) }) },  { label: 'This month', value: () => {    const now = new Date();    return { start: new Date(now.getFullYear(), now.getMonth(), 1), end: startOfDay(now) };  } },  { label: 'Year to date', value: () => ({ start: new Date(new Date().getFullYear(), 0, 1), end: startOfDay(new Date()) }) },];
// Single day.const [day, setDay] = useState(startOfDay(new Date()));<DateSelect value={day} onValueChange={setDay} placeholder="Pick a day" />
// Range.const [range, setRange] = useState({ start: daysAgo(29), end: startOfDay(new Date()) });<DateSelect mode="range" value={range} onValueChange={setRange} presets={rangePresets} />

Props

Prop	Type	Default	Notes
`mode`	`'single' \| 'range'`	`'single'`	Switches the value type between Date and DateRange.
`value`	`Date \| DateRange \| null`	—	Controlled selection; shape follows mode. Pair with onValueChange.
`defaultValue`	`Date \| DateRange \| null`	`null`	Uncontrolled initial selection.
`onValueChange`	`(value) => void`	—	Fires on a completed selection, a preset, or clearing (null).
`presets`	`DateSelectPreset[]`	—	Quick values shown down the left; each has a label and a value() factory.
`numberOfMonths`	`1 \| 2`	`1 single · 2 range`	Months shown side by side.
`weekStartsOn`	`0 \| 1`	`1`	0 = Sunday, 1 = Monday.
`locale`	`string`	`'en-GB'`	BCP 47 locale for date and weekday labels. Fixed by default so server and client render identically.
`placeholder`	`string`	`'Select date(s)'`	Trigger text when nothing is selected.
`disabled`	`boolean`	`false`	Disables the trigger.
`align`	`'start' \| 'center' \| 'end'`	`'end'`	Popover alignment against the trigger.
`side`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'bottom'`	Popover side against the trigger.