Drumroll is an iOS-inspired wheel date & time picker component for Vue.js.
How to use it:
1. Import components into your app.
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 datetime 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 & time picker in a dialog popup.
<date-time-picker v-model="now" dialog />
7. Available component props.
// 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: ':' },
Preview:
Changelog:
v1.0.5 (01/30/2022)
- Bugs fixed.
v1.0.4 (01/27/2022)
- Bugs fixed.
v1.0.2 (01/26/2022)
- Update styles.
v1.0.1 (01/26/2022)
- Update
v1.0.0 (01/23/2022)
- “format”: The drums order and divider string are automatically inferred.
- “date-order”: Order of the date pickers.
- “pattern”: Change the display of year, month, day, hour, minute, date divider, and time divider.
- Fixed a bug that the background scrolls when the modal dialog is open.
v0.3.3 (01/19/2022)
- Modified access scope to “public”
Download Details:
Author: plusone-masaki
Live Demo: https://www.plus-one.tech/vue-drumroll-datetime-picker/
Download Link: https://github.com/plusone-masaki/vue-drumroll-datetime-picker/archive/refs/heads/master.zip
Official Website: https://github.com/plusone-masaki/vue-drumroll-datetime-picker
Install & Download:
# Yarn
$ yarn add @plusone-masaki/vue-drumroll-datetime-picker
# NPM
$ npm i @plusone-masaki/vue-drumroll-datetime-picker