輸入到輸入字段時，angular-ui日期選擇器不允許格式dd.MM.yyyy

Question

我認為描述此問題的最佳方法是引導您進入Plunk：

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

angular-ui日期選擇器不喜歡我們歐洲人！ 首先在日期選擇器中選擇一個日期。 假設是10月25日（至少一天應該大於12）。 您會看到datepick格式已設置為dd.MM.yyyy，並且在輸入字段中設置的日期中得到了反映。 現在更改年份。 在日期選擇器中未顯示。 但是，如果以MM.dd.yyyy格式輸入日期，則一切正常。

我添加了angular-locale_de-de.js，在Oktober的拼寫中可以看到，它似乎正在工作。 那么，為什么不能以歐洲[正確且合乎邏輯的日期在月份前]格式輸入日期？

Answer 1

您可以使用角度指令。

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" .../>

Answer 2

好的，我知道了。 問題出在新的Date（[dateString]）方法上，該方法僅采用某些值。 我從第1148行開始編輯了ui-bootstrap-tpls-0.6.0.js。如您所見，angular-ui團隊在其中有一個TODO ;-)

  // 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;
    }
  }