TimePicker 🔗

A lightweight & configurable time picker.

Example 🔗

To change the time input, you can:

• Click on the add / minus button.
• Use up / down key of keyboard.
• Use mouse wheel.
• Input directly.

Note: Make sure to update the v-model reference when trying to change it from outside the component.

e.g. time = new Date(time)

<template>
  <time-picker v-model="time"/>
</template>
<script>
  export default {
    data () {
      return {
        time: new Date()
      }
    }
  }
</script>
<!-- time-picker-example.vue -->

24-hour 🔗

<template>
  <time-picker v-model="time" :show-meridian="false"/>
</template>
<script>
  export default {
    data () {
      return {
        time: new Date()
      }
    }
  }
</script>
<!-- time-picker-24-example.vue -->

Range limit 🔗

Example that limit time range from 8:00 AM to 8:00 PM:

<template>
  <time-picker v-model="time" :max="max" :min="min"/>
</template>
<script>
  export default {
    data () {
      return {
        time: new Date(),
        min: new Date('2017/01/01 8:00'), // date doesn't matter
        max: new Date('2017/01/01 20:00')
      }
    }
  }
</script>
<!-- time-picker-limit-example.vue -->

Readonly 🔗

All input methods are all disabled in readonly mode.

<template>
  <time-picker v-model="time" readonly/>
</template>
<script>
  export default {
    data () {
      return {
        time: new Date()
      }
    }
  }
</script>
<!-- time-picker-readonly-example.vue -->

With dropdown 🔗

<template>
  <form class="form-inline">
    <dropdown class="form-group">
      <div class="input-group">
        <input class="form-control" type="text" :value="this.time.toTimeString()" readonly="readonly">
        <div class="input-group-btn">
          <btn class="dropdown-toggle"><i class="glyphicon glyphicon-time"></i></btn>
        </div>
      </div>
      <template slot="dropdown">
        <li style="padding: 10px">
          <time-picker v-model="time"/>
        </li>
      </template>
    </dropdown>
  </form>
</template>
<script>
  export default {
    data () {
      return {
        time: new Date()
      }
    }
  }
</script>
<!-- time-picker-with-dropdown.vue -->

Custom icons 🔗

<template>
  <time-picker v-model="time" icon-control-up="glyphicon glyphicon-plus" icon-control-down="glyphicon glyphicon-minus"/>
</template>
<script>
  export default {
    data () {
      return {
        time: new Date()
      }
    }
  }
</script>
<!-- time-picker-icons-example.vue -->

Without controls 🔗

<template>
  <time-picker v-model="time" :controls="false"/>
</template>
<script>
  export default {
    data () {
      return {
        time: new Date()
      }
    }
  }
</script>
<!-- time-picker-no-controls-example.vue -->

With custom input width 🔗

<template>
  <time-picker v-model="time" :input-width="inputWidth"/>
</template>
<script>
  export default {
    data () {
      return {
        time: new Date(''),
        inputWidth: 180
      }
    }
  }
</script>
<!-- time-picker-input-width-example.vue -->

Empty fields 🔗

<template>
  <time-picker v-model="time"/>
</template>
<script>
  export default {
    data () {
      return {
        time: new Date('')
      }
    }
  }
</script>
<!-- time-picker-empty-fields-example.vue -->

API Reference 🔗

TimePicker 🔗

Props 🔗