Skip to content
A vue-based time picker Component
Branch: master
Clone or download
DomonJi Merge pull request #5 from Ranfty/master
Remove console message
Latest commit eacb979 Oct 31, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build change tab legnth to 2 Sep 25, 2016
config change tab legnth to 2 Sep 25, 2016
intro_src 24hour mode completed Sep 24, 2016
src Merge pull request #5 from Ranfty/master Oct 31, 2018
static setup hello world Sep 19, 2016
test/unit mocha unit test Sep 26, 2016
.babelrc setup hello world Sep 19, 2016
.editorconfig updated readme Sep 25, 2016
.eslintignore setup hello world Sep 19, 2016
.gitignore setup hello world Sep 19, 2016
LICENSE Initial commit Sep 19, 2016
README.md
index.html change tab legnth to 2 Sep 25, 2016
package.json fix(#1):the bahavior when clicking on the preview panel Mar 6, 2017
yarn.lock fix(#1):the bahavior when clicking on the preview panel Mar 6, 2017

README.md

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.

You can’t perform that action at this time.