WheelDatePicker

import { WheelDatePicker } from '@lunisolar-picker/react/pickers';

<WheelDatePicker aria-label="Birth date" presentation="sheet" value={birthDate} onValueChange={(next) => setBirthDate(next)} />;

Flick a column on a phone and it keeps spinning, then settles on an item. On a desktop use the mouse wheel, drag, click an item, or focus a column and use the arrow keys, PageUp and PageDown (five items), Home and End. In the year column you can type a year.

When lunar dates are on, the month column lists leap months only in years that have them. If the year changes and the leap month disappears, the picker moves to the regular month. If a lunar month has 29 days, day 30 moves to 29.

With presentation="sheet" the trigger shows the value (or placeholder; without one it shows its label, the aria-label or “Choose date”, unless aria-labelledby points at a visible label) and opens the drums in a bottom sheet. Scrolling there changes a draft; Confirm keeps it and Cancel or closing discards it.

Prop	Type	Default	Description
presentation	'inline' | 'sheet'	'inline'	Render in place, or in a bottom sheet with a trigger.
value, defaultValue, onValueChange, min, max			As on DatePicker. Disabling single days is not supported on wheels.
entryCalendar, defaultEntryCalendar, onEntryCalendarChange	'gregory' | 'dangi'	value’s calendar	Which calendar the drums use when lunar dates are enabled.
open, defaultOpen, onOpenChange	boolean		Control the sheet.
isClearable, renderTrigger, placeholder, ref, onBlur, onInvalidValue			As on DatePicker.
name, form, required, disabled, readOnly, invalid			Same as native inputs.

An inline wheel always shows a date. While the value is empty it shows today.