预计是一个日期 angular.js

Question

我从 mongodb 中提取这个 JSON，并且我有一个类型为 DATE 的日期字段。

如果需要，我希望能够在界面中更改日期，为此我需要一个带有属性 ng-model="event.date" 的输入类型日期字段，就像这样：

<input class="tables__sidebar-input" type="date" ng-model='event.date'>

这是抛出一个错误：

Error: [ngModel:datefmt] Expected `2015-09-03T00:00:00.000Z` to be a date

我找到了错误的原因并修复了它。我发现这个指令应该修复错误：

angular.module('adminApp')
  .directive("myModelFilter", ["$filter", function($filter) {
    return {
      restrict: 'A', // only activate on element attribute
      require: '?ngModel',
      link: function(scope, element, attrs, ngModelController) {
        ngModelController.$parsers.push(function(data) {
          console.log(data);
          //convert data from view format to model format

          // Grab the parameters
          var params = scope.$eval(attrs.myModelFilter);

          // Filter with the parameters passed
          return $filter(params.filter)(data, params.expr, params.comp);

        });

        ngModelController.$formatters.push(function(data) {
          //convert data from model format to view format
          // Grab the parameters
          var params = scope.$eval(attrs.myModelFilter);

          // Filter with the parameters passed
          return $filter(params.filter)(data, params.expr, params.comp);
        });
      }
    };
  }])

要使用，只需在输入字段中添加my-model-filter="{filter:'date', expr:'yyyy-MM-dd'}"，我就是这样做的：

<input class="tables__sidebar-input" type="date" ng-model='event.date' my-model-filter="{filter:'date', expr:'yyyy-MM-dd'}">

但现在使用有效格式抛出相同的错误：

Error: [ngModel:datefmt] Expected `2015-09-02` to be a date

这里缺少什么？

我正在通过控制器从模型服务中提取数据：

检索动作：

retrieve: function() {
    var that = this;

    this.EventModel.Model.find()
        .then(function(result) {
            that.$scope.events = result;
        });
}

请大家帮帮我！我已经阅读了每个 stackoverflow 答案，每个帖子博客，但我不知道如何解决它。

我不想在类型文本中使用掩码，我想使用 type="date" 这是正确的格式。

Answer 1

这是我使用的。我删除了所有现有的 $formatters、$parsers 和 .splice，因为我不需要这些，但你可能想保留它们。

如何使用on指令就像type="date" as-date

angular.module('someApp')
    .directive('asDate', function () {
    return {
        require: '^ngModel',
        restrict: 'A',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$formatters.splice(0, ctrl.$formatters.length);
            ctrl.$parsers.splice(0, ctrl.$parsers.length);
            ctrl.$formatters.push(function (modelValue) {
                if (!modelValue) {
                    return;
                }
                return new Date(modelValue);
            });
            ctrl.$parsers.push(function (modelValue) {
                return modelValue;
            });
        }
    };
});