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

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

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

$ git clone https://github.com/DomonJi/vue-clock-picker.git $ npm install $ npm run dev

$ npm install vue-clock-picker

dependencies:

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

<!-- in some vue component --> <template> <div> <vue-clock-picker mode="24" :defaultHour="defaultHour" :defaultMinute="defaultMinute" :onTimeChange="timeChangeHandler" > </vue-clock-picker> </div> </template> <style> /*your style*/ </style>

<script> import VueClockPicker from 'vue-clock-picker' export default { components: { VueClockPicker }, data(){ return { defaultHour:new Date().getHours(), defaultMinute:new Date().getMinutes() } }, methods:{ timeChangeHandler(){ // ... } } } </script>

For more detail, you can see the source code.

• defaultHour
• defaultMinute

String or Number

defaultHour="12"

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

• Test

  • TimePicker Component
  • PickerPointGenerator Component
  • TimePickerModal Component
  • PickerPoint Component
  • OutsideClickHandler Component

• Themes

  • Material Theme
  • Classical Theme

• Mode

  • 12h mode
  • 24h mode

• Animations

  • Panel Animations
  • PickerModal Animations

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