* This directive acts as a polyfill for displaying input type time on IE, Firefox and Safari. For now, it is display only and does not change the behavior, which still acts as a simple text input. The directive acts as a two-way filter converting the model from strings like "19:00:00" to "07:00 PM" for display and converting "03:00 PM" back to …

time-polyfill.js

angular.module('managerApp')
  .directive('time', function () {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function postLink(scope, element, attrs, ngModelController) {
      	//convert data from view format to model format
      	ngModelController.$parsers.push(function(data) {
    	  	if(window.ui.browser !== 'Chrome') {
    				var amPM = data.substring(data.length-2, data.length);
    				var hour = parseInt(data.substring(0,2), 10);
    				var minutes = data.substring(3,5);

    				if(amPM === 'PM' || 'pm') {
    					hour = hour + 12;
    					hour = hour + ':' + minutes + ':00';
    				} else {
    					hour = hour + ':' + minutes + ':00';
    				}

    				return hour; //converted
  	      } else {
	      		//Chrome implements input[time] correctly so we can simply pass through the data as is
	      		return data;
  	      }
        });

      	//convert data from model format to view format
        ngModelController.$formatters.push(function(data) {
    			if(window.ui.browser !== 'Chrome') {
    				var hour = parseInt(data.substring(0,2), 10);
    				var minutes = data.substring(3,5);

    				if(hour > 12){
    					hour = hour - 12;
    					hour = '0' + hour + ':' + minutes + ' PM';
    				} else {
    					hour = hour + ':' + minutes + ' AM';
    				}

    				return hour; //converted
    			} else {
    				//Chrome implements input[time] correctly so we can simply pass through the data as is
    				return data;
    			}
        });
      }
    };
  });