JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<div ng-app='app' ng-controller='AppCtrl'>
  <input type='text' ng-model='$ctrl.time' input-time>
  {{ $ctrl.time }}
</div>

JavaScript

console.clear();
angular.module('app', [])

.controller('AppCtrl', [
	'$scope',
	function($scope){
  	var ctrl = $scope.$ctrl = {};
  	ctrl.time = 1021;
  }
])

.directive('inputTime', [
	function(){
  	return {
    	restrict: 'A',
      require: '^ngModel',
      link: function(scope, elem, attrs, ngModel){
       	ngModel.$formatters.push(function(value){
          var date = new Date(null);
          date.setSeconds(value * 60);
          return date.toISOString().substr(11, 5);
        });
      
      	ngModel.$parsers.push(function(value){
          var parts = value.split(':').map(function(value){
          	return parseInt(value, 10);
          });
          return parts[0] * 60 + parts[1];
        });
      }
    };
  }
]);