v-clock

It's modified based on vue-clock-picker, a more lightweight clock picker vue-component, writing in es6 standrad style.

SHOW

It just shows the clock. And only items(hour) selected before can be shown blue and clicked. Items(minute) selected before can be shown in ring diagram with tooltips.

HAVE A TRY

$ git clone https://github.com/liecn/v-clock.git
$ npm install
$ npm run dev

INSTALL

$ npm install @chenning/v-clock
or
$ yarn add @chenning/v-clock

USAGE

html

<!-- in some vue component -->
<template>
    <div>
        <v-clock
            :defaultHour="defaultHour"
            :defaultMinute="defaultMinute"
	        :defaultSelected="defaultSelected"
            :onTimeChange="timeChangeHandler"
        >
        </v-clock>
    </div>
</template>

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

javascript

<script>
import VClock from 'v-clock'
export default {
    components: {
        VClock
    },
    data(){
        return {
            defaultHour:new Date().getHours(),
            defaultMinute:new Date().getMinutes()
	    	defaultSelected:[[new Date("July 21, 1983 01:15:00").getHours(), new Date("July 21, 1983 01:15:00").getMinutes(),new Date("July 21, 1983 01:35:20").getMinutes()],
                [new Date("July 21, 1983 03:05:00").getHours(), new Date("July 21, 1983 03:05:00").getMinutes(),new Date("July 21, 1983 03:55:20").getMinutes()],
                [new Date("July 21, 1983 01:15:00").getHours(), new Date("July 21, 1983 01:45:00").getMinutes(),new Date("July 21, 1983 01:55:20").getMinutes()]]
        }
    },
    methods:{
        timeChangeHandler(event){
            // event={hour:- ,minute:- ,selected:true/false}
            ...
        }
    }
}
</script>

For more detail, you can see the source code.

APIS

Props

• defaultHour
• defaultMinute

String or Number

defaultHour=new Date().getHours()
defaultMinute=new Date().getMinutes()

• defaultSelected

Array

defaultSelected=[
				[new Date("July 21, 1983 01:15:00").getHours(), new Date("July 21, 1983 01:15:00").getMinutes(),new Date("July 21, 1983 01:35:20").getMinutes()],
          		[new Date("July 21, 1983 03:05:00").getHours(), new Date("July 21, 1983 03:05:00").getMinutes(),new Date("July 21, 1983 03:55:20").getMinutes()],
                [new Date("July 21, 1983 01:15:00").getHours(), new Date("July 21, 1983 01:45:00").getMinutes(),new Date("July 21, 1983 01:55:20").getMinutes()]
]

• onTimeChange

Function

The callback func when component hour or minute is changed.

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

THANK

Thanks to the domonji's open source project: vue-clock-picker, I have learn a lot from that. Thanks.