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

<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

  
  <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 -->

Example