Please use vue2-timepicker for your awesome Vue 2.x project.
It's been almost three years since Vue release its 2.0 version on Sep 30, 2016 (official announcement). Let's embrace the new world!
There's a basic guideline in vue2-timepicker to help you migrating from this Vue 1.x component. Please give it a try.
⭐️ The latest version of vue2-timepicker:
A dropdown time picker (hour|minute|second) for Vue.js (1.x), with flexible time format support
🎉 The brand new version for Vue 2.x is up!
Please check vue2-timepicker for your Vue 2.x project
You can see the vue-timepicker in action in the Demo Page
Vue.js 1.x (>=v1.0.21 <2.0.0)
Through NPM (recommended)
npm install vue-time-picker --saveBower
bower install vue-timepicker --saveStep 1: Import VueTimepicker
A. Include with modules
// import
import VueTimepicker from 'vue-time-picker'
// Or, require
var VueTimepicker = require('vue-time-picker')B. Include with <script> and <style>
Just put the vue-timepicker.min.js (or vue-timepicker.js) script block after Vue itself
// Don't forget to call this
Vue.use(window.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><!-- Default to 24-Hour format HH:mm -->
<vue-timepicker></vue-timepicker><!-- 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,
formatstring will be default to "HH:mm"
<!-- 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
<vue-timepicker hide-clear-button></vue-timepicker>// 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 :time-value.sync="yourTimeValue" format="HH:mm:ss"></vue-timepicker>Method 1: Read the two-way synced time-value variable
<!-- In the last section, we've set the initial value (yourTimeValue) to "10:05:00" -->
<vue-timepicker :time-value.sync="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"}Method 2: Listen to the vue-timepicker-update event
// 1) Use `events`
var yourComponent = new Vue({
components: {VueTimepicker},
events: {
'vue-timepicker-update': function (eventData) {
// `eventData` includes the current value of vue-timepicker
// Add your handler here
},
...
},
...
})
// Or, 2) Use `$on`
this.$on('vue-timepicker-update', function (eventData) {
// `eventData` includes the current value of vue-timepicker
// Your handler here
})Unlike the sync time-value, which only returns tokens you provided in the initial data (HH, mm and ss in the above case), the vue-timepicker-update event will return all time format.
In the example above, when picker is set to "14:30:15" in HH:mm:ss format, vue-timepicker-update will return the following data:
// `vue-timepicker-update` event data
{
HH: "14",
H: "14",
hh: "14",
a: "am",
A: "AM",
h: "14",
kk: "14",
k: "14",
m: "30",
mm: "30",
s: "15",
ss: "15"
}Whereas the time-value will only return data with your predefined tokens
// Previously defined tokens in `yourTimeValue` are `HH`, `mm` and `ss`
// Hence, `time-value`'s synced data returns:
{
HH: "14",
mm: "30",
ss: "15"
}Method 3: Add @change event handler
<!-- A: No argument -->
<vue-timepicker :time-value.sync="yourTimeValue" @change="changeHandler"></vue-timepicker>
<!-- B: Custom arguments -->
<vue-timepicker :time-value.sync="yourTimeValue" @change="otherChangeHandler($arguments, 'foo', 'bar')"></vue-timepicker>// A: No argument
changeHandler (eventData) {
console.log(eventData)
// -> {data: {HH:..., mm:... }}
}
// B: Custom arguments
otherChangeHandler (eventData, yourArg1, yourArg2) {
console.log(eventData)
// -> [{data: {HH:..., mm:... }}]
console.log(yourArg1)
// -> 'foo'
console.log(yourArg2)
// -> 'bar'
}| Prop | Type | Required | Default Value |
|---|---|---|---|
| format | String | no | "HH:mm" |
| minute-interval | Number | no | undefined |
| second-interval | Number | no | undefined |
| time-value | Object | no | undefined |
| hide-clear-button | Boolean | no | false |
Please feel free to fork and help developing.
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run devFor detailed explanation on how things work, checkout the webpack guide and docs for vue-loader.
Detail changes for each release are documented in CHANGELOG.md