@chenning/v-clock

    0.1.4 • Public • Published

    v-clock

    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

    It just shows the clock. And only items(hour) selected before can be shown blue and clicked. Items(minute) selected before can be shown in ring diagram with tooltips.

    HAVE A TRY

    $ git clone https://github.com/liecn/v-clock.git
    $ npm install
    $ npm run dev

    INSTALL

    $ npm install @chenning/v-clock
    or
    $ yarn add @chenning/v-clock

    USAGE

    html

    <!-- in some vue component -->
    <template>
        <div>
            <v-clock
                :defaultHour="defaultHour"
                :defaultMinute="defaultMinute"
                :defaultSelected="defaultSelected"
                :onTimeChange="timeChangeHandler"
            >
            </v-clock>
        </div>
    </template>
    
    <style>
    /*your style*/
    </style>
    

    javascript

    <script>
    import VClock from 'v-clock'
    export default {
        components: {
            VClock
        },
        data(){
            return {
                defaultHour:new Date().getHours(),
                defaultMinute:new Date().getMinutes()
            	defaultSelected:[[new Date("July 21, 1983 01:15:00").getHours(), new Date("July 21, 1983 01:15:00").getMinutes(),new Date("July 21, 1983 01:35:20").getMinutes()],
                    [new Date("July 21, 1983 03:05:00").getHours(), new Date("July 21, 1983 03:05:00").getMinutes(),new Date("July 21, 1983 03:55:20").getMinutes()],
                    [new Date("July 21, 1983 01:15:00").getHours(), new Date("July 21, 1983 01:45:00").getMinutes(),new Date("July 21, 1983 01:55:20").getMinutes()]]
            }
        },
        methods:{
            timeChangeHandler(event){
                // event={hour:- ,minute:- ,selected:true/false}
                ...
            }
        }
    }
    </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").getHours(), new Date("July 21, 1983 01:15:00").getMinutes(),new Date("July 21, 1983 01:35:20").getMinutes()],
               [new Date("July 21, 1983 03:05:00").getHours(), new Date("July 21, 1983 03:05:00").getMinutes(),new Date("July 21, 1983 03:55:20").getMinutes()],
                    [new Date("July 21, 1983 01:15:00").getHours(), new Date("July 21, 1983 01:45:00").getMinutes(),new Date("July 21, 1983 01:55:20").getMinutes()]
    ]
    • 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 @chenning/v-clock

    DownloadsWeekly Downloads

    2

    Version

    0.1.4

    License

    MIT

    Unpacked Size

    427 kB

    Total Files

    19

    Last publish

    Collaborators

    • chenning