Date picker
A date you can type or pick. It reads “next fri” or “3/10” as you type, with a calendar that moves by keyboard.
Try “next fri” or “in 2 weeks”.
Installation
npx shadcn@latest add @quireui/date-pickerUsage
const [due, setDue] = useState<string | null>(null);
<DatePicker aria-label="Due date" value={due} onValueChange={setDue} />Values are plain dates as strings, like "2026-11-06": no time and no timezone, so a date never moves by a day between the browser, the server and the database. Send them as they are, or turn one into a Date where you need it.
Typing
Most dates are faster to type than to find in a calendar. While you type, the field shows what it read, "→ Fri, Nov 6", or that it is not a date; Enter takes it, Esc puts back what was there.
| You type | It reads |
|---|---|
oct 3, 3 oct, October 3rd, 2027 | That day; the year defaults to this year |
3/10, 31/12/27, 2026-12-01 | Numbers in the order your locale writes them |
today, tomorrow, yesterday | Those days |
fri, next fri, last mon | The coming Friday (today if it is Friday), the one after, the one before |
in 2 weeks, 3 days ago, +3d, -1w, +1m | Counted from today |
eom, som, eoy | End or start of this month, end of this year |
Leaving the field keeps a date it could read and quietly restores the last one otherwise, so a half-typed date never wipes the value.
Calendar
The button, or the down arrow in the field, opens the calendar on the chosen day or today. Today has a dot, the chosen day is filled, and focus goes back to the field when it closes.
Limits
min and max bound the dates, and isDateDisabled rules out any others, like weekends or holidays. Days outside them fade in the calendar and cannot be typed in either.
<DatePicker min="2027-01-01" max="2027-12-31" isDateDisabled={(date) => isWeekend(date)} />Other languages
locale formats the dates and the calendar, picks the first day of the week, and decides what 3/10 means: the 3rd of October in most of the world, March 10 in the US. labels translates its own words. weekStartsOn overrides the first day if you need to.
Forms
With name, the value travels with its form as YYYY-MM-DD, through a hidden input, so it works with plain form posts and server actions.
Accessibility
The field is a text input with a name from aria-label or a linked label, and what it read is announced politely as you type. The calendar is a grid: each day is a button named in full, "Friday, November 6, 2026", today is marked as the current date, and the month name above is announced when it changes.
| Key | Action |
|---|---|
| ↓ | In the field: open the calendar |
| Enter | In the field: take the typed date. In the calendar: pick the day |
| Esc | In the field: put back the last date. In the calendar: close it |
| ← / → | Previous or next day |
| ↑ / ↓ | Same day last or next week |
| Page Up / Page Down | Same day last or next month; with Shift, last or next year |
| Home / End | First or last day of the week |
Motion
The calendar opens with the library's popover motion. Moving through days and months answers the keys instantly, without animation.
Date picker or something else?
- A range of dates, with presets like "Last 30 days": the Date range picker in Pro.
- A date and a time: pair the date picker with a time input.
API reference
Calendar
Month grids that move with the keyboard: arrows by day and week, Page Up and Down by month (with Shift, by year), Home and End to the ends of the week. Focus never leaves the grid while moving, so screen readers follow the date.
Prop
Type
Style it with [data-slot="calendar"].
DatePicker
A date you can type or pick. Typing understands "oct 3", "3/10", "tomorrow", "next fri", "in 2 weeks" and "eom", and shows what it read before you press Enter. The calendar opens from the button or with the down arrow.
Prop
Type
Style it with [data-slot="date-picker"].