Simple design and lightweight wheel style datetime picker

vue-drumroll-datetime-picker is a wheel style datetime picker. There is also a date-only and time-only picker.

There is a stationary format and a dialog format that can be installed directly on the screen, and it also supports responsiveness. It is an easy-to-use and highly flexible library with a wide variety of customization such as date order and label editing. Furthermore, the minified version is as light as 19kb.

日本語

Demo page

here

Getting started

Install

yarn add vue-drumroll-datetime-picker

or

npm install vue-drumroll-datetime-picker

Global usage

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

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

Local usage

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

export default {
  components: {
    DateTimePicker,
    DatePicker,
    TimePicker,
  },
  // ...your code
}
</script>

API references

Props

DateTimePicker

DatePicker

TimePicker

Props: "pattern" detail

"pattern" props are used to customize the labels displayed in the picker. This allows you to add additional information to the picker such as day of the week and AM / PM.

Complete example

{
  year: "YYYY",
  month: "MMM", // -> Jan
  date: "DD(ddd)", // -> 08(Tue)
  hour: "A hh", // -> PM 9
  minute: "mm",
  dividerDate: '/', // -> 2022/Jan/08(Tue)
  dividerTime: '@', // -> PM 9@15
}