Issue with HTML 5's Date input type not firing ng-change when user changes the date using the default date picker...

[mathelli]

Most of our clients use Microsoft Windows 7/Google Chrome (primary Desktop environment most of our clients use), Android/Android Browser, iPhone 4+/Safari Mobile, iPad 2+/Safari Mobile as the production environments.

Notice in my example that when you change the Date via typing it or using up and down arrows it fires the ng-change event, however does not fire when the user changes the date via the date picker. It work's in the onchange event, but not the ng-change event. Huge let down since I am using HTML5's date type to take advantage of how it works on both mobile and cross most modern browsers nicely, as well as it's min and max attributes. Any idea on a work around, or if the developers of AngularJS are working to fix this? Thanks. :)

Here is an example:
http://plnkr.co/edit/LW6Vc1zoRsgQmSgWKjMI

[gonzaloruizdevilla]

I have tried your plunker with Chrome for Mac and I have reproduced this error.
Interestingly, in Chrome and Safari for iOS the date picker fires ng-change, even before closing the date picker, so it looks like it's being fired many times.

[mathelli]

Ya I noticed that on the iphone too. But on my Android device (and Window's 7 chrome browser) the date picker doesnt ever update it, and since the date picker is my only option on Android, that is a huge bummer.

[gonzaloruizdevilla]

When you type in the input, Chrome is firing both input and change events. However, when you select from the native datepicker, only the change event is fired.

AngularJS has specific logic for checkbox, number, url, email and radio input types. When you use another type (like date) it falls back to text type, and as you can see here:
https://github.com/IgorMinar/angular.js/blob/master/src/ng/directive/input.js#L411
if the sniffer detect support for input event it will listen to that event instead of listening to the change event.

I don't know what are the devs plans with the other input types (date, datetime, datetime-local, time, etc.). Is the support for this types in AngularJS roadmap?

As a workaround, in my projects I have made a small "date" directive (new attribute for inputs), where I made date validations (format, min, max, etc.) and now I will listen to this event too.

[mathelli]

Bleh, for now I did something dirty, but it works. I created a global JS method in the controller that does the update and embed it in a function using $scope.apply() to update the real info it is supposed to. For now, until they add capabilities to AngularJS for the input Date type this is ok I suppose. :)

[gonzaloruizdevilla]

To handle the event, you can use something like this plunkr I've just made:
http://plnkr.co/edit/scpPOg80zqE2UgzT4OQ2

This can be the starting point. Inside the link function, you can use formaters and parsers to enforce that the model only contains date objects even if the browser doesn't support date type inputs.

function fromUser(text) {
    var date = parseDateFromUser(text);
    if (!date) {
        ctrl.$setValidity('date', false);
        return undefined;
    } else {
        ctrl.$setValidity('date', true);
        return date;
    }
}
ctrl.$parsers.push(fromUser);

[mathelli]

Much cleaner than my solution. I like it. Works great, thanks! :)

[mathelli]

Doesn't work on all browsers though. I am doing a lot of mobile web development and it works on some devices, but doesn't capture the input type date change event on others. >,<

[btford]

As part of our effort to clean out old issues, this issue is being automatically closed since it has been inactivite for over two months.

Please try the newest versions of Angular (1.0.8 and 1.2.0-rc.1), and if the issue persists, comment below so we can discuss it.

Thanks!

[mathelli]

Danke

Douglas Ford
Lead Software Engineer
Skyview Networks
On Aug 23, 2013 5:51 PM, "Brian Ford" notifications@github.com wrote:

As part of our effort to clean out old issues, this issue is being
automatically closed since it has been inactivite for over two months.

Please try the newest versions of Angular (1.0.8 and 1.2.0-rc.1), and if
the issue persists, comment below so we can discuss it.

Thanks!

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1989#issuecomment-23198888
.

[mathelli]

Douglas Ford sent you an invitation

Twitter helps you stay connected with what's happening right now and with the people and organizations you care about.

Accept invitation

https://twitter.com/i/43dcadfe-ceb4-4626-bb40-be774b10b202

This message was sent by Twitter on behalf of Twitter users who entered your email address to invite you to Twitter.
Unsubscribe: https://twitter.com/i/o?t=1&iid=67c5e558ea9d4847aa28ccda933257f0&uid=0&c=IuVwbCB3dgFImUAyXuX1czjVoTlhY8nlszdfyDca%2FRdSdHu511jV9wf7UPLPN6w3pIKZlOYnCRIpHUyIHEXIn9q8iZVACNekfDEVHV4qzcQSHwINchIc8Q%3D%3D&nid=9+26

Need help?
https://support.twitter.com

[wzshuang]

the ng-change event still not fired on some android device today with angular 1.4x, anyone can help?

[gkalpak]

We've been trying to fix a similar problem in #12902 - the change might solve your problem too.
I would suggest testing again after #12902 has been merged and if the problem persists open a new issue (with all necessary details to reproduce).