vue-timepicker-wheel

A timepicker Vue component. Compatible with Vue 2.x

• Demo
• Install
• Usage
• Props
• Events

Demo

Demo Demo vuetify

Install

npm i vue-timepicker-wheel

Usage

<template>
  <div>
    <vue-timepicker-wheel :time="time" @change="value => time = value" />
  </div>
</template>

<script>
import VueTimepickerWheel from 'vue-timepicker-wheel'

export default {
  components: {
    VueTimepickerWheel
  },
  data: () => ({
    time: '23:59' // 23 hour, 59 minute
  })
}
</script>

Available props

| Prop | Type | Default | Description | |-------------------------------|-----------------|-------------|------------------------------------------| | time | String | --:-- | Time value of the timepicker | | width | String | 300px | Box Width | | color | String | #1867c0 | Box Background Color | | time-color | String | white | Time Color | | time-size | String | 50px | Time Font Size | | time-weight | String | 500 | Time Font Weight | | arrow | Boolean | true | arrow up/down button | | shadow | Boolean | false | Box Shadow |

Events

These events are emitted on actions in the timepicker

| Event | Output | Description | |-------------------|------------|--------------------------------------| | change | time | return time |