DatePicker

Overview

DatePicker now uses the same @daypicker/react v10 engine as Calendar. This keeps date, date range, date-time, and time-only UI on one dependency and one styling model.

Use Cases

Single date input — pick one date from a popover calendar.
Date range — select start and end dates with the same DayPicker range mode used by Calendar.
Date and time — select a date and edit the time in the popover footer.
Time only — use the same trigger and form surface for time values.
Icon trigger — use a square calendar button where the date value is displayed elsewhere.

Dependency Rule

Do not add another calendar library for new date fields. Use:

Calendar for the raw DayPicker grid.
DatePicker for trigger + popover + optional time controls.
TanStack Form validators for form-level validation.

Props

Prop	Description
`selected`	Single-date value.
`selectsRange`	Enables range mode.
`startDate` / `endDate`	Range values.
`showTimeSelect`	Adds time controls under the calendar.
`showTimeSelectOnly`	Shows only the time control.
`calendarProps`	Pass-through DayPicker v10 props via `Calendar`.
`disabledDays`	DayPicker matcher or matcher array for blocked dates.
`minDate` / `maxDate`	Convenience boundaries mapped to DayPicker disabled matchers.
`triggerVariant`	`'field'` for the normal field button, or `'icon'` for a square icon-only trigger.
`triggerIcon`, `triggerClassName`, `triggerWidth`	Trigger customization using MiHCM tokens. Default width is compact; use `triggerWidth="full"` for grid forms.
`closeOnRangeComplete`	Opt-in close behavior after both range endpoints are selected. Default keeps the popover open.

Use triggerWidth="full" when DatePicker sits inside a form column, responsive grid, or mobile sheet. Full width is applied through the component root, Popover wrapper, and trigger so the field does not shrink to the content width.

<div className="grid gap-4 sm:grid-cols-2">
  <DatePicker selected={startDate} onChange={setStartDate} triggerWidth="full" />
  <DatePicker selected={endDate} onChange={setEndDate} triggerWidth="full" />
</div>

The popup matches the trigger width and remains viewport capped. If a small mobile viewport shows a wide multi-month calendar, the popup scrolls horizontally instead of clipping interactive days.

Calendar Header

The picker defaults calendarProps.captionLayout to dropdown, with broad startMonth and endMonth boundaries. This gives users direct month and year changes without adding a second date library. Override those boundaries with minDate, maxDate, or explicit calendarProps.startMonth / calendarProps.endMonth.

Accessibility