Angular-UI 日期选择器不允许在输入字段中输入格式 dd.MM.yyyy

angular-ui datepicker does not allow format dd.MM.yyyy when entered into the input field

本文关键字：输入 格式 dd MM yyyy 字段 选择器 不允许 Angular-UI 日期      更新时间：2023-09-26

我认为描述这个问题的最好方法是引导你去Plunk：

http://plnkr.co/edit/cRO5UgAyZx5SHJSKrzg7?p=preview

棱角分明的日期选择器不喜欢我们欧洲人！首先在日期选取器中选择一个日期。假设是 10 月 25 日（至少这一天应该大于 12 日）。您会看到日期选择格式已设置为 dd.MM.yyyy，这在输入字段中设置的日期中得到关联。现在更改年份。这不会显示在日期选取器中。但是，如果您以 MM.dd.yyyy 格式输入日期，一切都很好。

我添加了角度locale_de-de.js，这似乎可以从Oktober的拼写中看到。那么，为什么我不能以欧洲 [正确且合乎逻辑的日前日期] 格式输入日期呢？

您可以使用角度指令。

var app = angular.module('plunker', ['ui.bootstrap']);
app.directive('formatteddate', function ($filter) {
    return {
        link: function (scope, element, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                return $filter('date')(viewValue,'dd.MM.yyyy');
            });            
        },
        restrict: 'A',
        require: 'ngModel'
    };
});

而不是在HTML中使用它

<input type="text" formatteddate="dt.date" .../>
好的，

我已经想通了。问题在于新的Date（[dateString]）方法，它只接受某些值。我已经编辑了 ui-bootstrap-tpls-0.6.0.js从第 1148 行开始。如您所见，angular-ui 团队在那里有一个待办事项;-）

  // TODO: reverse from dateFilter string to Date object
  function parseDate(viewValue) {
    if (!viewValue) {
      ngModel.$setValidity('date', true);
      return null;
    } else if (angular.isDate(viewValue)) {
      ngModel.$setValidity('date', true);
      return viewValue;
    } else if (angular.isString(viewValue)) {
      var date = new Date(viewValue);
      if (isNaN(date)) {
//   If the date is inputted in the European dd.mm.yyyy format, it will be invalid
//   This flips the month and the day around
          var dLastPos = dateFormat.lastIndexOf('d');
          var mPos = dateFormat.indexOf('M');
          var dSep, newViewValue;
          if(mPos>dLastPos){
              dSep = dateFormat.substr(mPos-dLastPos,1);
              newViewValue = viewValue.split(dSep);
              if(typeof newViewValue=='object'){
                  newViewValue=newViewValue[1]+dSep+newViewValue[0]+dSep+newViewValue[2];
              }
          }
          date = new Date(newViewValue);
          if (isNaN(date)) {
              ngModel.$setValidity('date', false);
              return undefined;
          } else {
              ngModel.$setValidity('date', true);
              return date;
          }
      } else {
        ngModel.$setValidity('date', true);
        return date;
      }
    } else {
      ngModel.$setValidity('date', false);
      return undefined;
    }
  }
相关文章：