Time Only Directive-AngularJS

script.js

var myApp = angular.module('myApp', []);

//Directive for custom validation of Time(hh:mm:ss)
myApp.directive("timeOnly", function() {
  return {
    require: 'ngModel',
    link: function(scope, ele, attr, ctrl) {
      ctrl.$parsers.push(function(inputValue) {
        var pattern = new RegExp(/(^[0-9]{2})(:{1})([0-9]{2})(:{1})([0-9]{2})$/, "g");
        var newInput;

        //Default condition
        if (inputValue == '') {
          return '';
        }

        //Should not start with ":"
        if (/^[:]/g.test(inputValue)) {
          ctrl.$setViewValue('');
          ctrl.$render();
        }

        //Should only contain Digits or ":" 
        newInput = inputValue.replace(/[^0-9:]/g, '');
        if (inputValue != newInput) {
          ctrl.$setViewValue(newInput);
          ctrl.$render();
        }

        //******************************************
        //***************Note***********************
        /*** If a same function call made twice,****
         *** erroneous result is to be expected ****/
        //****example: pattern.test(inputValue)*****
        //******************************************
        var inputLength = inputValue.length;
        var patternResult = pattern.test(inputValue);
        var colonCount;

        colonCount = newInput.split(".").length - 1; // count of colon present
        if (patternResult == false) { //if Pattern False
          if (inputLength > 8) {
            console.log("ss");
            if (inputValue.substr(6, 2) >= 60) { /* "ss" value if >=60, should be replaced with 59*/
              newInput = newInput.substr(0, 6) + 59;
            } else {
              newInput = newInput.slice(0, 8);
            }
            ctrl.$setViewValue(newInput);
            ctrl.$render();
          } else {
            //Restrict "hh" to 2 digit with auto ":" sufixed; 
            if (inputLength == 2) {
              colonCount = newInput.split(".").length - 1; // count of colon present
              if (inputValue >= 24) { /*Automatic  TypeCasting from String to Integer*/
                /* "hh" value if >=24, should be replaced with 23*/
                newInput = 23 + ":";
              } else {
                newInput = (newInput.slice(0, inputLength)) + ":";
              }
              ctrl.$setViewValue(newInput);
              ctrl.$render();
            }
            //Restrict "mm" to 2 digit with auto ":" sufixed;
            if (inputLength == 5) {
              colonCount = newInput.split(".").length - 1; // count of colon present
              console.log("mm");
              if (inputValue.substr(3, 2) >= 60) { /* "mm" value if >=60, should be replaced with 59*/
                newInput = newInput.substr(0, 3) + 59 + ":"
              } else {
                newInput = (newInput.slice(0, inputLength)) + ":";
              }
              ctrl.$setViewValue(newInput);
              ctrl.$render();
            }
          }
        }
        //PatternResult is true
        else {
          //Restrict "mm" to 2 digit with auto ":" sufixed;
          if (inputLength >= 8) {
            if (inputValue.substr(6, 2) >= 60) {
              newInput = newInput.substr(0, 6) + 59;
              ctrl.$setViewValue(newInput);
              ctrl.$render();
            }

          }
        }

        return newInput;
      });
    }
  }
});

myApp.controller("myAppController", ['$scope', function($scope) {
  console.log("--Inside My App Controller---");
}]);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

style.css

    input.ng-valid.ng-dirty{
  border : 1px solid green;
}

input.ng-invalid.ng-dirty{
  border:1px solid red;
}
  

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

Time-Only-directive-angularjs.markdown

Time Only Directive-AngularJS

An AngularJs directive, that takes care of the input to accept numbers only to generate a "Time" value with the format ( hh:mm:ss ).
The separator ":" is appended after "hh" and "mm" automatically ,thus restricting the user to enter 2 digit value. (example : 23:59:59).

The directive also takes care , that the initial value is not be started with a separator(:).

The value of hour (ie : hh ) , if reached or more than "24", the model is automatically set to "23". Similarly , the values of Minutes and Seconds (ie : mm , ss ) , if reached or more than "60", the model is automatically set to "59".

On the final note, "timesOnly" directive, takes the input in numbers to form a Time value formatted (hh:mm:ss) (example : 26:59:59 ) , with inclusion of automatic separators.

PS: In addition to the input element, Remove button is attached, in order to refresh or reset the value.

<script src="https://gist.github.com/NishiBangar/3f6f65200e98f013094f378e7834a8b7.js"></script>

A Pen by Nishchith J Bangar on CodePen.

License.

timeOnly-directive.html

<head>

</head>

<body ng-app="myApp" ng-controller="myAppController">
  <form name="inputForm" class="form-horizontal" novalidate role="form">
    <div class="row"><br>
      <div class="col-sm-3 col-sm-offset-1">
        <div class="input-group">
          <input type="text" class="form-control" time-only ng-model="inputText" ng-pattern="/(^[0-9]{2})(:{1})([0-9]{2})(:{1})([0-9]{2})$/" />
          <span class="input-group-btn">
                <button class="btn btn-danger" ng-click="inputText=''">
              <i class="  glyphicon glyphicon-remove" ></i>
              </button></span>
        </div>
      </div>
    </div>
  </form>
  </div>
</body>