VueJs

A fancy VueJs time picker

2019-04-16

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.

Install

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 -->
<template>
    <div>
        <vue-clock-picker
            mode="24" :defaultHour="defaultHour"
            :defaultMinute="defaultMinute"
            :onTimeChange="timeChangeHandler"
        >
        </vue-clock-picker>

</template>

<style>
/*your style*/
</style>

<script>
import VueClockPicker from 'vue-clock-picker'
export default {
    components: {
        VueClockPicker
    },
    data(){
        return {
            defaultHour:new Date().getHours(),
            defaultMinute:new Date().getMinutes()
        }
    },
    methods:{
        timeChangeHandler(){
            // ...
        }
    }
}
</script>

Props

  • defaultHour
  • defaultMinute

String or Number

defaultHour = '12'
  • defaultFocused

Boolean

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

defaultFocused = 'false'
  • onFocusChange

Function

The callback func when component focused state is changed.

  • onHourChange

Function

The callback func when component hour state is changed.

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

Function

The callback func when component minute state is changed.

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

Function

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