Date picker

Dates and times chosen the way the task asks — a calendar, a period with presets, a strip of days, wheels, time slots, a month, a date of birth — as ISO values (2026-10-11, 2026-10, 18:30) the form, the address and the API share, in the locale's own words.

Web + MobileBetaForms

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. Orochia's scheduling and Yasakia's availability (DS5 dates), through the form.

When to use

DatePicker: a day near today in a form — a publication, an auction's end, a reminder.
DateRangePicker: a period — an earnings report, an audit log — with presets and two months side by side.
Calendar inline (variant="card"): when the month itself is the interface (availability, a booking).
DayStrip: the next days in a row (a delivery day, a session, an agenda) — one thumb away on a phone.
TimePicker: wheels to set a time (a reminder); variant="slots" to book one among the free times.
MonthPicker: a month of a year (a billing month, a card's expiry, a report).
DateField (typed) or DateWheel (wheels): a memorable date far away — a date of birth with an age gate.

When not to use

For a date of birth or any date years away: a calendar makes it slow — use DateField or DateWheel.Use instead: Field
For a relative choice (“last 7 days”, “this month”) without a calendar: chips.Use instead: Chip

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { DatePicker, DateRangePicker, Calendar, MonthPicker, DayStrip, WheelPicker, Wheel, TimePicker, DateField, DateWheel, latestBirthDate, timeSlots } from "@krizaka/ui/date-picker";

Examples

Schedule

A publication date, from today on, written the way the locale writes it.

Publish on

Your followers are told when it goes live.

Calendar open

The popover open on the month: today's node, the chosen day lit.

Auction ends

Period with presets

DateRangePicker for an earnings report: presets beside two months, the period as one band.

Period

In French

locale="fr-CA": the names, the order and the first day of the week follow.

Date du rendez-vous

Inline calendar

Calendar variant="card": the month is the interface, weekends unavailable; its title opens the months.

Month and year

MonthPicker: a billing month, nothing later than this one.

2026

Day strip

DayStrip: the next two weeks in a row, closed days dashed, the days with a session marked.

Wheel

WheelPicker + Wheel: any short list turned by the thumb or the arrows — a party size.

Time, wheels

TimePicker: hours, minutes by 5 and the period of a 12-hour locale; the value is HH:mm.

Time, slots

TimePicker variant="slots": the free times of an agenda by part of the day, taken ones struck through.

Date of birth, typed

DateField: day · month · year in the locale's order, autofilled, an under-18 date refused.

Date of birth

DayMonthYear

You must be 18 or older to create an account.

Date of birth, wheels

DateWheel with max at the 18th birthday: an under-18 date cannot be chosen.

2008

2007

2006

2005

2004

2003

2002

2001

2000

1999

1998

1997

1996

1995

1994

1993

1992

1991

1990

1989

1988

1987

1986

1985

1984

1983

1982

1981

1980

1979

1978

1977

1976

1975

1974

1973

1972

1971

1970

1969

1968

1967

1966

1965

1964

1963

1962

1961

1960

1959

1958

1957

1956

1955

1954

1953

1952

1951

1950

1949

1948

1947

1946

1945

1944

1943

1942

1941

1940

1939

1938

1937

1936

1935

1934

1933

1932

1931

1930

1929

1928

1927

1926

1925

1924

1923

1922

1921

1920

1919

1918

1917

1916

1915

1914

1913

1912

1911

1910

1909

1908

1907

1906

You must be 18 or older.

Props

Calendar

A month grid to pick a date or the ends of a range, with the full keyboard of the APG date picker.

Prop	Type	Default	Description
`locale`required	`string`	—	The BCP 47 locale of the month and day names (`"en-US"`, `"fr-CA"`): always explicit.
`autoFocus`	`boolean`	—	Moves the focus to the active day when it mounts (inside a popover).
`className`	`string`	—	Classes merged on the root.
`defaultMonth`	`string`	—	The month shown at first. Default: the value's, or today's.
`isDateDisabled`	`((date: string) => boolean)`	—	Refuses some dates (`(d) => isWeekend(d)`).
`labels`	`Partial<CalendarLabels>`	—	The words, passed translated; English by default.
`max`	`string`	—	The latest date that can be picked.
`min`	`string`	—	The earliest date that can be picked.
`month`	`string`	—	The month shown (the first one, with `numberOfMonths={2}`), any day of it (controlled).
`numberOfMonths`	`1 \| 2`	`1`	One month, or two side by side (a period: from a phone's width up, they stack on a phone).
`onMonthChange`	`((month: string) => void)`	—	Called when the month shown changes.
`onSelect`	`((date: string) => void)`	—	Called with the day picked.
`range`	`DateRange \| null`	—	The chosen range (range mode): its ends are lit, the days between are one band.
`today`	`string`	—	Today (marked): inject it for a stable server render or a test. Default: the device's date.
`value`	`string \| null`	—	The chosen date (one-date mode).
`variant`	`"plain" \| "card"`	—	`plain` (inside a popover, a card of the app) or `card` (the calendar is the interface: its own raised surface).
`weekStartsOn`	`number`	—	The first day of the week, 0 = Sunday. Default: the locale's.

DateField

Day · month · year typed in the locale's order: numeric keyboards, the next box focused when one is full.

Prop	Type	Default	Description
`label`required	`string`	—	The visible label, passed translated (the group's name).
`locale`required	`string`	—	The BCP 47 locale: the order of the parts, the names of the months.
`autoComplete`	`"off" \| "bday"`	—	`bday` for a date of birth: the browser offers to fill it.
`className`	`string`	—	Classes merged on the root.
`defaultValue`	`string`	—	The date at first, uncontrolled.
`disabled`	`boolean`	—	Not available.
`error`	`string`	—	An error under the field: marks it invalid and is read with it. Replaces the hint.
`hint`	`string`	—	A help text under the field ("For example, 27 3 1990").
`labels`	`Partial<DateFieldLabels>`	—	The names of the parts, passed translated; English by default.
`name`	`string`	—	The name of a hidden input holding the value, for a plain `<form>` post.
`onBlur`	`(() => void)`	—	Called when the focus leaves the field.
`onValueChange`	`((value: string) => void)`	—	Called on every key with the date typed so far (`""` when the boxes are empty).
`value`	`string`	—	The date, `YYYY-MM-DD` (controlled); `""` for none. What is typed comes back as it is, real date or not: the schema decides.

DateWheel

Day, month and year as three wheels in the locale's order, bounded by min and max: always a real date.

Prop	Type	Default	Description
`label`required	`string`	—	The visible label, passed translated (the group's name).
`locale`required	`string`	—	The BCP 47 locale: the order of the parts, the names of the months.
`className`	`string`	—	Classes merged on the root.
`defaultValue`	`string \| null`	`null`	The date at first, uncontrolled.
`defaultView`	`string`	—	Where the wheels rest while there is no value. Default: `max` (a birth date: the youngest allowed).
`disabled`	`boolean`	—	Not available.
`error`	`string`	—	An error under the field: marks it invalid and is read with it. Replaces the hint.
`hint`	`string`	—	A help text under the field ("For example, 27 3 1990").
`labels`	`Partial<DateFieldLabels>`	—	The names of the parts, passed translated; English by default.
`max`	`string`	—	The latest date (ISO): `latestBirthDate(18)` for an age gate. Default: today.
`min`	`string`	—	The earliest date (ISO): the years start there, the days before it are refused. Default: 120 years ago.
`name`	`string`	—	The name of a hidden input holding the value, for a plain `<form>` post.
`onValueChange`	`((value: string) => void)`	—	Called with the date under the band, always a real date within `min` / `max`.
`value`	`string \| null`	—	The date, `YYYY-MM-DD` (controlled); `""` or `null` for none (the wheels then rest on `defaultView`).

DatePicker

A date field: a button showing the date in the locale's format, a calendar in a popover, an ISO value.

Prop	Type	Default	Description
`label`required	`string`	—	The visible label, passed translated (also the button's accessible name, with the value).
`locale`required	`string`	—	The BCP 47 locale of the month and day names (`"en-US"`, `"fr-CA"`): always explicit.
`className`	`string`	—	Classes merged on the root.
`clearable`	`boolean`	—	Adds a button that empties the value.
`defaultOpen`	`boolean`	`false`	Opens the calendar at first (a story, a test).
`defaultValue`	`string \| null`	`null`	The chosen date at first, uncontrolled.
`disabled`	`boolean`	—	Not available.
`error`	`string`	—	An error under the field: marks it invalid and is read with it.
`format`	`"short" \| "medium" \| "long"`	—	`short` · `medium` (default) · `long`: how the button writes the date.
`hint`	`string`	—	A help text under the field.
`isDateDisabled`	`((date: string) => boolean)`	—	Refuses some dates (`(d) => isWeekend(d)`).
`labels`	`Partial<DatePickerLabels>`	—	The words, passed translated; English by default.
`max`	`string`	—	The latest date that can be picked.
`min`	`string`	—	The earliest date that can be picked.
`name`	`string`	—	The name of a hidden input holding the ISO value, for a plain `<form>` post.
`onValueChange`	`((value: string \| null) => void)`	—	Called with the date picked, or `null` when cleared.
`placeholder`	`string`	—	Shown while nothing is chosen ("Pick a date"), passed translated.
`today`	`string`	—	Today (marked): inject it for a stable server render or a test. Default: the device's date.
`value`	`string \| null`	—	The chosen date, ISO (controlled); `null` for none.
`weekStartsOn`	`number`	—	The first day of the week, 0 = Sunday. Default: the locale's.

DateRangePicker

A period field: two clicks on one calendar (the days between tinted as you hover), optional presets.

Prop	Type	Default	Description
`label`required	`string`	—	The visible label, passed translated (also the button's accessible name, with the value).
`locale`required	`string`	—	The BCP 47 locale of the month and day names (`"en-US"`, `"fr-CA"`): always explicit.
`className`	`string`	—	Classes merged on the root.
`clearable`	`boolean`	—	Adds a button that empties the value.
`defaultOpen`	`boolean`	`false`	Opens the calendar at first (a story, a test).
`defaultValue`	`{ start: string; end: string; } \| null`	`null`	The range at first, uncontrolled.
`disabled`	`boolean`	—	Not available.
`error`	`string`	—	An error under the field: marks it invalid and is read with it.
`format`	`"short" \| "medium" \| "long"`	—	`short` · `medium` (default) · `long`: how the button writes the date.
`hint`	`string`	—	A help text under the field.
`isDateDisabled`	`((date: string) => boolean)`	—	Refuses some dates (`(d) => isWeekend(d)`).
`labels`	`Partial<DatePickerLabels>`	—	The words, passed translated; English by default.
`max`	`string`	—	The latest date that can be picked.
`min`	`string`	—	The earliest date that can be picked.
`name`	`string`	—	The name of a hidden input holding the ISO value, for a plain `<form>` post.
`numberOfMonths`	`1 \| 2`	`2`	Two months side by side (default, from a phone's width up) or one.
`onValueChange`	`((value: { start: string; end: string; } \| null) => void)`	—	Called once both ends are chosen (or with `null` when cleared).
`placeholder`	`string`	—	Shown while nothing is chosen ("Pick a date"), passed translated.
`presets`	`readonly DateRangePreset[]`	—	Ranges one click away ("Last 7 days", "This month"), beside the calendar.
`today`	`string`	—	Today (marked): inject it for a stable server render or a test. Default: the device's date.
`value`	`{ start: string; end: string; } \| null`	—	The chosen range (controlled); `null` for none. `end` is never `null` in a committed value.
`weekStartsOn`	`number`	—	The first day of the week, 0 = Sunday. Default: the locale's.

DayStrip

The days ahead in a row that scrolls sideways: one picked, today and the marked days shown.

Prop	Type	Default	Description
`label`required	`string`	—	The group's accessible name ("Delivery day"), passed translated.
`locale`required	`string`	—	The BCP 47 locale of the names and the dates: always explicit.
`className`	`string`	—	Classes merged on the root.
`days`	`number`	`14`	How many days. Default 14.
`defaultValue`	`string \| null`	`null`	The chosen day at first, uncontrolled.
`isDateDisabled`	`((date: string) => boolean)`	—	Refuses some days (closed, full): drawn dashed, skipped by the arrows.
`isDateMarked`	`((date: string) => boolean)`	—	Marks the days that have something (a session, an event): a dot, and `labels.marked` in their name.
`labels`	`Partial<DayStripLabels>`	—	The words, passed translated; English by default.
`onValueChange`	`((value: string) => void)`	—	Called with the day picked.
`showHeader`	`boolean`	`true`	Shows the month of the chosen day (or of the first) and the page buttons above the strip.
`start`	`string`	—	The first day of the strip. Default: today.
`today`	`string`	—	Today (marked by the node): inject it for a stable render or a test. Default: the device's date.
`value`	`string \| null`	—	The chosen day, ISO (controlled); `null` for none.

MonthPicker

A month of a year: twelve months in a grid, the year above them.

Prop	Type	Default	Description
`locale`required	`string`	—	The BCP 47 locale of the month names: always explicit.
`autoFocus`	`boolean`	—	Moves the focus to the active month when it mounts.
`bare`	`boolean`	—	Without its own year header (inside the calendar, which has one).
`className`	`string`	—	Classes merged on the root.
`current`	`string`	—	This month (marked): inject it for a stable render or a test. Default: the device's.
`defaultValue`	`string \| null`	`null`	The chosen month at first, uncontrolled.
`labels`	`Partial<MonthPickerLabels>`	—	The words, passed translated; English by default.
`max`	`string`	—	The latest month that can be picked, `YYYY-MM`.
`min`	`string`	—	The earliest month that can be picked, `YYYY-MM`.
`onValueChange`	`((value: string \| null) => void)`	—	Called with the month picked.
`onYearChange`	`((year: number) => void)`	—	Called when the year shown changes.
`value`	`string \| null`	—	The chosen month, `YYYY-MM` (controlled); `null` for none.
`variant`	`"plain" \| "card"`	—	`plain` or `card` (its own raised surface).
`year`	`number`	—	The year shown (controlled).

TimePicker

A time of day: wheels to set one, or slots to book one.

Prop	Type	Default	Description
`label`required	`string`	—	The accessible name of the picker ("Pick-up time"), passed translated.
`locale`required	`string`	—	The BCP 47 locale: how times are written, and whether the day has a period (AM/PM).
`className`	`string`	—	Classes merged on the root.
`defaultValue`	`string \| null`	—	The time at first, uncontrolled.
`disabled`	`boolean`	—	Not available.
`groupLabels`	`{ morning: string; afternoon: string; evening: string; }`	—	Splits the slots under headings by part of the day: `{ morning: "Morning", afternoon: "Afternoon", evening: "Evening" }`.
`hour12`	`boolean`	—	Forces 12 or 24 hours. Default: the locale's.
`isTimeDisabled`	`((time: string) => boolean)`	—	Refuses some slots (taken, too soon): drawn struck through, skipped by the arrows.
`labels`	`Partial<TimePickerLabels>`	—	The words of the wheels, passed translated; English by default.
`minuteStep`	`number`	—	The minutes' step: 1, 5 (default), 10, 15, 30.
`onValueChange`	`((value: string) => void)`	—	Called with the time chosen.
`slots`	`readonly string[]`	—	The times offered, `HH:mm` (`timeSlots("09:00", "17:00", 30)`).
`value`	`string \| null`	—	The time, `HH:mm` on 24 hours (controlled); `null` for none.
`variant`	`"slots" \| "wheel"`	—	`wheel`: hours and minutes (and the period) as wheels — a time you set (a reminder, an alarm). `slots`: the free times as buttons — a booking, a delivery window, an appointment.

Wheel

One column of a WheelPicker: a spinbutton over a scroll-snapped list of values.

Prop	Type	Default	Description
`label`required	`string`	—	The column's accessible name ("Hour", "Month"), passed translated.
`options`required	`readonly WheelOption[]`	—	The values, in order.
`className`	`string`	—	Classes merged on the column (a width: `w-20`).
`defaultValue`	`string`	—	The chosen value at first, uncontrolled. Default: the first one.
`disabled`	`boolean`	—	Not available.
`onValueChange`	`((value: string) => void)`	—	Called with the value that comes to rest under the band.
`value`	`string \| null`	—	The chosen value (controlled).

WheelPicker

The frame of one or several wheels: a raised surface, the lit band across them, a group named by label.

Prop	Type	Default	Description
`children`required	`ReactNode`	—	The wheels (`Wheel`), and dividers (`WheelDivider`) between them.
`label`required	`string`	—	The group's accessible name ("Departure time"), passed translated.
`aria-describedby`	`string`	—	The help text or the error that describes the group (their ids).
`className`	`string`	—	Classes merged on the root.
`invalid`	`boolean`	—	Marks the group invalid (a danger edge): pair it with an error read through `aria-describedby`.
`unset`	`boolean`	—	Nothing is chosen yet: the values under the band stay quiet until a wheel is turned.
`visible`	`3 \| 5 \| 7`	`5`	How many values are visible: 3, 5 (default) or 7.

Accessibility

The APG date picker: the month is a grid labelled by its month, one day in the tab order, each day named by its full date; today carries aria-current="date", chosen days aria-selected, unavailable days are disabled.
The month's title is a button that opens the months of the year (aria-expanded); a change of month is announced by a polite live region.
A wheel is a spinbutton (aria-valuetext reads the value as words); on React Native an adjustable control — swipe up or down with VoiceOver or TalkBack.
The day strip and the time slots are radio groups: one tab stop, the arrows move and pick, taken or closed items are disabled and skipped.
DateField is a fieldset named by its legend, each box named by its part; the error is read with the field (aria-describedby).
Nothing moves under reduced motion: the month's slide stops; the wheel's curve is tied to the scroll, not to time.

Keyboard

Keys	Action
`Arrow keys`	Calendar: move by a day or a week. Month picker: by a month or a row. Day strip and slots: move and pick.
`Home / End`	First or last day of the week (calendar), first or last item (strip, slots, wheel).
`Page Up / Page Down`	Calendar: previous or next month (with Shift: year). Month picker: year. Wheel: by five values.
`Up / Down`	Wheel: the previous or next value.
`Enter / Space`	Pick the focused day or month.
`Esc`	Close the calendar and return to the field.

Best practices

Always pass the person's locale: names, the first day of the week, the order of day · month · year and 12/24 hours follow it.
Keep values as ISO strings in state and in the address (YYYY-MM-DD, YYYY-MM, HH:mm); format them only for display.
Bound the choice with min / max, isDateDisabled or isTimeDisabled rather than refusing after the fact — an age gate is max={latestBirthDate(18)}.
Offer presets on a period picker: most people want “Last 30 days”, not two clicks.
Mark the days that have something (isDateMarked) on a strip: the dot is read in the day's name too.

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Mon	Tue	Wed	Thu	Fri	Sat	Sun

Date picker

When to use

When not to use

Installation

Examples

Schedule

Calendar open

Period with presets

In French

Inline calendar

Month and year

Day strip

Wheel

Time, wheels

Time, slots

Date of birth, typed

Date of birth, wheels

Props

Accessibility

Keyboard

Best practices

Related components

On this page