Date Picker

Context MenuDrawer

A field that opens a calendar to pick a date or range.

Installation

pnpm add krz-ui

Usage

import { DatePicker } from "krz-ui";
<DatePicker label="Due date" value={date} onValueChange={setDate} clearable />

<DatePicker mode="range" label="Stay" value={range} onValueChange={setRange} />

API Reference

PropTypeDescription
mode"single" | "range"Pick one date or a from–to range.
value / defaultValueDate | DateRange | nullControlled or initial selection.
onValueChange(value) => voidCalled with the new date or range.
label / hint / error / placeholderReactNode / stringField text.
min / max / isDateDisabledDate / (date) => booleanLimit which days can be picked.
formatOptionsIntl.DateTimeFormatOptionsHow the value is shown. Defaults to { dateStyle: "medium" }.
clearablebooleanShow a button that clears the value.
locale / weekStartsOnstring / 0 | 1Localization.
className / style / ref—className and style go on the whole field; ref and native attributes go to the trigger button. See Customization.
classNames{ label?, control?, icon?, message?, trigger?, clear?, panel?, calendar? }Extra classes for inner parts.