DatePicker
A full calendar on a compact scale — single, range and multiple selection, with constraints and a year/month wheel.
A full calendar driven by seed-design's headless engine, so the behaviour is theirs by construction rather than reimplemented: single, range and multiple selection, composable date constraints, a controllable view month, a roving tab stop and a live region.
The visual scale is custom, measured to fit crisp: a 32px day on a 34px pitch, an 8px-radius highlight rather than a circle, 14/20 medium numerals and the brand blue for the selection — so the calendar sits with the rest of crisp instead of importing seed's larger mobile scale.
Four components share one API and differ only in how much they show:
DatePicker (one month), TwoMonthDatePicker, WeekDatePicker and
ContinuousDatePicker (scrolls a month range).
Changed in 0.7.
DatePickerused to be a trigger-and-popover field taking a JSDate. It is now the bare calendar, and takes{ year, month, day }viavalue/onValueChange. The old component isDatePickerField, which composes this one — change the import and the name, nothing else.
Installation
npm install @crisp-ui-kit/crispProps
DatePicker
Prop
Type
TwoMonthDatePicker
Prop
Type
WeekDatePicker
Prop
Type
ContinuousDatePicker
Prop
Type
DatePickerField
Prop
Type
DatePickerCellContentRenderProps
DatePickerCellContentRenderProps is an empty interface extending the engine's
DatePickerCellState, so every field below comes from @seed-design/react-date-picker and
crisp adds nothing to it. It is the cell state handed to renderDateCellSupplement and
renderDateCellContent.
| Field | Type | Description |
|---|---|---|
date | DatePickerDate | The date this cell represents. |
formattedDay | string | The day number, formatted for the active locale. |
isToday | boolean | Whether the cell is today. |
isSelected | boolean | Whether the cell is part of the current selection. |
isRangeStart | boolean | Whether the cell starts the selected range. |
isRangeEnd | boolean | Whether the cell ends the selected range. |
isInRange | boolean | Whether the cell falls between range start and end. |
isUnavailable | boolean | Whether a constraint makes the cell unselectable. |
isRangeStartReadOnly | boolean | Whether the range's start date is read-only. |
isFocused | boolean | Whether the cell holds roving focus. |
Examples
Range selection
As a field
The trigger-and-popover field crisp shipped before 0.7 is now DatePickerField,
which composes this calendar:
Presets
presets is a DatePickerField-only prop (the bare calendars above don't render a presets row): it draws a row of quick-pick chips under the calendar — a preset row such as Today / Tomorrow / Next week. The set is the caller's, since it depends on the attribute (a past-leaning field wants Yesterday, not Tomorrow), so there is no default and omitting the prop renders no row.
date is a thunk, called when the chip is clicked rather than when the picker rendered. A relative preset in a popover left open across midnight would otherwise resolve to yesterday's answer.
const DAY = 86_400_000;
<DatePickerField
aria-label="Due date"
presets={[
{ label: "Today", date: () => new Date() },
{ label: "Tomorrow", date: () => new Date(Date.now() + DAY) },
{ label: "Next week", date: () => new Date(Date.now() + 7 * DAY) },
]}
/>