A fancy VueJs time picker


Vuejs time picker with material design theme

In order to build awesome user experience you may get asked to use fancy time picker at some point. There is already a nice vue-package who does it.

Here you can find vuejs time picker. At the moment the theme for this time picker is material theme & you can't officially customize how it looks.

Live demo for Vuejs clock picker.


Here is how you can install it:

npm install vue-clock-picke

Add vuejs time picker in your application

This is how your code should look like in order to add time picker.

<!-- in some vue component -->
            mode="24" :defaultHour="defaultHour"


/*your style*/

import VueClockPicker from 'vue-clock-picker'
export default {
    components: {
        return {
            defaultHour:new Date().getHours(),
            defaultMinute:new Date().getMinutes()
            // ...


  • defaultHour
  • defaultMinute

String or Number

defaultHour = '12'
  • defaultFocused


Whether the picker pannel is focused or not when it did mount. Default false

defaultFocused = 'false'
  • onFocusChange


The callback func when component focused state is changed.

  • onHourChange


The callback func when component hour state is changed.

onHourChange(hour) {
  // ...
  • onMinuteChange


The callback func when component minute state is changed.

onMinuteChange(minute) {
  // ...
  • onTimeChange


The callback func when component hour or minute is changed.

onTimeChange(time) {
  let { hour, minute } = time
  // ...

As a developer, I always see the problem for creating images/banners whenever I post some content online.

Even for simple designs I always needed to open figma or search online, so I thought of automating it.

I've build BannerPot to solve this problem, would you like to give it a try?

Ramesh from BannerPot

Ramesh Mhetre

Maker of BannerPot