🚀 Installation

Install using your package manager of choice:

yarn add vue-material-time-picker

⚙️ Usage

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>

📃 Props

| Name | Type | Default | Description | | ------------- | --------------- | ------- | ---------------------------------------------------------------------------------------------------------------- | | v-model | string | | Standard two way input, HH:mm:ss format | | 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 | | customTime | string | 00:00:00 | Sets the initial value for the timer. |