vue-clock-picker

Vue-Clock-Picker

A lite time picker based on Vue.js

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

SHOW

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

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:

• vue@^2.0.0

Because this is a vue-based component, you should already have vue dependencies in your project. If not:

$ npm install react vue@next --save-dev

USAGE

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

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

<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 usage, 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) {
  // ...
}

TODOS

• Test

  • Vue Component Test

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

• Themes

  • Material Theme
  • Classical Theme

• Mode

  • 12h mode
  • 24h mode
  • Inner Points

• Animations

  • Panel Animations
  • PickerModal Animations

THANK

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

LICENSE

MIT License

Copyright (c) 2016 Domon

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.