Wheel Style Date & Time Picker Component – Drumroll

Install & Download:

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

Description:

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”