DateWheelPicker

DateWheelPicker is a React Native date wheel picker with day, month and year wheels, like the classic iOS date picker. Best for dates far from today (birthdays, expiry dates) where a calendar would need many taps.

import { DateWheelPicker } from '@elik56a/react-native-pickers';
// or: <DatePicker display="wheel" … />

Loading…

Props

variant

loop

monthFormat

<>
  <DateWheelPicker
    value={birthday}
    onChange={setBirthday}
    maxDate={new Date()}
  />
  <Text style={{ textAlign: 'center', color: '#6E685E' }}>
    {formatDate(birthday, undefined, { dateStyle: 'long' })}
  </Text>
</>

<DatePicker display="wheel" /> renders exactly this component with the same props.

Try the props

order

monthFormat

loop

variant

<DateWheelPicker value={date} onChange={setDate} order={['day', 'month', 'year']} />

Column order from the locale

The order of the wheels follows the locale's date format: month / day / year for en-US, day / month / year for en-GB, de, he, fr, and year / month / day for ja, zh, ko. Override it with order.

Loading…

Props

variant

loop

monthFormat

<View style={{ gap: 12 }}>
  <Text style={{ fontWeight: '600' }}>en-GB</Text>
  <DateWheelPicker
    value={d}
    onChange={setD}
    locale="en-GB"
    visibleItems={3}
  />
  <Text style={{ fontWeight: '600' }}>ja-JP</Text>
  <DateWheelPicker
    value={d}
    onChange={setD}
    locale="ja-JP"
    visibleItems={3}
  />
  <Text style={{ fontWeight: '600' }}>Custom order, numeric months</Text>
  <DateWheelPicker
    value={d}
    onChange={setD}
    order={['year', 'month', 'day']}
    monthFormat="numeric"
    visibleItems={3}
  />
</View>

Month format

monthFormat	Example
'long' (default)	January
'short'	Jan
'numeric'	01 (days are zero-padded too)

Day clamping

When the month or year changes to one with fewer days, the day is clamped automatically: Jan 31 → February becomes Feb 28 (or 29 in leap years). The day wheel always shows exactly the days in the selected month.

Min, max and year range

minDate and maxDate limit the selection: days and months outside the range are disabled, and a changed date is clamped into the range. The year wheel starts at minDate's year and ends at maxDate's year. An end without a date comes from yearRange, else 100 years before or after today.

Loading…

Props

variant

loop

monthFormat

<DateWheelPicker
  value={expiry}
  onChange={setExpiry}
  order={['month', 'year']}
  monthFormat="numeric"
  yearRange={[2026, 2040]}
  loop={false}
/>

Month + year only

Pass only the columns you need in order, for example ['month', 'year'] for card expiry dates. The day is kept from value, and clamped if needed.

Looping

The day and month wheels loop by default (loop); the year wheel never loops.

In a form field

DatePickerField with display="wheel" opens these wheels in a sheet from a field, and shows the confirmed date. Switch presentation in the panel: auto opens a dropdown under the field on the web and a bottom sheet on iOS and Android.

Platform

presentation

clearable

<DatePickerField
  label="Birthday"
  placeholder="Pick a date"
  display="wheel"
  value={date}
  onConfirm={setDate}
/>

→ Picker fields

Props

Prop	Type	Default	Description
value	Date	—	Selected date (controlled). Time of day is preserved.
defaultValue	Date	today	Initial date when uncontrolled (clamped to min/max).
onChange	(date: Date) => void	—	Fires when a wheel settles.
onValueChanging	(date: Date) => void	—	Fires on every tick (haptics).
locale	string	device	Month names and default column order.
minDate	Date	—	Earliest selectable date.
maxDate	Date	—	Latest selectable date.
order	('day' | 'month' | 'year')[]	from locale	Columns and their order.
monthFormat	'long' | 'short' | 'numeric'	'long'	Month labels.
yearRange	[number, number]	today ±100	First and last year, for an end without minDate / maxDate.
loop	boolean	true	Loop day and month wheels.
itemHeight	number	40	Row height.
visibleItems	number	5	Visible rows.
variant	'3d' | 'flat'	'3d'	Wheel style.
style	StyleProp<ViewStyle>	—	Container style.
styles	SlotStyles<MultiWheelSlot>	—	MultiWheelPicker slots.
theme	DeepPartial<PickerTheme>	—	Theme override.
design	'ios' | 'material' | 'web'	from PickersProvider	The look to follow, over the provider's: iOS, Material or web.
testID	string	—	Test ID.

type DatePart = 'day' | 'month' | 'year';

Related

• Birthday recipe
• DatePickerSheet with display="wheel"
• DatePickerField with display="wheel": the wheel behind a form field