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