Vue 3 Time Picker Plugin

Simple, clean and easy to use time picker for Vue 3.

• Lightweight
• No dependencies
• More features coming soon

Preview

Get Started

Install:

npm i vue3-time-picker-plugin

Then, import and register the component and css:

import { createApp } from "vue";
import App from "./App.vue";

import timepicker from 'vue3-time-picker-plugin';
import 'vue3-time-picker-plugin/dist/style.css';

createApp(App)
    .use(timepicker)
    .mount("#app");

You can now use the component like so:

<Vue3TimePicker v-model="time" />

Documentation

Clearing input

Press backspace or delete to clear the input

Available Props

| Prop Name | Type | Default | Description | |-------------------|----------------|:-------:|--------------------------------------| | classes | Object / Array | | Add class to the input field | | popupClasses | Object / Array | | Add class to the option popup | | hourIncrements | Number | 1 | Increment the hour options |
| minuteIncrements | Number | 1 | Increment the minute options | | disableMinutes | Boolean | false | Remove minutes value (eg. 8AM) | | removeHourPadding | Boolean | false | Remove the leading 0 from hour value |

Donations

If it has saved you development time, you can buy me a cup of coffee. :)

Inspired by

https://www.youtube.com/watch?v=97lSkxy7Wjk