landofcash/vue2-timepicker

A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support

Vue2 Time Picker

A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support.

Demo

You can see the Vue2 Timepicker in action in the Demo Page

Dependencies

Vue.js v2.0+

Installation

Through NPM (Recommended)

npm install git+https://github.com/landofcash/vue2-timepicker.git --save-dev

Bower

bower install https://github.com/landofcash/vue2-timepicker.git#master --save-dev

Get Started

Step 1: Import VueTimepicker

A: Include the single file component (Recommended)

// import
import VueTimepicker from 'vue2-timepicker'

// Or, require
var VueTimepicker = require('vue2-timepicker')

or, B: Include distribution files with <script> and <style>

<script src="yourpath/vue/dist/vue.min.js"></script>
<script src="yourpath/vue2-timepicker/dist/vue2-timepicker.min.js"></script>

<link href="yourpath/vue2-timepicker/dist/vue2-timepicker.min.css" rel="stylesheet"></link>

NOTE: When using the dist files, a Vue.use() call is needed

// Work with <script> block
Vue.use(window.VueTimepicker)

// Else
Vue.use(VueTimepicker)

Step 2: Include VueTimepicker in your component

var yourComponent = new Vue({
  components: { VueTimepicker },
  ...
})

Step 3: Then, you can introduce the vue-timepicker tag anywhere you like in your component's template

<vue-timepicker></vue-timepicker>

Usage

Basic Usage

<!-- Default to 24-Hour format HH:mm -->
<vue-timepicker></vue-timepicker>

Customized Time Format

<!-- Show seconds picker -->
<vue-timepicker format="HH:mm:ss"></vue-timepicker>

<!-- 12-hour format, with AM/PM picker -->
<vue-timepicker format="hh:mm A"></vue-timepicker>

<!-- 12-hour format, with seconds picker and am/pm picker -->
<vue-timepicker format="hh:mm:ss a"></vue-timepicker>

VueTimepicker will recognizes the following tokens in the format string

Section	Token	Output
AM/PM	A	AM PM
	a	am pm
Hour	H	0 1 ... 22 23
	HH	00 01 ... 22 23
	h	1 2 ... 11 12
	hh	01 02 ... 11 12
	k	1 2 ... 23 24
	kk	01 02 ... 23 24
Minute	m	0 1 ... 58 59
	mm	00 01 ... 58 59
Second	s	0 1 ... 58 59
	ss	00 01 ... 58 59

If not set, format string will be default to "HH:mm"

Customized Picker interval

<!-- Show minute picker's value in the form of 0, 5, 10, ... 55, 60 -->
<vue-timepicker :minute-interval="5"></vue-timepicker>

<!-- Show second picker's value in the form of 0, 10, 20, ... 50, 60 -->
<vue-timepicker :second-interval="10"></vue-timepicker>

<!-- Bind interval config with your own data variable -->
<vue-timepicker :minute-interval="yourMinuteInterval"></vue-timepicker>

Note: Please do remember to add the : or v-bind: sign before the interval properties

Hide Clear Button

<vue-timepicker hide-clear-button></vue-timepicker>

Bind Value with v-model

// e.g. If you want to assign "10:05:00" as the initial value of vue-timepicker
var yourComponent = new Vue({
  components: { VueTimepicker },
  data: function () {
    return {
      yourTimeValue: {
        HH: "10",
        mm: "05",
        ss: "00"
      },
      ...
    }
  },
  ...
})

<!-- HTML -->
<vue-timepicker v-model="yourTimeValue" format="HH:mm:ss"></vue-timepicker>

Get Time Picker's Current Value

Method 1: Read value from v-model

<!-- In the last section, we've set the initial value (yourTimeValue) to "10:05:00" -->
<vue-timepicker v-model="yourTimeValue" format="HH:mm:ss"></vue-timepicker>

// Then, open the dropdown picker and pick a new time.
// Like setting to "14:30:15" for example
// Check the value after that
console.log(this.yourTimeValue)
// outputs -> {HH: "14", mm: "30", ss: "15"}

Props API

Prop	Type	Required	Default Value
v-model	Object	no	undefined
format	String	no	"HH:mm"
minute-interval	Number	no	undefined
second-interval	Number	no	undefined
hide-clear-button	Boolean	no	false
disabled	Boolean	no	undefined
disabledValues	Object	no	{ hours: [], minute: [], second: [], apm: [] }

Contribution

Please feel free to fork and help developing.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

For detailed explanation on how things work, checkout the webpack guide and docs for vue-loader.

Change Log

Detail changes for each release are documented in CHANGELOG.md

License

MIT