📦 vue-date-wheel

A simple, user-friendly Vue 3 date picker built out of frustration with clunky, unintuitive date picker UIs.

This component focuses on smooth scrolling, clean interaction, and a minimal, native-like experience.

✨ Features

• 🎯 Scroll-based wheel picker (iOS-style)
• 🧲 Native scroll snapping
• 🖱️ Smooth scrolling UX
• ⌨️ Keyboard-friendly
• 🪶 Lightweight and dependency-minimal
• ⚙️ Fully compatible with Vue 3

📸 Demo

Click to play demo

📥 Installation

npm install vue-date-wheel

⚙️ Requirements

This package requires:

• Vue 3
• date-fns

npm install date-fns

🚀 Usage

Global registration

import { createApp } from 'vue'
import DateWheel from '@neonwired/vue-date-wheel'

const app = createApp(App)
app.use(DateWheel)

Local import

import { DateWheel } from '@neonwired/vue-date-wheel'

<template>
  <DateWheel v-model="date" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const date = ref({
  day: '1',
  month: '0', // 0 = January
  year: '2024'
})
</script>

🔁 v-model format

The component uses a simple object structure:

{
  day: string,
  month: string, // 0–11 (0 = January)
  year: string
}

⚙️ Props

| Prop | Type | Description | |-------------|--------|-----------------------| | modelValue | Object | Current selected date |

📡 Events

| Event | Payload | Description | |--------------------|-----------|---------------------------| | update:modelValue | ModelDate | Emitted when date changes |

🎨 Styling

vue-date-wheel ships with a small amount of required CSS for layout, scrolling, and snap behavior.

Import the styles

You must import the bundled CSS once in your app:

import '@neonwired/vue-date-wheel/dist/date-wheel.css'

You can customize styles using standard classes:

<DateWheel class="my-custom-class" />

🧠 How it works

• Uses native CSS scroll snapping
• Emits updates via v-model
• Uses smooth scrolling for a natural feel

⚠️ Notes

• Months are 0-indexed (0 = January)
• date-fns is required as a peer dependency
• Uses experimental scrol snap events so might not function in all browsers

🛠️ Development

npm install
npm run dev

📦 Build

npm run build

❤️ Motivation

Most date pickers feel heavy, awkward, or over-engineered.
This component was built to provide a simpler, more intuitive alternative focused purely on user experience.

📄 License

MIT