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