Vue Time Picker

Simple, no nonsense time picker built and optimized for Vue.

View Demo View Github

Installation

Yarn

yarn add -D @tygr/vue-time-picker

import TimePicker from '@tygr/vue-time-picker'

export default {
  components: {
    TimePicker,
  }
}

Browser

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/@tygr/vue-time-picker/dist/vue-time-picker.min.js" charset="utf-8"></script>
<script>
  Vue.use(TimePicker)
</script>
  • Charset attribute required

Usage

<time-picker v-model="time"></time-picker>

export default {
  data: () => ({
    time: ''
  })
}

Time format is h:mm A

Props

prop type default description
am-color string 'green' Color of the slider when 'AM' is chosen
pm-color string 'blue' Color of the slider when 'PM' is chosen
value string '12:00 AM' The value of the time picker. (used by v-model)
mobile-query string 'only screen and (max-width : 839px)' Media query used to check if mobile user

Events

event payload description
input string Time selected (used by v-model)

GitHub