JSFiddle - React, Tailwind, and code Playground

by Alexey Ryazhskikh

HTML

<body ng-app="app" ng-controller="ctrl">
    <input my-directive type="time" name="test" ng-model="item" placeholder="Type in some lowercase text..." style="display:block;width:100%;">
       
        <label>Model: {{item}}</label>
</body>

JavaScript

angular.module("app", []);

angular.module("app").controller("ctrl", function($scope){
    $scope.item = 2;
    
    $scope.$watch('item', function(newVal, oldVal){
        if (newVal !== oldVal){
            console.log(newVal);
        }
    });
});

angular.module("app").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);
          return 3; //converted
        });
    
        ngModelController.$formatters.push(function(data) {
          //convert data from model format to view format
            console.log("mv" + data);
          return new Date(); //converted
        });
      }
    };
});