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.

Package Sidebar

Install

npm i v-clock-picker

Weekly Downloads

0

Version

0.2.0

License

MIT

Unpacked Size

1.34 MB

Total Files

18

Last publish

Collaborators

  • chenning