An inertial month, day, and year picker with cylindrical depth, spring snapping, and keyboard control.
| Prop | Type | Default |
|---|---|---|
valueControlled selected date. | Date | — |
defaultValueInitial date for uncontrolled usage. | Date | — |
onChangeCalled as a wheel crosses into a new value. | (value: Date) => void | — |
minYearEarliest selectable year. | number | 1900 |
maxYearLatest selectable year. | number | 2050 |
localeLocale used to format month labels. | string | — |
monthFormatMonth label style. | "long" | "short" | "numeric" | "long" |
itemHeightHeight of each wheel step in pixels. | number | 44 |
visibleCountNumber of visible rows. | 3 | 5 | 7 | 5 |
lensShow the centered selection lens. | boolean | true |
disabledDisable pointer, wheel, and keyboard input. | boolean | false |
classNameAdditional classes for the picker frame. | string | — |
Click on the icon in the top right of the example preview to view the source code for specific variants.
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
October 3, 1963
import { WheelDatePicker } from "@/components/ui/wheel-date-picker"export function Demo() {
return (
<WheelDatePicker
defaultValue={new Date(2026, 6, 21)}
minYear={1900}
maxYear={2050}
onChange={(date) => console.log(date)}
/>
)
}