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-pickeror$ yarn add v-clock-picker
dependencies:
USAGE
<!-- in some vue component -->
<script> components: VClockPicker { return defaultHour: defaultMinute: defaultSelected: } methods: { // ... } </script>
For more detail, you can see the source code.
APIS
Props
defaultHour
defaultMinute
String or Number
defaultHour=defaultMinute=
defaultSelected
Array
defaultSelected="July 21, 1983 01:15:00""July 21, 1983 05:20:00""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.
{ // ...}
onMinuteChange
Function
The callback func when component minute
state is changed.
{ // ...}
onTimeChange
Function
The callback func when component hour
or minute
is changed.
{ let hour minute = time // ...}
THANK
Thanks to the domonji's open source project: vue-clock-picker, I have learn a lot from that. Thanks.