In context
Time-off single date, two-month reporting range, schedule sync with time-of-day, and a full-width form-field date with disabled-past constraint.
Time off
Pick a single date for an annual-leave request.
Reporting period
Two-month viewGenerating report for 4/1/2026 – 4/30/2026 (30 days).
Schedule a sync
Date + time selection in a single popover.
Calendar invites will go out for 4/20/2026, 2:30:00 PM.
Form field width
`triggerWidth="full"` for stacked forms.
Past dates are disabled.
DatePicker examples cover the supported DayPicker-backed modes: single date, range, date-time, time-only, and calendar option pass-through.
Single date
<DatePicker selected={date} onChange={setDate} isClearable />The default trigger is compact (triggerWidth="auto"). Use triggerWidth="full" only inside form layouts where the field should fill its grid column.
Responsive form fields
<div className="grid gap-4 sm:grid-cols-2">
<DatePicker selected={startDate} onChange={setStartDate} triggerWidth="full" />
<DatePicker selected={endDate} onChange={setEndDate} triggerWidth="full" />
</div>Date range
<DatePicker
selectsRange
startDate={range[0]}
endDate={range[1]}
onChange={setRange}
isClearable
/>Range popovers stay open while the user is choosing a range. If a workflow explicitly needs to close after both endpoints are selected, pass closeOnRangeComplete.
Icon trigger
<DatePicker
selected={date}
onChange={setDate}
triggerVariant="icon"
placeholderText="Open calendar"
/>Date and time
<DatePicker
selected={date}
onChange={setDate}
showTimeSelect
dateFormat="MMM d, yyyy"
/>Time only
<DatePicker
selected={date}
onChange={setDate}
showTimeSelectOnly
placeholderText="Select time"
/>Calendar options
<DatePicker
selected={date}
onChange={setDate}
monthsShown={2}
showWeekNumbers
minDate={new Date(2026, 4, 1)}
maxDate={new Date(2026, 5, 30)}
calendarProps={{ captionLayout: 'dropdown' }}
/>