A clock-style time picker component for Vue.js 2 applications.

Date _Time

Documentation

Vue-Clock-Picker

npm version js-standard-style GitHub license

NPM

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

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

INSTALL

$ npm install vue-clock-picker

dependencies:

USAGE

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

APIS

Props

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

TODOS

  • 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

THANK

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


You May Also Like