Neutrinos Peludos Magnéticos

    v-clock-picker

    0.2.0 • Public • Published

    V-Clock-Picker

    npm version js-standard-style GitHub license

    NPM

    It's modified based on vue-clock-picker, a more lightweight clock picker vue-component, writing in es6 standrad style.

    SHOW

    24HoursMode v-clock-picker

    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-picker
    or
    $ yarn add v-clock-picker

    dependencies:

    USAGE

     
    <!-- in some vue component -->
    <template>
        <div>
            <v-clock-picker
                mode="24" 
            :defaultHour="defaultHour"
                :defaultMinute="defaultMinute"
            :defaultSelected="defaultSelected"
                :onTimeChange="timeChangeHandler"
            >
            </v-clock-picker>
        </div>
    </template>
     
    <style>
    /*your style*/
    </style> 
    <script>
    import VClockPicker from 'v-clock-picker'
    export default {
        components: {
            VClockPicker
        },
        data(){
            return {
                defaultHour:new Date().getHours(),
                defaultMinute:new Date().getMinutes()
            defaultSelected:[new Date()]
            }
        },
        methods:{
            timeChangeHandler(){
                // ...
            }
        }
    }
    </script>

    For more detail, you can see the source code.

    APIS

    Props

    • defaultHour
    • defaultMinute

    String or Number

    defaultHour=new Date().getHours()
    defaultMinute=new Date().getMinutes()
    • defaultSelected

    Array

    defaultSelected=[new Date("July 21, 1983 01:15:00"),new Date("July 21, 1983 05:20:00"),new Date("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.

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

    THANK

    Thanks to the domonji's open source project: vue-clock-picker, I have learn a lot from that. Thanks.

    Install

    npm i v-clock-picker

    DownloadsWeekly Downloads

    1

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    1.34 MB

    Total Files

    18

    Last publish

    Collaborators

    • chenning