Forms
Date Picker
A date field and a range field, with real keyboard behavior and native form support.
Installation
Copy the source with the CLI to own and edit it, or import it from the npm package.
npx aback-ui@latest add date-pickerWrites components/ui/date-picker.tsx and the components it builds on. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.
Usage
Import the parts you need from the installed file. The Code tab above has a complete, working example.
import { DatePicker, DateRangePicker } from "@/components/ui/date-picker";API reference
Props and composition points for Date Picker. Native element props pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
value / onChange | Date | DateRange | undefined / (value) => void | None | The selected date, or range in DateRangePicker. The consumer owns the value; the field does not drift out of sync with a form library. |
placeholder | string | "Pick a date" | Shown when there is no value. It is never the only label for the field. |
min / max | Date / Date | None | Bounds for selectable dates. Days outside the bounds are rendered disabled and cannot be chosen from the grid. |
locale / format | string / (date: Date) => string | None | Controls the trigger label. The default uses Intl.DateTimeFormat with the visitor's locale, so no date library is required. |
clearable | boolean | true | Shows a Clear action in the popover footer when a value is set. Set it to false for required fields. |
name | string | None | DatePicker renders a hidden input with a yyyy-mm-dd value for native form submission. DateRangePicker has no name because a range is two values; submit the two dates explicitly. |
defaultMonth / numberOfMonths | Date / number | None | Opening month and, for DateRangePicker, how many months are shown side by side. Defaults to the selected date and one month. |
aria-describedby / aria-labelledby / aria-invalid | string / string / boolean | None | Connects the field to help text, a visible label, and validation state. |
Dependencies: @tabler/icons-react, react-day-picker, plus the shared @/lib/utils helper.
Accessibility
Semantics, keyboard behavior, and the decisions that keep the component operable.
- The field is a button, not a text input pretending to be a calendar. Enter or Space opens the dialog and the current value is part of the button's name.
- Focus moves into the calendar grid when the popover opens, and Escape closes it and returns focus to the trigger.
- The calendar is labelled Choose a date or Choose a date range, so the dialog is not anonymous.
- The Clear action is a real button inside the popover; clearing does not rely on a decorative icon on the trigger.
- A DatePicker with a name submits an ISO yyyy-mm-dd value, preserving native form behavior and server-side parsing.
Keyboard
| Key | Action |
|---|---|
| EnterorSpace | Open the calendar from the field. |
| Arrow keysorHomeorEnd | Move through days in the open calendar. |
| Page UporPage Down | Change month; add Shift to change year. |
| EnterorSpace | Choose the focused day. |
| Escape | Close without changing the value and return focus to the field. |
Do not close a range picker on the first click: react-day-picker represents that first click as a one-day range. The picker stays open until the two ends differ, and shows the anchor date in the meantime.
Used in production
The Aback products whose interfaces shaped this component.
This component is new in Aback UI. It has not shipped in an Aback product yet, so no production use is claimed.