DatePicker

DatePicker is a read-only text field that opens the calendar in a popover (single or range). For an inline calendar with time and toggles, see DatePickerAdvanced.

import { DatePicker } from 'phoundry-ui';

Single date

Selected: none

Show code

let date = $state<Date | null>(null);

<DatePicker
  value={date}
  onchange={(d) => date = d}
/>

Date range

Range: none — none

Show code

let start = $state<Date | null>(null);
let end = $state<Date | null>(null);

<DatePicker
  mode="range"
  rangeStart={start}
  rangeEnd={end}
  onrangechange={(s, e) => { start = s; end = e; }}
/>

Trigger size

Same selection; inputSize only affects the field height.

Show code

<DatePicker value={date} onchange={(d) => (date = d)} inputSize="sm" />

Bounds, Monday week, placeholder

Constrained: none

Show code

<DatePicker
  value={date}
  onchange={(d) => (date = d)}
  minDate={new Date(2026, 4, 1)}
  maxDate={new Date(2026, 4, 31)}
  weekStartsOn={1}
  placeholder="Pick a May 2026 date"
/>

DatePicker props

Prop	Type	Default	Description
value	Date \| null	—	Selected date (single mode).
rangeStart	Date \| null	—	Range start date (range mode).
rangeEnd	Date \| null	—	Range end date (range mode).
mode	'single' \| 'range'	'single'	Selection mode.
onchange	(date: Date) => void	—	Called when a single date is selected.
onrangechange	(start: Date, end: Date) => void	—	Called when a range is completed.
minDate	Date	—	Earliest selectable date.
maxDate	Date	—	Latest selectable date.
disabled	boolean	false	Disable the input and picker.
weekStartsOn	0 \| 1	0	First day of week: 0 = Sunday, 1 = Monday.
placeholder	string	'Select date'	Placeholder when empty.
inputSize	'sm' \| 'md' \| 'lg'	'md'	Size of the read-only trigger field (passed to TextInput).
class	string	—	Additional CSS classes on the wrapper.

Usage tips

Use minDate and maxDate to constrain selectable dates.
In range mode, the first click sets the start and the second click sets the end.
Set weekStartsOn={1} for Monday-first calendars (ISO standard).