Angular error:datefmt

<input type="date" ng-model="date">

$scope.date = "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.date = new Date("2014-12-24");

第二种方法通过设置NgModelController $formatters自动将ng-model的值转换为Date类型。

angular.module(&#39;app&#39;)
.directive(&#39;formatDate&#39;, function(){
  return {
    require: &#39;ngModel&#39;,
    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(&#39;date&#39;)(value, &#39;yyyy-MM-dd&#39;);
        }
      });
    }
  };
});
<input type="date" ng-model="date" format-date>

通过NgModelController.$formaters可以格式化input输入。例如自动将输入转换为大写、自动删除空格等等。

参考：NgModelController文档