Angular.js Time Input directive

testing a time (HH:mm:ss) Input directive

by s_light

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<div ng-app="testTime">
    <div class="app" ng-controller="MainController">
        <section>
            <label>start</label>
            <input
                type="time" 
                placeholder="hh:mm:ss"
                ng-model="timecalc.start" 
                ng-model-options="{ updateOn: 'blur', timezone: 'UTC' }"
                mytime
            ><br/>
            <label>end</label>
            <input
                type="time" 
                placeholder="hh:mm:ss"
                ng-model="timecalc.end" 
                ng-model-options="{ updateOn: 'blur', timezone: 'UTC' }"
                mytime
            ><br/>
            Dif: {{timecalc.dif.hours()}}:{{timecalc.dif.minutes()}}:{{timecalc.dif.seconds()}}
                    <br/>
                </section>
    </div>
</div>

JavaScript

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

// try to build a time directive 
// this directive only updates the model if a valid value is entered!!
app.directive('mytime', function($parse) {
	return {
		restrict: 'AE',
		require: 'ngModel',
		// scope: {
			// ngModel: '='
		// },
		link: function(scope, elm, attrs, ctrl) {
			console.log("mytime link:");
			console.log("\t scope", scope);
			console.log("\t ctrl", ctrl);
			console.log("\t ctrl.$viewValue", ctrl.$viewValue);
			console.log("\t ctrl.$modelValue", ctrl.$modelValue);
			
			var formatString = 'HH:mm:ss';
			
			// view -> model
			ctrl.$parsers.push(function(viewValue) {
				if (viewValue) {
					console.log("mytime parsers:");
					console.log("\t viewValue", viewValue);
					console.log("\t ctrl.$viewValue", ctrl.$viewValue);
					console.log("\t ctrl.$modelValue", ctrl.$modelValue);
					
					var newValue = moment(viewValue, formatString);
					//var newValue = new Date(viewValue);
					console.log("\t newValue", newValue);
					
					//if ( !isNaN(newValue.getTime()) ) {
					if ( newValue.isValid() ) {
						 console.log("\t valid");
						ctrl.$setValidity("parseAsTime", true);
						return newValue;
					} else {
						console.log("\t invalid");
						ctrl.$setValidity("parseAsTime", false);
						return ctrl.$modelValue;
					}
				} else {
					 console.log("invalid");
					return ctrl.$modelValue;
				}
			});
			// elm.on('blur', function() {
				// scope.$apply(function() {
					// ctrl.$setViewValue( new Date(elm.value) );
				// });
			// });
			
			// model -> view
			ctrl.$formatters.push(function formatter(modelValue) {
				console.log("mytime formatters:");
				console.log("\t modelValue", modelValue);
				console.log("\t ctrl.$modelValue", ctrl.$modelValue);
				if (modelValue) {
					console.log("\t modelValue is true");
					modelValue = moment(modelValue);
					return modelValue.format('HH:mm:ss');
					// return modelValue.format(formatString);
				} else {
					return...