All components
xs
sm
md
lg
xl
Date Picker
Date input with calendar trigger, month navigation, and a selectable day grid.
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 1 | 2 | 3 | 4 |
Sizes
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 1 | 2 | 3 | 4 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 1 | 2 | 3 | 4 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 1 | 2 | 3 | 4 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 1 | 2 | 3 | 4 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 | 1 | 2 | 3 | 4 |
Install
zsh — date-picker
1bunx stylexblocks add date-pickerUsage — Ark UI
date-picker.tsx
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556import { DatePicker, parseDate } from "#components/ui/ark-ui/date-picker.tsx";
export function Example() { return ( // the size resolves once on Root; every part inherits it via context — // Trigger and the navigation triggers ship default icons. Drop the // `inline` prop and wrap Content in <DatePicker.Positioner> for a // portalled popup instead. <DatePicker.Root inline defaultValue={[parseDate("2026-03-18")]} size="md"> <DatePicker.Label>Delivery date</DatePicker.Label> <DatePicker.Control> <DatePicker.Input /> <DatePicker.IndicatorGroup> <DatePicker.Trigger /> </DatePicker.IndicatorGroup> </DatePicker.Control> <DatePicker.Content> <DatePicker.View view="day"> <DatePicker.Context> {(api) => ( <> <DatePicker.ViewControl> <DatePicker.PrevTrigger /> <DatePicker.ViewTrigger> <DatePicker.RangeText /> </DatePicker.ViewTrigger> <DatePicker.NextTrigger /> </DatePicker.ViewControl> <DatePicker.Table> <DatePicker.TableHead> <DatePicker.TableRow> {api.weekDays.map((weekDay, i) => ( <DatePicker.TableHeader key={i}>{weekDay.narrow}</DatePicker.TableHeader> ))} </DatePicker.TableRow> </DatePicker.TableHead> <DatePicker.TableBody> {api.weeks.map((week, wi) => ( <DatePicker.TableRow key={wi}> {week.map((day, di) => ( <DatePicker.TableCell key={di} value={day}> <DatePicker.TableCellTrigger>{day.day}</DatePicker.TableCellTrigger> </DatePicker.TableCell> ))} </DatePicker.TableRow> ))} </DatePicker.TableBody> </DatePicker.Table> </> )} </DatePicker.Context> </DatePicker.View> </DatePicker.Content> </DatePicker.Root> );}