Hope anyone else also observed this:-
We are using AngularJS 1.0 and using type="date" with element to get Chrome's nice default datetime picker. Everything was working fine till chrome updated itself recently to [24.0.1312.52]. Now If I change date using datetime picker, AngularJS data binding does not save it to bind json property of $scope.
If I change date via any keyboard key down, Data binding saves the date to property bind.
What could be the reason causing this problem.?
I have noticed the same behavior and noticed that Sutikshan was on the right path.
HTML 5 input date requires the value to be in RF 3339 format, therefore, we can adjust our AngularJS input directive to format and parse the value accordingly.
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 is that we ensure that the NgModelController uses our $formatters and $parsers when updating the view value and model value, respectively.
We got help in 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());
});
});
}
}
};
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With