angularJS之ngModel繫結日期型別出現錯誤Angular error:datefmt的解決辦法
阿新 • • 發佈:2019-01-02
<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
輸入。例如自動將輸入轉換為大寫、自動刪除空格等等。