角UI日期選擇器時，輸入到輸入字段不允許格式DD.MM.YYYY

Question

我覺得來形容這個問題的最好辦法是你引導到普拉克：

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

角-ui datepicker不喜歡我們歐洲人！ 首先在日期選擇器中選擇一個日期。假設它是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]）方法，該方法只取某些值。我已經編輯UI的自舉TPLS-0.6.0.js開始行1148正如你所看到的，存在有一個TODO由角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; 
    } 
    }