Vue material time picker

A material time picker component for Vue 3.

? 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

GitHub

View Github