uiv

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

← Alert →