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.

Features:

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

Example

Installation

npm install vue2-timepicker --save

Usage

import VueTimepicker from 'vue2-timepicker'

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

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

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

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.