Date picker
Note
A component that organizes content into vertically stacked collapsible and expandable sections.
Design checklist
| Status | Item | Description |
|---|---|---|
| ✔️ | Anatomy | Includes descriptions of all parts of the component and its major variants. |
| ✔️ | States | Includes all applicable interaction, display and value states. |
| ✔️ | Options | Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.) |
| ✔️ | Color schemes | Includes both light and dark color schemes. |
| Behaviors | Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow). |
Anatomy
DatePicker
- Input container: The main input field for date selection (
.date-picker). - Calendar popup: The dropdown calendar for picking dates (
.flatpickr-calendar). - Day cell: Each selectable day in the calendar (
.flatpickr-day). - Month/year selector: Controls for changing month/year (
.flatpickr-current-month,.flatpickr-months). - Time selector: (if enabled) for picking time (
.flatpickr-time). - Icon: Calendar icon inside the input (customizable, default is calendar icon).
- Floating label: Optional label inside the input.
- Error message: Shown below input when
isErroris true.
States
Input states
- Enabled: Input is interactive and can be focused/typed.
- Focused: Input is focused, calendar can open.
- Disabled: Input is not interactive, grayed out.
- Error: Input shows error state and message.
Calendar day states
- Default: Day is selectable.
- Hovered: Day is hovered, background and text color change.
- Selected: Day is selected, highlighted.
- Today: Today is visually marked.
- Disabled: Day is not selectable, muted color.
- In range: (range mode) days between start/end are highlighted.
Options
- color: 'neutral' | 'accent' — theme color for calendar and selection.
- inputSize: 'sm' | 'md' — input size.
- sideIcon: 'left' | 'right' — position of calendar icon.
- icon: Custom icon for input.
- locale: Language/locale for calendar.
- floatingLabel: Floating label inside input.
- wrapperProps: Props for input container.
- calenderHeader: Custom header for calendar popup.
- options: Flatpickr options (dateFormat, minDate, mode, etc.).
- isError, errorMessage: Error state and message.
- theme: Input theme.
- All Input and Flatpickr props: Inherits all props from Input and Flatpickr.
Behaviors
- Open/close: Clicking input or icon opens calendar. Clicking outside or selecting closes it.
- Select date: Click a day to select. In range mode, select start/end.
- Keyboard navigation: Arrow keys to move, Enter to select, Esc to close.
- Focus management: Input and calendar are accessible by keyboard.
- Error handling: Shows error state and message if
isErroris true. - Locale: Calendar adapts to selected locale.
- Responsive: Calendar popup adapts to input width and screen size.
Changelog
| Date | Type | Description | Author | Associated issue(s) |
|---|---|---|---|---|
| YYYY-MM-DD | new | Initial design | Oanh Nguyen | PAR-52 |