Forms
Date picker
A button trigger that opens a single-month calendar in a popover. Picks one date, with no external date library.
- Source
- src/components/ui/date-picker.tsx
- Figma
- Datepicker + Calendar.
Usage
Included in the GliaKit boilerplate. Import it where you need it:
tsx
import { DatePicker, Calendar } from "@/components/ui/date-picker";When to use
- Picking a single date that is likely near today, like a due date, start date or appointment.
- Use Calendar on its own when the month grid should always be visible, like in a side panel or a booking flow.
- For a start and end date, use the Date range picker.
- For dates far in the past, like a birth date, three plain inputs or a typed field are faster than paging through months.
Examples
Controlled
Keep the date in state with value and onChange.
Calendar on its own
Render the month grid inline. It does not store the selection, so keep it in state.
In a form
Pass w-full to fill the form column, and a custom placeholder.
API reference
DatePicker
Trigger button plus a Radix Popover containing Calendar. Works controlled (value) or uncontrolled. Closes as soon as a day is picked. Does not forward id or aria-* props.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Date | - | The selected date (controlled). When omitted, the picker keeps its own state. |
| onChange | (date: Date) => void | - | Called with the picked date. There is no clear action, so it never receives undefined. |
| placeholder | string | "Pick a date" | Shown in the trigger when no date is selected. |
| className | string | - | Classes for the trigger button. It is 240px wide (w-60) by default; pass w-full to fill a form column. |
Calendar
The month grid on its own, in a 280px card. Month navigation is internal state that starts at the selected date (or today).
| Prop | Type | Default | Description |
|---|---|---|---|
| selected | Date | - | The highlighted date. |
| onSelect | (date: Date) => void | - | Called when a day is clicked. Calendar does not store the selection; keep it in state and pass it back as selected. |
Accessibility
- The popover is Radix Popover: focus moves into the calendar when it opens, Escape or an outside click closes it, and focus returns to the trigger.
- Previous and next month buttons have aria-labels ("Previous month", "Next month").
- Days are plain buttons reached with Tab and activated with Enter or Space. There is no arrow-key grid navigation and day buttons announce only the day number.
- DatePicker does not accept id or aria-label, so place a visible label next to it. To link a <label htmlFor>, forward an id to the trigger button in the source.