hour minute input directive

In this example below you will see how to do a hour minute input directive with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 1kohei1, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1kohei1 ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>hour minute input directive</title>
  
  
  <link rel='stylesheet prefetch' href='https://rawgit.com/angular/bower-material/master/angular-material.min.css'>

  
  
</head>

<body>

  <div ng-controller="AppCtrl as ctrl" ng-app="MyApp">
  <div layout="row">
    <md-input-container>
      <label>HH:mm</label>
      <input ng-model="ctrl.timeInput" time-input/>
    </md-input-container>
    <md-select data-ng-model="ctrl.ampm" placeholder="AM/PM">
      <md-option ng-repeat="ampm in ctrl.ampms" ng-value="ampm">{{ ampm }}</md-option>
    </md-select>
  </div>
  {{ ctrl.timeInput }} {{ ctrl.ampm }}
    <md-select ng-model="ctrl.ampm" placeholder="AM/PM">
      <md-option ng-repeat="ampm in ['AM', 'PM']" ng-value="ampm">{{ ampm }}</md-option>
    </md-select>

</div>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js'></script>
<script src='https://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/1kohei1/hour-minute-input-directive-VLBjVB */
(function () {
  'use strict';
  angular.module('MyApp')
    .controller('AppCtrl', function() {
      var _this = this;
      _this.timeInput = "";
      _this.ampm = '';
    _this.ampms = ['AM', 'PM'];
    })
    .directive('timeInput', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, controller) {
          var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ':'];
          var preValue = '';
          
          function ensureHttpPrefix(value) {
            if (value && preValue.length < value.length && value.length < 6) {
              var valueArray = value.split('');
              var numberOnlyArray = [];

              // accepts only numbers and colon
              for (var i = 0; i < valueArray.length; i++) {
                if (numbers.indexOf(valueArray[i]) >= 0) {
                  // Colon is accetable at the index at 1 and 2.
                  if (valueArray[i] === ':') {
                    if (i === 1 || i === 2) {
                      numberOnlyArray.push(valueArray[i]);
                    }
                  } else {
                    // Prevent placing number at index at 3
                    if (numberOnlyArray.length === 2) {
                      numberOnlyArray.push(':');
                      numberOnlyArray.push(valueArray[i]);
                    } else {
                      numberOnlyArray.push(valueArray[i]);
                    }
                  }
                }
              }

              if (numberOnlyArray[1] === ':') {
                numberOnlyArray.unshift('0');
              }
              if (numberOnlyArray.length === 2) {
                var hour = parseInt(numberOnlyArray[0]) * 10 + parseInt(numberOnlyArray[1]);
                if (hour > 12) {
                  numberOnlyArray[0] = '1';
                  numberOnlyArray[1] = '2';
                }
                numberOnlyArray.push(':');
              }
              if (numberOnlyArray.length === 4) {
                // When the first digit of minute is entered, automatically put 0 after that.
                numberOnlyArray[4] = 0;
              }
              if (numberOnlyArray.length === 5) {
                var min = parseInt(numberOnlyArray[3]) * 10 + parseInt(numberOnlyArray[4]);
                if (min >= 60) {
                  numberOnlyArray[3] = 5;
                  numberOnlyArray[4] = 9;
                }
              }
              preValue = value;
              controller.$setViewValue(numberOnlyArray.join(""));
              controller.$render();
              return numberOnlyArray.join("");
            } else {
              if (value.length > 5) {
                var sixthChar = value.slice(5, 6);
                if (numbers.indexOf(sixthChar) >= 0 && sixthChar !== ':') {
                  // When sixth character is the number, replace the last character
                  value = value.slice(0, 4) + sixthChar;
                } else {
                  value = value.slice(0, 5);
                }
              }
              preValue = value;
              controller.$setViewValue(value);
              controller.$render();
              return value;              
            }
          }
          controller.$formatters.push(ensureHttpPrefix);
          controller.$parsers.push(ensureHttpPrefix);
        }
    }
  });
})();

Comments