Question

I’m not sure if this is a bug or not, but here is what I’m trying to accomplish. I only care about google chrome as this is for debugging purposes. I want to use the html5 input type date and have it update a model. The problem comes in that if i select a date from the popup angular doesn’t update it. If I instead use the arrows to run through dates it then updates it. Is there some other way to get the ngModel to update?

<div ng-app>
     <input type="date" data-ng-model="date" style="width:200px;" />
     <br>
     {{ date }}
</div>

Here’s a fiddle of it: http://jsfiddle.net/rtCP3/55/

Answer 1

Angular listens to the input event which seems to trigger when you click mouse up/down or click the errors. For some reason though (bug?) that event doesn’t trigger from the calendar dialog.

I created simple directive which registers to the change event and then updates the model. You can see a working example here.

The directive is quite simple:

module.directive('dateFix', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attr, ngModel) {
            element.on('change', function() {
                scope.$apply(function () {
                    ngModel.$setViewValue(element.val());
                });         
            });
        }
    };
});

And then use it like this: <input type="date" ng-model="dateValue" date-fix />

A temporary workaround at least.