vue-clock-picker

A lite time picker based on Vue2.0

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-clock-picker
0.4.27 years ago8 years agoMinified + gzip package size for vue-clock-picker in KB

Readme

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

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