Set time with the dropdown time picker for Vue 2

Vue2 Time Picker

Use this drop-down time picker for Vue 2, and set the time in any format.


  • Customized Time Format
  • Customized Picker interval
  • Hide Clear Button
  • Bind Values with v-model
  • Get Time Picker's Current Value



npm install vue2-timepicker --save


import VueTimepicker from 'vue2-timepicker'

export default {
  data () {
    return {
      time: {
        HH: '02',
        mm: '01',
        ss: '02'
  components: {

You can bind your values if you want to assign "02:01:02" as the initial value.

  <div id="app">
    <vue-timepicker v-model="time" format="hh:mm:ss a"></vue-timepicker>

You can customize the time format, the code above is 12-hour format, with seconds picker and am/pm picker.

If you are looking for the Vue 1.x version, check the vue-timepicker.

Find the repository on GitHub.