Model不是AngularJS中输入的日期对象

Question

使用AngularJS我试图使用输入显示日期type=date:

<input ng-model="campaign.date_start" type="date">

但是,这会产生以下错误:

Error: error:datefmt
Model is not a date object

该日期实际上来自JSON API,格式如下:

date_start": "2014-11-19"

我认为我可以通过使用过滤器解决它,但这不起作用,我得到相同的错误:

 <input ng-model="campaign.date_start | date" type="date">

我也尝试将字符串转换为日期,但我又得到了同样的错误:

 $scope.campaign.date_start = Date(campaign.date_start);

我还能尝试什么？

Answer 1

你可以使用这个指令;

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

在你的HTML;

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

$formatters

Array.<Function>

每当模型值发生变化时,作为管道执行的函数数组.函数以反向数组顺序调用,每个函数都将值传递给下一个.最后一个返回值用作实际DOM值.用于格式化/转换值以在控件中显示.

Answer 2

你必须实例化campaign.date_start与Date不使用它作为一个功能.

它应该看起来像这样(小演示):

$scope.campaign.date_start = new Date(campaign.date_start);

Answer 3

cs1707的指令是很好的,除非日期的范围值是null或者undefined它将初始化日期1/1/1970.这对大多数人来说可能不是最佳选择

下面是cs1707's指令的修改版本,它将保留null/ undefinedmodel:

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

在你的HTML;

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

另外一个选项

如果要将此应用于date类型的所有输入,则无需将format-date属性添加到每个input元素.您可以使用以下指令.(请注意这一点,因为它可能以意想不到的方式与其他自定义指令交互.)

angular.module('app').directive("input", function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attr, modelCtrl) {
            if (attr['type'] === 'date'){
                modelCtrl.$formatters.push(function(modelValue) {
                    if (modelValue){
                        return new Date(modelValue);
                    }
                    else {
                        return null;
                    }
                });
            }

        }
    };
});

在你的HTML;

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