Vue Time Picker

DEMO

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

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) |