@chenning/v-clock

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

Usage no npm install needed!

<script type="module">
  import chenningVClock from 'https://cdn.skypack.dev/@chenning/v-clock';
</script>

README

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.