TimeInput Directive

Angularjs 1.5.7 unlimited time input directive

by Sezer Ekinci

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<div ng-controller="myCtrl">
  <time-input ng-model="time" show="h"></time-input>
  <div>{{time}} dakika</div>
  <div>{{time | m2h}} saat</div>
  <div>{{"1:12" | h2m}} dakika</div>
</div>

CSS

.time-input {
  position:relative;
  display:block;
  padding-right:24px;
  width:150px;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}
.time-input input {
  padding-right:20px;
  width:100%;
}
.time-input .input-time-button {
  position:absolute;
  background:none;
  border:none;
  right:0;
  top:0;
  width:20px;
  text-align:center;
  cursor:pointer;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

JavaScript

console.clear();

angular.module('app',[])
	.filter("m2h",m2h)
	.filter("h2m",h2m)
	.directive("timeInput",timeInput)
	.controller("myCtrl",myCtrl);

myCtrl.$inject = ["$scope"]
function myCtrl($scope) {
    $scope.time = 72;
}

function m2h(){
	return function(minute){
    var h = Math.trunc(minute / 60),t = minute % 60;
    return ((h < 10) ? "0" + h : h) + ":" + ((t < 10) ? "0" + t : t);
  }
}

function h2m(){
	return function(hours){
    var actual = hours.split(":");
    return (parseInt((actual[0] || 0)) * 60) + parseInt((actual[1] || 0));
  }
}

timeInput.$inject = ["$timeout"]
function timeInput($timeout){
	return {
		restrict: 'E',
		template: '<input type="text" ng-model="display" ng-change="change(\'{{display}}\')" placeholder="{{is === \'h\' ? \'__:__\' : \'\'}}" /><div ng-click="makeCambio()" class="input-time-button">{{is}}</div>',
		scope:{
			ngModel: '=',
			show: '@'
		},
		link: function(scope,elem,attrs){
    	angular.element(elem[0]).addClass("time-input");
    
			scope.is = "m";
			scope.show = (scope.show || "m");
			scope.cambio = cambio;
			scope.makeCambio = makeCambio;
			scope.display = scope.cambio(scope.ngModel,scope.show);
			
      scope.change = function(old) {
      	var startPos = angular.element(elem[0].firstChild)[0].selectionStart-1;
      	var valid = true;
        if (scope.is === "m") {
          if (!/^[0-9]$/.test(scope.display)) valid = false;
        } else if (scope.is === "h") {
          valid = (!/^([0-9]*):?([0-5])?([0-9])?$/g.test(scope.display)) ? false : valid;
          if ((scope.display.match(/\:/g) || []).length > 0) {
            var parts = scope.display.split(":");
            valid = (parts.length > 2) ? false : valid;
            valid = (parseInt(parts[1]) > 59) ? false : valid;
          }
        }
        console.log(valid)
        if (!valid) {
          scope.display = old;
          $timeout(function(){
            var e = angular.element(elem[0].firstChild)[0];
           ...