Press "Enter" to skip to content

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

nametypedefaultdescription
dialogBooleanfalseOpen picker in dialog
dragSensitivity[String, Number]1.7Drag sensitivity
formatString“YYYY-MM-DD HH:mm”Date format
hideOverlayBooleanfalseHide the dialog display overlay. Valid only if dialog is true
height[String, Number]“10em”Specifies the height of the picker
hideButtonBooleanfalseHide the dialog close button. Valid only if dialog is true
maxDate[String, Number, Date]value + 100 yearsMaximum valid date and time
minDate[String, Number, Date]1900-01-01 00:00Valid minimum date and time
minuteInterval[String, Number]1Selectable minute intervals
scrollSensitivity[String, Number]0.8Scroll sensitivity
touchSensitivity[String, Number]1.7Touch operation sensitivity
type[“datetime”, “date”, “time”]“datetime”Picker type. Select from 3 types: datetime / date / time
value[String, Number, Date]undefinedValue of datetime

DatePicker

nametypedefaultdescription
dialogBooleanfalseOpen picker in dialog
dragSensitivity[String, Number]1.7Drag sensitivity
formatString“YYYY-MM-DD HH:mm”Date format
height[String, Number]“10em”Specifies the height of the picker
hideOverlayBooleanfalseHide the dialog display overlay. Valid only if dialog is true
hideButtonBooleanfalseHide the dialog close button. Valid only if dialog is true
maxDate[String, Number, Date]value + 100 yearsMaximum valid date and time
minDate[String, Number, Date]1900-01-01 00:00Valid minimum date and time
separatorString“-“Change date separator character
scrollSensitivity[String, Number]0.8Scroll sensitivity
touchSensitivity[String, Number]1.7Touch operation sensitivity
value[String, Number, Date]undefinedValue of date

TimePicker

nametypedefaultdescription
dialogBooleanfalseOpen picker in dialog
dragSensitivity[String, Number]1.7Drag sensitivity
formatString“HH:mm”Time format
height[String, Number]“10em”Specifies the height of the picker
hideOverlayBooleanfalseHide the dialog display overlay. Valid only if dialog is true
hideButtonBooleanfalseHide the dialog close button. Valid only if dialog is true
minuteInterval[String, Number]1Selectable minute intervals
separatorString“:”Change time separator character
scrollSensitivity[String, Number]0.8Scroll sensitivity
touchSensitivity[String, Number]1.7Touch operation sensitivity
value[String, Number, Date]undefinedValue of time

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.