1. 程式人生 > >angularJS之ngModel繫結日期型別出現錯誤Angular error:datefmt的解決辦法

angularJS之ngModel繫結日期型別出現錯誤Angular error:datefmt的解決辦法

<input type="date" ng-model="dateQry">  
$scope.dateQry = "2014-12-24";

angular中故意將input type=date型別的ng-model限制為Date型別。如果ng-model不為Date型別就會出現以下錯誤。

Error: error:datefmt  
Model is not a date object  

第一種解決方法是將ng-model的值轉換為Date型別。

$scope.dateQry = new Date("2014-12-24");

第二種方法通過設定NgModelController $formatters

自動將ng-model的值轉換為Date型別。

angular.module('app')  
.directive('formatDate', function(){
  return {
    require: 'ngModel',
    link: function(scope, elem, attr, ngModelCtrl) {
      ngModelCtrl.$formatters.push(function(modelValue){
        if(modelValue) {
          return new Date(modelValue);
        }
      });

      ngModelCtrl.$parsers.push(function
(value)
{ if(value) { return $filter('date')(value, 'yyyy-MM-dd'); } }); } }; });
<input type="date" ng-model="date" format-date>  

通過NgModelController.$formaters可以格式化input輸入。例如自動將輸入轉換為大寫、自動刪除空格等等。