Skip to content
On this page

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)

vue
<template>
  <TimePicker v-model="time" />
</template>

<script setup>
import { TimePicker } from 'uiv';
import { ref } from 'vue';

const time = ref(new Date());
</script>

24-hour

vue
<template>
  <TimePicker v-model="time" :show-meridian="false" />
</template>

<script setup>
import { TimePicker } from 'uiv';
import { ref } from 'vue';

const time = ref(new Date());
</script>

Range limit

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

vue
<template>
  <TimePicker v-model="time" :max="max" :min="min" />
</template>

<script setup>
import { TimePicker } from 'uiv';
import { ref } from 'vue';

const time = ref(new Date());
const min = ref(new Date('2017/01/01 8:00')); // date doesn't matter
const max = ref(new Date('2017/01/01 20:00'));
</script>

Readonly

All input methods are all disabled in readonly mode.

vue
<template>
  <TimePicker v-model="time" readonly />
</template>

<script setup>
import { TimePicker } from 'uiv';
import { ref } from 'vue';

const time = ref(new Date());
</script>

With dropdown

vue
<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 #dropdown>
        <li style="padding: 10px">
          <TimePicker v-model="time" :show-meridian="false" />
        </li>
      </template>
    </Dropdown>
  </form>
</template>

<script setup>
import { TimePicker, Dropdown, Btn } from 'uiv';
import { ref } from 'vue';

const time = ref(new Date());
</script>

Without controls

vue
<template>
  <TimePicker v-model="time" :controls="false" />
</template>

<script setup>
import { TimePicker } from 'uiv';
import { ref } from 'vue';

const time = ref(new Date());
</script>

API Reference

TimePicker

Props

NameTypeDefaultRequiredDescription
v-modelDateThe selected time.
show-meridianBooleantrueUse 12H or 24H mode.
hour-stepNumber1Hours to increase or decrease when using a button.
min-stepNumber1Minutes to increase or decrease when using a button.
readonlyBooleanfalse
maxDateThe maximum time that user can select or input.
minDateThe minimum time that user can select or input.
icon-control-upStringglyphicon glyphicon-chevron-upThe arrow icon shown inside the increase button.
icon-control-downStringglyphicon glyphicon-chevron-downThe arrow icon shown inside the decrease button.
controlsBooleantrueHide the up/down controls if set to false.
input-widthNumber50The width in pixels of the hours and minutes inputs.

Released under the MIT License.