📆 React Date Wheel Picker

A lightweight and customizable 3D wheel-style date picker for React — inspired by iOS and Google Maps date/time pickers. Perfect for mobile or modern UIs.

✨ Features

• 3D scrollable day/month/year picker
• Mobile-first interaction
• Customizable item height, visible rows, styles
• Fully controlled date change handler
• SSR-safe for Next.js apps

📦 Installation

npm install react-date-wheel-picker
# or
yarn add react-date-wheel-picker

⚡️ Usage with Next.js

Next.js requires dynamic imports with ssr: false due to scroll-based DOM APIs:

'use client'

import { useState } from 'react'
import dynamic from 'next/dynamic'
import { Typography } from '@mui/material'

// Dynamically import the component
const DateScrollPicker = dynamic(
  () => import('react-date-wheel-picker').then((mod) => mod.DateScrollPicker),
  { ssr: false }
)

export default function Page() {
  const [selectedDate, setSelectedDate] = useState<Date>()

  return (
    <div>
      <DateScrollPicker onDateChange={setSelectedDate} />
      <Typography sx={{ mt: 4 }} variant="body1" fontWeight="bold">
        {selectedDate?.toDateString()}
      </Typography>
    </div>
  )
}

🧩 Props

| Prop | Type | Default | Description | |------------------------|----------------------------------------|-------------------|------------------------------------------------------| | onDateChange | (date: Date) => void | — | Callback on date selection | | pickerItemHeight | number | 25 | Height (in px) for each scroll item | | visibleRows | 1 | 3 | 5 | 7 | 9 (odd number only) | 5 | Number of items visible at once | | startYear | number | 2000 | Minimum year shown | | endYear | number | startYear + 99 | Maximum year (defaults to 100 years span) | | defaultSelectedYear | number | current year | Initial selected year | | defaultSelectedMonth | number (0-11) | current month | Initial selected month (0 = January) | | defaultSelectedDay | number | current day | Initial selected day | | dateTimeFormatOptions| Intl.DateTimeFormatOptions | { month: 'long' }| Custom formatting for month names | | classNames | { container?, pickerWrapper?, pickerColumn?, pickerItem?, highlightOverlay?, ... } | — | Custom inline styles per section |

🛠 Styling

You can override styles for all parts of the picker using the classNames prop:

<DateScrollPicker
  classNames={{
    pickerItem: { color: 'blue', fontSize: '18px' },
    highlightOverlay: { border: '2px dashed red' },
  }}
/>

🧪 Example

Check out full examples in the examples folder or Codesandbox soon.

📃 License

MIT © 2025
Maintained by [Shivam Kumar Dwivedi].