# 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.

TIP

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

e.g. time = new Date(time)

 
 :   
 
<template>
  <div class="uiv">
    <time-picker v-model="time"/>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        time: new Date()
      }
    }
  }
</script>

# 24-hour

 
 : 
 
<template>
  <div class="uiv">
    <time-picker v-model="time" :show-meridian="false"/>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        time: new Date()
      }
    }
  }
</script>

# Range limit

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

 
 :   
 
<template>
  <div class="uiv">
    <time-picker v-model="time" :max="max" :min="min"/>
  </div>
</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>

# Readonly

All input methods are all disabled in readonly mode.

 
 :   
 
<template>
  <div class="uiv">
    <time-picker v-model="time" readonly/>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        time: new Date()
      }
    }
  }
</script>

# With dropdown


<template>
  <form class="form-inline uiv">
    <dropdown class="form-group">
      <div class="input-group">
        <input class="form-control" type="text" :value="`${time.getHours()}:${time.getMinutes()}`" 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" :show-meridian="false"/>
        </li>
      </template>
    </dropdown>
  </form>
</template>
<script>
  export default {
    data () {
      return {
        time: new Date()
      }
    }
  }
</script>

# Without controls

 :   
<template>
  <div class="uiv">
    <time-picker v-model="time" :controls="false"/>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        time: new Date()
      }
    }
  }
</script>

# API Reference

# TimePicker (opens new window)

# Props

Name Type Default Required Description
v-model Date The selected time.
show-meridian Boolean true Use 12H or 24H mode.
hour-step Number 1 Hours to increase or decrease when using a button.
min-step Number 1 Minutes to increase or decrease when using a button.
readonly Boolean false
max Date The maximum time that user can select or input.
min Date The minimum time that user can select or input.
icon-control-up String glyphicon glyphicon-chevron-up The arrow icon shown inside the increase button.
icon-control-down String glyphicon glyphicon-chevron-down The arrow icon shown inside the decrease button.
controls Boolean true Hide the up/down controls if set to false.
input-width Number 50 The width in pixels of the hours and minutes inputs.