<!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);
}
}
});
})();
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
AngularJS
v1.3.15
Material Design Lite
