DatePicker — Design System

Props

The full prop API for DatePicker. Same surface in web and React Native — bundlers pick the right variant via the react-native export condition.

Prop	Type	Default	Description	Since
`selected`	`Date \| null`	—	Currently selected date.	0.5.0
`onChange`	`(date) => void`	—	Called when a date is selected.	0.5.0
`dateFormat`	`string`	`"MMM d, yyyy"`	Display format (date-fns tokens).	0.5.0
`placeholderText`	`string`	—	Input placeholder text.	0.5.0
`disabled`	`boolean`	`false`	Disable interaction.	0.5.0
`readOnly`	`boolean`	`false`	Input visible but not editable.	0.5.0
`isClearable`	`boolean`	`false`	Show a clear button.	0.5.0
`selectsRange`	`boolean`	`false`	Enable date range selection.	0.5.0
`startDate`	`Date \| null`	—	Range start date.	0.5.0
`endDate`	`Date \| null`	—	Range end date.	0.5.0
`closeOnRangeComplete`	`boolean`	`false`	Opt into closing the popover after both range endpoints are selected. Default keeps the range picker open.	0.12.1
`showTimeSelect`	`boolean`	`false`	Show tokenized time input controls below the calendar.	0.5.0
`showTimeSelectOnly`	`boolean`	`false`	Time-only selection mode.	0.5.0
`timeFormat`	`string`	`"p"`	date-fns display format for time values.	0.5.0
`timeLabel`	`string`	`"Time"`	Label for the tokenized time input.	0.12.1
`timeIntervals`	`number`	—	Reserved compatibility prop for interval-based implementations.	0.5.0
`minDate`	`Date`	—	Earliest selectable date.	0.5.0
`maxDate`	`Date`	—	Latest selectable date.	0.5.0
`disabledDays`	`Matcher \| Matcher[]`	—	DayPicker v10 matcher or matcher list for blocked dates.	0.11.0
`calendarProps`	`CalendarProps`	—	Pass-through props for the underlying DayPicker v10 Calendar. DatePicker defaults captionLayout to dropdown for month/year changes.	0.11.0
`showWeekNumbers`	`boolean`	`false`	Display ISO week numbers.	0.5.0
`monthsShown`	`number`	`1`	Number of months displayed.	0.5.0
`showIcon`	`boolean`	`true`	Show the leading calendar icon in the field trigger.	0.5.0
`triggerIcon`	`ReactNode \| null`	—	Design-system leading icon for the default trigger. Pass null to remove it.	0.10.1
`triggerVariant`	`'field' \| 'icon'`	`'field'`	Use the normal field trigger or a square icon-only trigger.	0.12.1
`triggerClassName`	`string`	—	Extra Tailwind classes on the default trigger wrapper.	0.10.1
`triggerWidth`	`'auto' \| 'full'`	`'auto'`	Default trigger width behavior. Use full for form grids.	0.10.1
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Popover alignment relative to the trigger.	0.12.1
`className`	`string`	—	Extra classes on the DatePicker wrapper.	0.5.0

Import

import { DatePicker } from '@mihcm/ui/DatePicker';