Krizaka
Documentation

Date picker

A date or a period chosen on a calendar — ISO values (2026-10-11) the form, the address and the API share, read in the locale's own words through @krizaka/intl.

WebBetaForms

Web only — React, from @krizaka/ui/date-picker. Beta: its API may still change in a minor version.

When to use

  • To schedule something on a day: a publication, an auction's end, a reminder.
  • With DateRangePicker for a period: an earnings report, an audit log, a campaign — with presets.
  • With Calendar alone when the month itself is the interface (availability, a booking).

When not to use

  • For a date of birth or a date far away: three fields (day, month, year) are faster than paging through years.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 } from "@krizaka/ui/date-picker";

Examples

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 marked, the chosen day filled.

Period with presets

DateRangePicker for an earnings report: presets beside the calendar.

In French

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

Calendar alone

Calendar inline: the month is the interface, weekends unavailable.

October 2026

MonTueWedThuFriSatSun

Props

Calendar

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

PropTypeDefaultDescription
localerequiredstring—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, any day of it (controlled).
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 marked, the days between tinted.
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).
weekStartsOnnumber—The first day of the week, 0 = Sunday. Default: the locale's.

DatePicker

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

PropTypeDefaultDescription
labelrequiredstring—The visible label, passed translated (also the button's accessible name, with the value).
localerequiredstring—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.

PropTypeDefaultDescription
labelrequiredstring—The visible label, passed translated (also the button's accessible name, with the value).
localerequiredstring—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.
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.

Accessibility

  • The APG date picker: the month is a grid labelled by its title, 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 buttons.
  • The month's title is a polite live region: a change of month is heard.
  • The field is a button named by its <label>, with aria-haspopup="dialog"; Radix returns the focus to it on close.

Keyboard

KeysAction
Arrow keysMove by a day or a week.
Home / EndFirst or last day of the week.
Page Up / Page DownPrevious or next month (with Shift: year).
Enter / SpacePick the focused day.
EscClose the calendar and return to the field.

Best practices

  • Always pass the person's locale: month and day names, the first day of the week and the date's format follow it.
  • Keep the value as an ISO date in state and in the address; format it only for display.
  • Bound the choice with min / max and isDateDisabled rather than refusing after the fact.
  • Offer presets on a period picker: most people want “Last 30 days”, not two clicks.

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

Combobox

A text field that suggests and completes — one value or several as chips, from a static list or a server, with values created from what was typed.

Field

A form field: a label, a hint and an error around an Input, a Textarea or a native Select.

On this page

When to useInstallationExamplesPropsAccessibilityBest practicesRelated components