Vue-Clock-Picker

  


> A lite time picker vue-component, writing in es6 standrad style.

SHOW

> 24 Hours Mode, with Material Design. Try the Live Demo

!24HoursMode !vue-clock-picker

Until now, this component has only one theme -- The Material Theme. I'll working on more themes later.

HAVE A TRY

``bash
$ git clone https://github.com/DomonJi/vue-clock-picker.git

$ npm install

$ npm run dev
`

INSTALL

`bash
$ npm install vue-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="12"
`

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

TODOS

- Test

- [x] TimePicker Component
- [x] PickerPointGenerator Component
- [x] TimePickerModal Component
- [x] PickerPoint Component
- [ ] OutsideClickHandler Component

- Themes

- [x] Material Theme
- [ ] Classical Theme

- Mode

- [ ] 12h mode
- [x] 24h mode

- Animations

- [x] Panel Animations
- [ ] PickerModal Animations

THANK

Thanks to the Ecmadao's open source project: react-times, I have learn a lot from that. Thanks.