README
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.