Krizaka UI
Krizaka UI
Composants

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 + MobileBêtaFormulaires

Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. Orochia's scheduling and Yasakia's availability (DS5 dates), through the form.

Quand l’utiliser

  • 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.

Quand ne pas l’utiliser

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

Installation

Installer

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

Styles

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

Importer

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

Exemples

Schedule

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

Your followers are told when it goes live.

Calendar open

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

Period with presets

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

In French

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

Inline calendar

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

October 2026
MonTueWedThuFriSatSun

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

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.

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.

PropTypeDéfautDescription
localerequisstring—The BCP 47 locale of the month and day names ("en-US", "fr-CA"): always explicit.
autoFocusboolean—Moves the focus to the active day when it mounts (inside a popover).
classNamestring—Classes merged on the root.
defaultMonthstring—The month shown at first. Default: the value's, or today's.
isDateDisabled((date: string) => boolean)—Refuses some dates ((d) => isWeekend(d)).
labelsPartial<CalendarLabels>—The words, passed translated; English by default.
maxstring—The latest date that can be picked.
minstring—The earliest date that can be picked.
monthstring—The month shown (the first one, with numberOfMonths={2}), any day of it (controlled).
numberOfMonths1 | 21One 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.
rangeDateRange | null—The chosen range (range mode): its ends are lit, the days between are one band.
todaystring—Today (marked): inject it for a stable server render or a test. Default: the device's date.
valuestring | 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).
weekStartsOnnumber—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.

PropTypeDéfautDescription
labelrequisstring—The visible label, passed translated (the group's name).
localerequisstring—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.
classNamestring—Classes merged on the root.
defaultValuestring—The date at first, uncontrolled.
disabledboolean—Not available.
errorstring—An error under the field: marks it invalid and is read with it. Replaces the hint.
hintstring—A help text under the field ("For example, 27 3 1990").
labelsPartial<DateFieldLabels>—The names of the parts, passed translated; English by default.
namestring—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).
valuestring—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.

