预期为日期angular.js

Question

I'm pulling this JSON from the mongodb, and I have a date field which have the type as DATE.

I want be able to change the date if needed in a interface, for this I need a input type date field with the attribute ng-model="event.date", just like this:

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

This is throwing an error:

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

I found the reason for the error and fixed it. I found this directive which SHOULD fix the error:

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);
        });
      }
    };
  }])

To use, simply add my-model-filter="{filter:'date', expr:'yyyy-MM-dd'}" in the input field, which I did:

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

But now is throwing the same error with the valid format:

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

What's missing here?

I'm pulling the data from a model service by a controller:

retrieve action:

retrieve: function() {
    var that = this;

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

Please guys, help me! I already read every stackoverflow answer, every post blog and I cant figure out how to fix it.

I don't want use a mask with the type text, I want use type="date" which is the right format.

Answer 1

This is what I use. I delete all existings $formatters, $parsers with .splice, since I don't need that, but you may want to keep those.

How to use on directive is like 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;
            });
        }
    };
});