v-clock-picker
v0.2.0
Published
[![npm version](https://badge.fury.io/js/v-clock-picker.svg)](https://badge.fury.io/js/v-clock-picker) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) [![GitHub license](https://img.shields
Downloads
13
Maintainers
Readme
V-Clock-Picker
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 or minute) selected before can be shown blue and clicked. Another pattern can be found in @chenning/v-clock with ring diagram.
HAVE A TRY
$ git clone https://github.com/liecn/v-clock-picker.git
$ npm install
$ npm run dev
INSTALL
$ npm install v-clock-picker
or
$ yarn add v-clock-picker
dependencies:
USAGE
<!-- in some vue component -->
<template>
<div>
<v-clock-picker
mode="24"
:defaultHour="defaultHour"
:defaultMinute="defaultMinute"
:defaultSelected="defaultSelected"
:onTimeChange="timeChangeHandler"
>
</v-clock-picker>
</div>
</template>
<style>
/*your style*/
</style>
<script>
import VClockPicker from 'v-clock-picker'
export default {
components: {
VClockPicker
},
data(){
return {
defaultHour:new Date().getHours(),
defaultMinute:new Date().getMinutes()
defaultSelected:[new Date()]
}
},
methods:{
timeChangeHandler(){
// ...
}
}
}
</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"),new Date("July 21, 1983 05:20:00"),new Date("July 21, 1983 03:25:00")]
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
// ...
}
THANK
Thanks to the domonji's open source project: vue-clock-picker, I have learn a lot from that. Thanks.