vuejs time picker Example – vuejs-time-picker Demo – Vue Timepicker

vuejs time picker Example – vuejs-time-picker Demo – Vue Timepicker

This is a Simple timepicker component for Vuejs.and This was some experiment with Vuejs.and easyly user friendly time-picker using vuejs-time-picker.

A Simple dropdown time picker using vue2-timepicker(hour|minute|second) for Vue.js version of (1.x), with flexible some time format support.

Example

include Libs

[php]

http://vue.min.js
http://vue-router.min.js
http://js/index.js
[/php]

index.html

[php]

[/php]

index.js

[php]

‘use strict’;
//init app for vuejs
var app = new Vue({
el: “#time-picker”,
data: function data() {
var d = new Date();
//return parameters
return {
hour: d.getHours(),
minute: d.getMinutes(),
second: d.getSeconds(),
open: false,
forceOpen: false
};
},
// all the properties compute
computed: {
formatTime: {
get: function get() {
return this.padding(this.hour) + ‘:’ + this.padding(this.minute) + ‘:’ + this.padding(this.second);
}
}
},
methods: {
//call a setTime function
setTime: function setTime(s) {
var r = new RegExp(‘(\\d{2}):(\\d{2}):(\\d{2})’);
var m = r.exec(s);
var hour = parseInt(m[1]);
var minute = parseInt(m[2]);
var second = parseInt(m[3]);
//all the time related condition
if (hour 23) {
return;
}
if (minute 59) {
return;
}
if (second = 59) {
return;
}
this.hour = hour;
this.minute = minute;
this.second = second;
},
//call a incTime function
incTime: function incTime(s) {
var timecycle = Math.abs(s);
var step = s > 0 ? 1 : -1;
if (timecycle === 1) {
this.second = ((this.second + +step) % 60 + 60) % 60;
} else if (timecycle === 60) {
this.minute = ((this.minute + step) % 60 + 60) % 60;
} else if (timecycle === 3600) {
this.hour = ((this.hour + step) % 24 + 24) % 24;
}
},
//call a padding function
padding: function padding(s) {
if (s < 10) {
return '0' + s;
} else {
return s;
}
},
//call a onFocus function
onFocus: function onFocus() {
this.open = true;
this.forceOpen = false;
},
//call a onBlur function
onBlur: function onBlur() {
this.open = this.forceOpen;
},
//call a onMouseDown function
onMouseDown: function onMouseDown() {
this.forceOpen = true;
},
onMouseUp: function onMouseUp() {
this.forceOpen = false;
}
},
filters: {
padding: function padding(s) {
return this.padding(s);
}
}
});
[/php]

style.css

[php]

#time-picker {
position: relative;
}
//popup based css
.popup {
display: inline-block;
background-color: lightgray;
position: absolute;
top: calc(106%);
left: 1em;
border-radius: 3px;
padding: 0.5em;
}
//text based css
td {
height: 1em;
width: 1em;
text-align: center;
}
tr td span {
line-height: 1em;
height: 1em;
display: inline-block;
}
//time based css
tr.time td:hover:nth-of-type(2n+1) {
background-color: #eee;
}
//hover based css
tr.up td:hover,
tr.down td:hover {
color: steelblue;
cursor: pointer;
}

[/php]

Example