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:
<!-- 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.