为什么AngularJS中的日期输入字段抛出类型错误？

Question

当我向用户显示填充的可编辑表单时(而不是当用户输入数据并提交时),会发生错误.数据来自MySQL over REST/JSON,服务如下所示:

HTML:

<input class="form-control" type="date" name="dateInput" id="dateOfBirth" 
                   ng-model="user.dateOfBirth">

CCONTROLLER:

.controller('EditCtrl', function ($scope, $routeParams, UserDetail, $window) {
        $scope.user = UserDetail.find({}, {'id': $routeParams.id});
}

服务:

service.factory('UserDetail', function ($resource) {

    return $resource(
        'http://localhost:8080/ClearsoftDemoBackend/webresources/clearsoft.demo.users/:id',
        {id: '@id'},
    {
    find: {method: 'GET'},

    });
});

错误:

错误:[ngModel:datefmt]预计2010-05-13T00:00:00-04:00是日期

Answer 1

AngularJS 1.3添加到输入[date | datetime-local]字段新的格式化程序/解析器,用于检查模型是否为Date对象并抛出datefmt异常.

if (value && !isDate(value)) {
    throw $ngModelMinErr('datefmt', 'Expected `{0}` to be a date', value);

这个问题在previos版本中不存在,我建议考虑升级以避免大噩梦.

workaroud是使用自定义dateFormat指令重置默认格式化程序/解析器,并使用momentjs格式化,将字符串解析为Date.

define(['directives/directives','momentjs'], function(directives,momentjs) {
directives.directive('dateFormat', function() {
      return {
        require: 'ngModel',
        link: function(scope, element, attr, ngModelCtrl) {
          var format=attr.dateFormat;
          //Angular 1.3 insert a formater that force to set model to date object, otherwise throw exception.
          //Reset default angular formatters/parsers
          ngModelCtrl.$formatters.length=0;
          ngModelCtrl.$parsers.length=0;

          ngModelCtrl.$formatters.push(function(valueFromModel) {
             //return how data will be shown in input
              if(valueFromModel){
                 // For momentjs > 2.9 moment global va is not defined use momentjs instead of moment.
                  return moment(valueFromModel).format(format);
              }
              else
                  return null;
          });
          ngModelCtrl.$parsers.push(function(valueFromInput) {
              if(valueFromInput){
                  //For momentjs > 2.9 moment global va is not defined use momentjs instead of moment.
                  return moment(valueFromInput,format).toDate();
              }
              else 
                  return null;
          });
        }
      };
    });
});

更新使用momentjs> 2.9时,请考虑未定义全局变量的时刻.

2.9 "Deprecation warning: Accessing Moment through the global scope is deprecated, and will be removed in an upcoming release."

用AMD需要momentjs代替moment.即:

return momentjs(valueFromModel).format(format);

Answer 2

因为根据Angular,这不是一个有效的日期.查看输入[日期]上的文档,了解有关日期验证的说明.因为它是一个日期,它应该是YYYY-MM-DD的格式.