Wheel Style DateTime Picker Component Vue Library | Drumroll

Vue drumroll datetime picker is an iOS-inspired wheel component for Vue.js’ date and time picker. Roller selectable date picker by scrolling and dragging.

vue time picker, ios picker example, ios time picker figma, ios time picker wheel, ios picker wheel datetime wheel picker random wheel picker, wheel date picker android github

How to make use of it:

Install and download:

# Yarn
$ yarn add @plusone-masaki/vue-drumroll-datetime-picker

# NPM
$ npm i @plusone-masaki/vue-drumroll-datetime-picker

1. Import components into your application.

import Vue from 'vue'
import DateTimePicker, { DatePicker, TimePicker } from 'vue-drumroll-datetime-picker'
import 'vue-drumroll-datetime-picker/vue-drumroll-datetime-picker.css'

2. Register the components.

Vue.component('DateTimePicker', DateTimePicker)
Vue.component('DatePicker', DatePicker)
Vue.component('TimePicker', TimePicker)

3. Create a basic date and time picker.

<date-time-picker v-model="now" />

4. Create a date picker.

<date-time-picker v-model="now" type="date" />

5. Create a time picker.

<date-time-picker v-model="now" type="time" />

6. Show the date and time picker in a dialog popup.

<date-time-picker v-model="now" dialog />

7. Component props available.

// datetime picker
items: { type: Array, required: true },
format: { type: String, required: true },
height: { type: [String, Number], default: '10em' },
maxDate: { type: [String, Number, Date], default: undefined },
minDate: { type: [String, Number, Date], required: true },
unit: { type: String, required: true },
value: { type: [String, Number], default: undefined },
width: { type: [String, Number], default: '2em' },
height: { type: [String, Number], default: undefined },
hideButton: { type: Boolean, default: false },
maxDate: { type: [String, Number, Date], default: undefined },
minDate: { type: [String, Number, Date], default: () => constants.DEFAULT_MIN_DATE },
minuteInterval: { type: [String, Number], default: 1 },
type: { type: String, default: 'datetime' },

// date picker
defaultValue: { type: String, default: undefined },
format: { type: String, default: 'YYYY-MM-DD' },
height: { type: [String, Number], default: undefined },
maxDate: { type: [String, Number, Date], default: undefined },
minDate: { type: [String, Number, Date], default: constants.DEFAULT_MIN_DATE },
separator: { type: String, required: true },
value: { type: [String, Number, Date], default: undefined },
height: { type: [String, Number], default: undefined },
hideButton: { type: Boolean, default: false },
maxDate: { type: [String, Number, Date], default: undefined },
minDate: { type: [String, Number, Date], default: () => constants.DEFAULT_MIN_DATE },
separator: { type: String, default: '-' },

// time picker
defaultValue: { type: String, default: undefined },
format: { type: String, default: 'YYYY-MM-DD HH:mm' },
height: { type: [String, Number], default: undefined },
maxDate: { type: [String, Number, Date], default: undefined },
minDate: { type: [String, Number, Date], default: undefined },
minuteInterval: { type: [String, Number], default: 1 },
separator: { type: String, required: true },
value: { type: [String, Number, Date], default: undefined },
height: { type: [String, Number], default: undefined },
hideButton: { type: Boolean, default: false },
minuteInterval: { type: [String, Number], default: 1 },
separator: { type: String, default: ':' },

API references

DateTimePicker

DatePicker

TimePicker

Wheel Style Date & Time Picker Component, vue drumroll datetime picker Plugin/Github, material datetime picker, wheel picker ui

See Demo And Download

Official Website(plusone-masaki): Click Here

This superior jQuery/javascript plugin is developed by plusone-masaki. For extra advanced usage, please go to the official website.