Input type=“time” binding of value attribute doesn't update the UI with angular

Question

I have an input tag of type="time" as below

<input type='time' id='from' ng-model='data.hall.occupancy.timeRange.from' datify value="{{data.hall.occupancy.timeRange.from | propertime}}"/>

the filter and directive are as follows

 app.directive('datify',function(){
return {
    require:'ngModel',
    link:function(scope,element,attrs,modelCtrl){
        modelCtrl.$parsers.push(function(inputValue){
            var times = inputValue.split(":");
            var hours = times[0];
            var mins = times[1];
            var currentDate = new Date();
            var outputDate = new Date(currentDate.getFullYear(),currentDate.getMonth(),currentDate.getDate(),hours,mins);
            return outputDate.toString();
        });
    }
};
});

app.filter('propertime',function(){
return function(timeStamp){
    if(timeStamp){
        var dateObj = new Date(timeStamp.toString());
        var date = dateObj.getDate();
        var month = dateObj.getMonth()+1;
        var year = dateObj.getFullYear();
        var hours = (0+ dateObj.getHours().toString()).slice(-2);
        var minutes = (0+ dateObj.getMinutes().toString()).slice(-2);
        return hours+":"+minutes;//+" "+date+"/"+month+"/"+year;
    }
}
});

Link to my plnkr : http://plnkr.co/edit/G4G5V62Y70IBvXUXdvQT?p=preview

The value attribute of input tag is updated in DOM correctly, but doesn't affect the UI. However updating the time in the UI, updates the value attribute in the DOM. Can someone tell me what is happening here.

Note: I am using Chrome (Firefox shows input type="time" as a normal text input)

Answer 1

We're trying to create a directive/component that needs to interact with another directive ( ng-model in this case).

So we wrote require: 'ngModel',

After we parse input $parse(attrs.datify);

HTML

<input 
       type='time'
       id='from' 
        datify='data.hall.occupancy.timeRange.from' 
        ng-model='data.hall.occupancy.timeRange.from'
        value="{{data.hall.occupancy.timeRange.from | propertime}}"
 /> 

Directive

   app.directive('datify', function ($parse) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, modelCtrl) {
            var model = $parse(attrs.datify);

            scope.$watch(model, function (value) {
                if (value.toString().split(":").length == 2) {
                    backToDate(value)
                }
            }); // end watch

            function backToDate(value) {
                var times = value.split(":");
                var hours = times[0];
                var mins = times[1];
                var currentDate = new Date();
                var outputDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDay(), hours, mins);
                modelCtrl.$setViewValue(outputDate);
            }

            function validate(value) {
                console.log('into validate');
                var otherFieldValue = model(scope);
                //console.log('validate:', value, otherFieldValue);

                var times = value.toString().split(":");

                var hours = times[1];
                var mins = times[2].split(".")[0];
                var currentDate = new Date();

                var outputDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDay(), hours, mins);
                //console.log("the date:", outputDate.toString());
                modelCtrl.$setViewValue(outputDate);
                return outputDate;
            }

            modelCtrl.$formatters.push(validate);
        }
    };
});

Fixed Demo Fiddle

Answer 2

I don't know anything about angular, but Date/time input type will be supported in Chrome, Opera and iOS Safari. http://caniuse.com/input-datetime