PropTypeDéfautDescription
labelrequisstring—The visible label, passed translated (the group's name).
localerequisstring—The BCP 47 locale: the order of the parts, the names of the months.
classNamestring—Classes merged on the root.
defaultValuestring | nullnullThe date at first, uncontrolled.
defaultViewstring—Where the wheels rest while there is no value. Default: max (a birth date: the youngest allowed).
disabledboolean—Not available.
errorstring—An error under the field: marks it invalid and is read with it. Replaces the hint.
hintstring—A help text under the field ("For example, 27 3 1990").
labelsPartial<DateFieldLabels>—The names of the parts, passed translated; English by default.
maxstring—The latest date (ISO): latestBirthDate(18) for an age gate. Default: today.
minstring—The earliest date (ISO): the years start there, the days before it are refused. Default: 120 years ago.
namestring—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.
valuestring | 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.

PropTypeDéfautDescription
labelrequisstring—The visible label, passed translated (also the button's accessible name, with the value).
localerequisstring—The BCP 47 locale of the month and day names ("en-US", "fr-CA"): always explicit.
classNamestring—Classes merged on the root.
clearableboolean—Adds a button that empties the value.
defaultOpenbooleanfalseOpens the calendar at first (a story, a test).
defaultValuestring | nullnullThe chosen date at first, uncontrolled.
disabledboolean—Not available.
errorstring—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.
hintstring—A help text under the field.
isDateDisabled((date: string) => boolean)—Refuses some dates ((d) => isWeekend(d)).
labelsPartial<DatePickerLabels>—The words, passed translated; English by default.
maxstring—The latest date that can be picked.
minstring—The earliest date that can be picked.
namestring—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.
placeholderstring—Shown while nothing is chosen ("Pick a date"), passed translated.
todaystring—Today (marked): inject it for a stable server render or a test. Default: the device's date.
valuestring | null—The chosen date, ISO (controlled); null for none.
weekStartsOnnumber—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.

PropTypeDéfautDescription
labelrequisstring—The visible label, passed translated (also the button's accessible name, with the value).
localerequisstring—The BCP 47 locale of the month and day names ("en-US", "fr-CA"): always explicit.
classNamestring—Classes merged on the root.
clearableboolean—Adds a button that empties the value.
defaultOpenbooleanfalseOpens the calendar at first (a story, a test).
defaultValue{ start: string; end: string; } | nullnullThe range at first, uncontrolled.
disabledboolean—Not available.
errorstring—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.
hintstring—A help text under the field.
isDateDisabled((date: string) => boolean)—Refuses some dates ((d) => isWeekend(d)).
labelsPartial<DatePickerLabels>—The words, passed translated; English by default.
maxstring—The latest date that can be picked.
minstring—The earliest date that can be picked.
namestring—The name of a hidden input holding the ISO value, for a plain <form> post.
numberOfMonths1 | 22Two 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).
placeholderstring—Shown while nothing is chosen ("Pick a date"), passed translated.
presetsreadonly DateRangePreset[]—Ranges one click away ("Last 7 days", "This month"), beside the calendar.
todaystring—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.
weekStartsOnnumber—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.

PropTypeDéfautDescription
labelrequisstring—The group's accessible name ("Delivery day"), passed translated.
localerequisstring—The BCP 47 locale of the names and the dates: always explicit.
classNamestring—Classes merged on the root.
daysnumber14How many days. Default 14.
defaultValuestring | nullnullThe 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.
labelsPartial<DayStripLabels>—The words, passed translated; English by default.
onValueChange((value: string) => void)—Called with the day picked.
showHeaderbooleantrueShows the month of the chosen day (or of the first) and the page buttons above the strip.
startstring—The first day of the strip. Default: today.
todaystring—Today (marked by the node): inject it for a stable render or a test. Default: the device's date.
valuestring | null—The chosen day, ISO (controlled); null for none.

MonthPicker

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

PropTypeDéfautDescription
localerequisstring—The BCP 47 locale of the month names: always explicit.
autoFocusboolean—Moves the focus to the active month when it mounts.
bareboolean—Without its own year header (inside the calendar, which has one).
classNamestring—Classes merged on the root.
currentstring—This month (marked): inject it for a stable render or a test. Default: the device's.
defaultValuestring | nullnullThe chosen month at first, uncontrolled.
labelsPartial<MonthPickerLabels>—The words, passed translated; English by default.
maxstring—The latest month that can be picked, YYYY-MM.
minstring—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.
valuestring | null—The chosen month, YYYY-MM (controlled); null for none.
variant"plain" | "card"—plain or card (its own raised surface).
yearnumber—The year shown (controlled).

TimePicker

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

PropTypeDéfautDescription
labelrequisstring—The accessible name of the picker ("Pick-up time"), passed translated.
localerequisstring—The BCP 47 locale: how times are written, and whether the day has a period (AM/PM).
classNamestring—Classes merged on the root.
defaultValuestring | null—The time at first, uncontrolled.
disabledboolean—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" }.
hour12boolean—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.
labelsPartial<TimePickerLabels>—The words of the wheels, passed translated; English by default.
minuteStepnumber—The minutes' step: 1, 5 (default), 10, 15, 30.
onValueChange((value: string) => void)—Called with the time chosen.
slotsreadonly string[]—The times offered, HH:mm (timeSlots("09:00", "17:00", 30)).
valuestring | 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.

PropTypeDéfautDescription
labelrequisstring—The column's accessible name ("Hour", "Month"), passed translated.
optionsrequisreadonly WheelOption[]—The values, in order.
classNamestring—Classes merged on the column (a width: w-20).
defaultValuestring—The chosen value at first, uncontrolled. Default: the first one.
disabledboolean—Not available.
onValueChange((value: string) => void)—Called with the value that comes to rest under the band.
valuestring | 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.

PropTypeDéfautDescription
childrenrequisReactNode—The wheels (Wheel), and dividers (WheelDivider) between them.
labelrequisstring—The group's accessible name ("Departure time"), passed translated.
aria-describedbystring—The help text or the error that describes the group (their ids).
classNamestring—Classes merged on the root.
invalidboolean—Marks the group invalid (a danger edge): pair it with an error read through aria-describedby.
unsetboolean—Nothing is chosen yet: the values under the band stay quiet until a wheel is turned.
visible3 | 5 | 75How many values are visible: 3, 5 (default) or 7.

Accessibilité

  • 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.

Clavier

TouchesAction
Arrow keysCalendar: move by a day or a week. Month picker: by a month or a row. Day strip and slots: move and pick.
Home / EndFirst or last day of the week (calendar), first or last item (strip, slots, wheel).
Page Up / Page DownCalendar: previous or next month (with Shift: year). Month picker: year. Wheel: by five values.
Up / DownWheel: the previous or next value.
Enter / SpacePick the focused day or month.
EscClose the calendar and return to the field.

Bonnes pratiques

  • 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.

Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Combobox

Précédent

Field

Suivant

Sur cette page

Quand l’utiliserInstallationExemplesPropsAccessibilitéBonnes pratiquesComposants liés