AngularJS Example:

by Alexey Ryazhskikh

HTML

<div ng-app="project">
  <h2>JavaScript Projects</h2>
  <div ng-controller="ListCtrl" >
      <input type="time" ng-model="mytime" my-directive=""/>
      {{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) {
  time = "123";
})

.directive("myDirective", function(){
   return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModelController) {
        ngModelController.$parsers.push(function(data) {
          //convert data from view format to model format
            console.log("vm" + data + " " + typeof data);
            var minutes = data.getMinutes();
            var hour = data.getHours();
            
            return hour + ":" + minutes; //converted
        });
    
        ngModelController.$formatters.push(function(data) {
          //convert data from model format to view format
            console.log("mv" + data+ " " + typeof data);
          return data; //converted
        });
      }
    };
});