DatePicker

A single-date selector with a popup calendar. Styled consistently with Select and Input. Supports min/max bounds, disabled dates, and custom formatting. Desktop selection is confirmed with OK; coarse-pointer devices use the native date input and update immediately. Place the picker under Root for its popup manager.


Basic Usage

Bind value to a Date | null. Use clearable to allow clearing the selection.

No date selected.


Disabled Dates

Use min to prevent past dates, and disabledDays to block specific weekdays (e.g. [0, 6] for weekends). These weekday and individual-date restrictions apply to the library calendar, not the native input. Validate them in your application if they are business rules.

No date selected.


Sizes & Custom Format

Three sizes: normal (default), compact, and small. Pass a custom format function to control how the selected date is displayed.


Inline and custom-trigger APIs

Use DatePickerBody for immediate inline editing or DatePopover for a custom trigger and onconfirm callback. Their value props are not bindable.