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.
include Libs
<a href="http://vue.min.js">http://vue.min.js</a> <a href="http://vue-router.min.js">http://vue-router.min.js</a> <a href="http://js/index.js">http://js/index.js</a>
index.html
E-junkie: Sell digital downloads online
E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!
Also see:
<title>vuejs time picker Example - vuejs-time-picker Demo - Vue Timepicker</title> <!-- https://infinityknow.com --> <div id="time-picker"> <h2>vuejs time picker Example - vuejs-time-picker Demo - Vue Timepicker</h2> <div class="popup"> <table class="table-condensed"> <tbody> <tr class="up"> <td><span class="glyphicon glyphicon-chevron-up"></span></td> <td></td> <td><span class="glyphicon glyphicon-chevron-up"></span></td> <td></td> <td> <span class="glyphicon glyphicon-chevron-up"></span></td> </tr> <tr class="time"> <td>{{ hour | padding}}</td> <td>:</td> <td>{{ minute | padding }}</td> <td>:</td> <td>{{ second | padding }}</td> </tr> <tr class="down"> <td> <span class="glyphicon glyphicon-chevron-down"></span></td> <td></td> <td> <span class="glyphicon glyphicon-chevron-down"></span></td> <td></td> <td> <span class="glyphicon glyphicon-chevron-down"></span></td> </tr> </tbody> </table> <h4>vuejs time picker Example - vuejs-time-picker Demo - Vue Timepicker</h4> </div> </div>
index.js
<!-- https://infinityknow.com --> '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); } } });
style.css
<!-- https://infinityknow.com --> #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; } <!-- https://infinityknow.com -->