当输入到输入字段时,angular-ui datepicker不允许格式为dd.MM.yyyy

时间:2013-10-22 10:36:19

标签: javascript angularjs datepicker angular-ui-bootstrap

我认为描述此问题的最佳方法是引导您进入Plunk:

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

angular-ui datepicker不喜欢我们欧洲人! 首先在datepicker中选择一个日期。让我们说它是10月25日(至少这一天应该大于12)。您会看到datepick格式已设置为dd.MM.yyyy,并在输入字段中设置的日期中重新显示。 现在改变一年。这在datepicker中没有显示。 但是,如果您以MM.dd.yyyy格式输入日期,一切都很顺利。

我添加了angular-locale_de-de.js,这似乎可以在Oktober的拼写中看到。 那么为什么我不能在欧洲[正确和逻辑日前 - 月]格式中输入日期?

2 个答案:

答案 0 :(得分:4)

您可以使用angular指令。

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

答案 1 :(得分:0)

好的,我已经弄明白了。问题在于新的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;
    }
  }