AngularJS Example:

by Alexey Ryazhskikh

HTML

<div ng-app="project">
  <h2>JavaScript Projects</h2>
  <div ng-controller="ListCtrl" >
      <input type="time" ng-model="mytime" str-to-time/>
      {{mytime}}
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<style>

JavaScript

angular.module('project', [])


.controller('ListCtrl', function($scope) {
    $scope.mytime = "12:10";
})

.directive("strToTime", function(){
   return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModelController) {
        ngModelController.$parsers.push(function(data) {            
            return data.getHours() + ":" + data.getMinutes();
        });
    
        ngModelController.$formatters.push(function(data) {
            if (!data) {
                return null; 
            }
            var d = new Date(1970,1,1);
            var splitted = data.split(":");
            d.setHours(splitted[0]);
            d.setMinutes(splitted[1]);
          return d;
        });
      }
    };
});