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



Similar Articles

VueJs content loading placeholders

VueJs content loading placeholders

Vue Content Loading is a component to use placeholder or preset.
Read more...
Compiling assets with Laravel Mix

Compiling assets with Laravel Mix

Laravel Mix provides a fluent API for defining Webpack build steps
Read more...
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...