React Date Wheel Picker

https://www.npmjs.com/package/react-date-wheel-picker
Admin
A lightweight and customizable 3D wheel-style date picker for React, inspired by iOS and Google Maps...
Tokens:3,838
Snippets:49
Trust Score:9.6
Update:9 months ago
Show doc for...
Tokens:
Raw
### Install react-date-wheel-picker npm package

Source: https://www.npmjs.com/package/react-date-wheel-picker/v/0.1_activeTab=versions

Command to install a specific version (0.1.9) of the react-date-wheel-picker package using npm. This is a direct installation command.

```bash
npm i react-date-wheel-picker@0.1.9
```

--------------------------------

### Run Development Server using npm, yarn, pnpm, or bun

Source: https://www.npmjs.com/package/react-date-wheel-picker/v/0.1

This snippet shows the commands to start the development server for the Next.js project. It supports multiple package managers, including npm, yarn, pnpm, and bun. Running these commands will start a local server to preview the application.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Install react-date-wheel-picker using npm or yarn

Source: https://www.npmjs.com/package/react-date-wheel-picker/index_activeTab=code

This snippet shows how to install the react-date-wheel-picker package using either npm or yarn package managers.

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

--------------------------------

### Install react-date-wheel-picker npm package

Source: https://www.npmjs.com/package/react-date-wheel-picker/v/0.1

This command installs the react-date-wheel-picker package version 0.1.8 using npm. This is the primary method to add the date picker component to your project.

```bash
npm i react-date-wheel-picker@0.1.8
```

--------------------------------

### Customize DateScrollPicker styling with classNames prop

Source: https://www.npmjs.com/package/react-date-wheel-picker/index_activeTab=code

This example shows how to customize the appearance of the DateScrollPicker component by providing custom styles through the `classNames` prop. It targets specific elements like `pickerItem` and `highlightOverlay`.

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

--------------------------------

### Usage with Next.js - Dynamic Import with SSR disabled

Source: https://www.npmjs.com/package/react-date-wheel-picker/index_activeTab=code

Demonstrates how to use the DateScrollPicker component in a Next.js application. It requires dynamic import with `ssr: false` due to scroll-based DOM APIs. It manages the selected date state and displays it.

```javascript
'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>
  )
}
```
Tokens:
Raw