Nocturnal Pumpkin Maelstrom

    vue-clock-picker

    0.4.2 • Public • Published

    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.

    Keywords

    none

    Install

    npm i vue-clock-picker

    DownloadsWeekly Downloads

    112

    Version

    0.4.2

    License

    MIT

    Last publish

    Collaborators

    • domonji