Mathew Berg Mathew Berg - 1 year ago 118
AngularJS Question

ngModel not updating when using input type date

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;" />
{{ date }}

Here's a fiddle of it:

Answer Source

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 () {

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

A temporary workaround at least.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download