javascript - Îmbinarea datelor AngularJS a controlului DateTime din Chrome nu funcționează după actualizarea 24.0.1312.52


Sper că și altcineva a observat asta:-

Folosim AngularJS 1.0 și folosim type="date" cu elementul pentru a obține selectorul de dată și oră implicit plăcut din Chrome. Totul funcționa bine până când Chrome s-a actualizat recent la [24.0.1312.52]. Acum, dacă schimb data folosind selectorul de dată și oră, legarea datelor AngularJS nu o salvează în proprietatea json legată a $scope.

Dacă schimb data folosind orice tastă de pe tastatură, Data binding salvează data în proprietatea bind.

Care ar putea fi motivul care cauzează această problemă?

Răspuns #1

Am observat același comportament și am observat că Sutikshan era pe drumul cel bun.

Inputul de dată HTML 5 necesită ca valoarea să fie în format RF 3339, prin urmare, putem ajusta directiva noastră de input AngularJS pentru a formata și analiza valoarea în consecință.

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;
            }];
        }
    };
}]);

Bazele sunt că ne asigurăm că NgModelController folosește $formatters și $parsers atunci când actualizează valoarea din vedere și valoarea modelului, respectiv.

Răspuns #2

Am primit ajutor în grupul Google AngularJS:-

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

JSFeedle de 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());
          });
        });
      }
    }
  };
});