A material time picker component for Vue 3.
There is currently no support for the AM/PM time notation.
Install using your package manager of choice:
yarn add vue-material-time-pickerhttps://matija-components.vercel.app/time-picker
Import the component locally or define it globally and include the css file:
<template>
<div style="display: flex">
<time-picker v-model="time" use-seconds />
{{ time }}
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { TimePicker } from "vue-material-time-picker";
import "vue-material-time-picker/dist/style.css";
const time = ref(null);
</script>| Name | Type | Default | Description |
|---|---|---|---|
v-model |
string/Date |
null | Standard two way input, HH:mm:ss format or Date |
disabled |
boolean |
false | Makes the component uninteractable |
readonly |
boolean |
false | Makes the component uninteractable, but without the style of the disabled variant |
use-seconds |
boolean |
false | Adds an additional step for picking the time |
automatic |
boolean |
true | Automatically switches to the next step when picking the time |
hide-title |
boolean |
false | Hides the time picker title |
width |
number/string |
290px | Sets the width of the element - can be provided as a string like "290px" or "290" or a number, defaults to 290px |
full-width |
boolean |
false | Ignores the previous width prop and sets the width to 100% of the parent container |
color |
string |
#3ba13b | Color of the time picker title and clock hand as well as any active element |
| Name | Type | Description |
|---|---|---|
select:hour |
(value: number) => void |
Triggered when the hour value is selected |
select:minute |
(value: number) => void |
Triggered when the minute value is selected |
select:second |
(value: number) => void |
Triggered when the second value is selected |
click:hour |
() => void |
Triggered when the hour notation is clicked on the header |
click:minute |
() => void |
Triggered when the minute notation is clicked on the header |
click:second |
() => void |
Triggered when the second notation is clicked on the header |
change |
(time: string) => void |
Triggered when the full value is selected |
Use this slot if you want to override the time picker header, an example being:
<time-picker v-model="time" use-seconds>
<template
#header="{
hours,
minutes,
seconds,
selectHours,
selectMinutes,
selectSeconds
}"
>
<button @click="selectHours">
{{ hours || "--" }}
</button>
<button @click="selectMinutes">
{{ minutes || "--" }}
</button>
<button @click="selectSeconds">
{{ seconds || "--" }}
</button>
</template>
</time-picker>There are a few props being exposed:
| Name | Type | Default | Description |
|---|---|---|---|
hours |
number/null |
null | Hour portion of the time |
minutes |
number/null |
null | Minute portion of the time |
seconds |
number/null |
null | Seconds portion of the time |
selectHours |
function |
N/A | Helper function used for triggering the selection of the hours |
selectMinutes |
function |
N/A | Helper function used for triggering the selection of the minutes |
selectSeconds |
function |
N/A | Helper function used for triggering the selection of the seconds |