A fancy VueJs time picker

A fancy VueJs time picker

Apr 16, 2019 / Ramesh Mhetre

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>
    </div>
</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
  // ...
}


Vue.js Vue.js News Vue.js Packages

Similar Articles

Javascript Markdown parser: Markdown-it

Javascript Markdown parser: Markdown-it

Markdown-it is a javascript library/package which converts markdown text to HTML. Its very fast, efficient & easy to use within your project.
Read more...
VuePress: Powerfull, static website generator with VueJs

VuePress: Powerfull, static website generator with VueJs

VuePress is a minimalistic Vue-powered static site generator from Evan You, the creator of Vue.js.
Read more...
Vue.js components for detecting and decoding QR codes

Vue.js components for detecting and decoding QR codes

Decode QR-code in your VueJs application.
Read more...