V-Clock-Picker

  


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

SHOW

!24HoursMode !v-clock-picker

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

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

INSTALL

`bash
$ npm install v-clock-picker
or
$ yarn add v-clock-picker
`

dependencies:

- vue@^2.0.0
- pug@^2.0.0
- vue-loader@^9.4.0

USAGE

`html





`

`javascript

`

> For more detail, you can see the source code.

APIS

$3

- defaultHour
- defaultMinute

String or Number

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

- defaultSelected

Array

`javascript
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

`javascript
defaultFocused="false"
`

- onFocusChange

Function

The callback func when component focused state is changed.

- onHourChange

Function

The callback func when component hour state is changed.

`javascript
onHourChange(hour) {
// ...
}
`

- onMinuteChange

Function

The callback func when component minute state is changed.

`javascript
onMinuteChange(minute) {
// ...
}
`

- onTimeChange

Function

The callback func when component hour or minute is changed.

`javascript
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.