Components

Date Picker

A field that opens a calendar: one date, or a range previewed as you point. Dates are "YYYY-MM-DD" strings, so they never shift with time zones.

Import

import { DatePicker, DateRangePicker } from '@rinzai/zen';

Examples

Range

A trip: the start, then the end, across two months. Closes once both are picked.

In field

In a Field: the label, hint and error are wired to the picker. Only dates from today on.

Start date

When the plan begins.

API reference

<DatePicker>

Date field: shows the date ("Sep 30, 2026" for the locale) and opens a Calendar to pick one, focused on the chosen date so the keyboard works at once. Dates are "YYYY-MM-DD" strings. With onClear, the popup also offers clearLabel to empty it.

Prop	Type	Default
`locale`Required Decides the date format, month and weekday names, and the first day of the week, e.g. "en-IN".	`string`	`—`
`onChange`Required	`(date: string) => void`	`—`
`value`Required "YYYY-MM-DD", or null for none.	`string \| null`	`—`
`className` Classes for the trigger (e.g. a width, instead of the default full width).	`string`	`—`
`clearLabel`	`string`	`Clear`
`isDisabled` Dates that can't be picked, e.g. weekends or booked days.	`((date: string) => boolean)`	`—`
`max` Latest date that can be picked.	`string`	`—`
`min` Earliest date that can be picked ("YYYY-MM-DD").	`string`	`—`
`onClear` Offers a clear option in the popup (shown when a value is set).	`(() => void)`	`—`
`placeholder`	`string`	`Pick a date`
`weekStartsOn` 0 for Sunday … 6 for Saturday. Defaults to the locale's.	`number`	`—`

<DateRangePicker>

Date range field: pick a start and then an end in a Calendar (the days between are previewed while pointing); it closes once the range is complete. Shows the range the locale's way, e.g. "Sep 3 – 10, 2026".

Prop	Type	Default
`locale`Required Decides the date format, month and weekday names, and the first day of the week, e.g. "en-IN".	`string`	`—`
`onChange`Required	`(range: DateRange) => void`	`—`
`value`Required The range; `end` is null while only the start is picked.	`DateRange \| null`	`—`
`className` Classes for the trigger (e.g. a width, instead of the default full width).	`string`	`—`
`clearLabel`	`string`	`Clear`
`isDisabled` Dates that can't be picked, e.g. weekends or booked days.	`((date: string) => boolean)`	`—`
`max` Latest date that can be picked.	`string`	`—`
`min` Earliest date that can be picked ("YYYY-MM-DD").	`string`	`—`
`months` Months shown side by side (2 suits wide screens).	`number`	`1`
`onClear` Offers a clear option in the popup (shown when a value is set).	`(() => void)`	`—`
`placeholder`	`string`	`Pick dates`
`weekStartsOn` 0 for Sunday … 6 for Saturday. Defaults to the locale's.	`number`	`—`