AngularJS Data Chrome binding DateTime control not working After update 24.0.1312.52

Question

Hope someone else noticed this: -

We are using AngularJS 1.0 and using type = "date" with an element to get the default datetime collection for Google. Everything worked fine until chrome updated itself recently to [24.0.1312.52]. Now, if I change the date using the data collector, AngularJS data binding does not save it for binding the json property in $ scope.

If I change the date using any keyboard key, the data binding saves the date of the property binding.

What is the cause of this problem?

Answer 1

We got help at angularJS google group: -

https://groups.google.com/forum/?fromgroups=#!topic/angular/ycYzD3xRKS8

JSFeedle by Peter Bacon Darwin

http://jsfiddle.net/ZsRxj/

var module = angular.module('demoApp',[]); module.directive('input', function () { return { require: '?ngModel', restrict: 'E', link: function (scope, element, attrs, ngModel) { if ( attrs.type="date" && ngModel ) { element.bind('change', function () { scope.$apply(function() { ngModel.$setViewValue(element.val()); }); }); } } }; }); 

Answer 2

I noticed the same behavior and noticed that Sutikshan was on the right track.

HTML 5 input date requires the value to be in RF 3339 , so we can adjust our AngularJS directive to format and parse the corresponding value.

 angular.module('myApp', []).directive('input', ['$filter', function($filter) { return { require: '?ngModel', restrict: 'E', link: function(scope, element, attrs, ngModel) { if (!ngModel || attrs.type != "date") return; // Using AngularJS built in date filter, convert our date to RFC 3339 ngModel.$formatters = [function(value) { return value && angular.isDate(value) ? $filter('date')(value, 'yyyy-MM-dd') : ''; }]; // Convert the string value to Date object. ngModel.$parsers = [function(value) { return value && angular.isString(value) ? new Date(value) : null; }]; } }; }]); 

The basics are that we guarantee that NgModelController uses our $ formatters and $ parsers when updating view values ​​and model values, respectively.

Answer 3

Chrome does not seem to start input when you select a date through the collector. A short-term hack is to forward the change events (which Chrome fires) to input ; fortunately, AngularJS does not use this event in the listener, so you do not have to worry about event display values ​​or anything:

 $('body').on('change', 'input[type="date"]', null, function(){ $(this).trigger('input'); }); 

A better solution would be to find out why Chrome is not shooting input .

A word of caution: as long as there is nothing in AngularJS code that could cause change to trigger (thereby starting an endless loop), and a quick test involves the above work, a “better solution” would be a much better solution.