javascript - AngularJS data-binding av Chrome DateTime-kontroll fungerer ikke etter oppdatering 24.0.1312.52

Håper noen andre også la merke til dette:-

Vi bruker AngularJS 1.0 og bruker type="date" med elementet for å få Chromes fine standard dato- og tidsvelger. Alt fungerte bra til Chrome nylig oppdaterte seg til [24.0.1312.52]. Nå, hvis jeg endrer dato ved hjelp av dato- og tidsvelgeren, lagrer ikke AngularJS datainnbindingen det til det bundne JSON-egenskapen på $scope.

Hvis jeg endrer dato via en hvilken som helst tast på tastaturet, lagrer datatilknytning datoen til egenskapen bind.

Hva kan være årsaken til at dette problemet oppstår?

Svar #1

Jeg har lagt merke til samme oppførsel og lagt merke til at Sutikshan var på rett vei.

HTML 5 datainput krever at verdien er i RFC 3339-format, derfor kan vi justere vår AngularJS input-direktiv for å formatere og analysere verdien tilsvarende.

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

Grunnleggende er at vi sørger for at NgModelController bruker våre $formatters og $parsers når vi oppdaterer henholdsvis visningsverdien og modellverdien.

Svar #2

Vi fikk hjelp i AngularJS Google-gruppen:-

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

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