Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS Data Binding of chrome DateTime control not working After Update 24.0.1312.52

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.?

like image 360
Anand Avatar asked Jan 17 '13 10:01

Anand


2 Answers

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.

like image 150
Tri Q Tran Avatar answered Oct 13 '22 22:10

Tri Q Tran


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());
          });
        });
      }
    }
  };
});
like image 20
Anand Avatar answered Oct 14 '22 00:10

Anand