AngularJS输入类型= datetime-local:期望ISO-8601-有效日期字符串为日期

时间:2015-07-27 03:01:35

标签: javascript angularjs datetime

使用AngularJS和angular-resource 1.4.1,我有一个超级简单的Event服务,其开始日期是可选的结束日期:

angular.module('jtm.events').factory( 'Event', [
  '$resource',
  function($resource) {
    var Event = $resource( '/events/:id.json',
      {id: '@id'}
    );

    // EDIT: added this method
    Event.index = function() {
      var events = this.query();
      angular.forEach( events, function($event) {
        $event.start_date = new Date($event.start_date);
      });
      return events;
    };

    return Event;
  }
]);

Event.query()的典型结果如下:

[
  {
    id: 1,
    start_time: "2015-08-25T00:47:16Z",
    end_time: null
    ...
  },
  ...
]

在(面向最终用户)的前端我通过我设置的moment.js过滤器运行这些日期,并且按预期呈现它们而没有任何JS错误。但是,在管理事件表单中,我有:

<input type="datetime-local" ng-model="event.start_time" ng-required="true">

这是投掷:

Error: [ngModel:datefmt] Expected `2015-08-25T00:47:16Z` to be a date

并在管理表单字段中呈现占位符mm/dd/yyyy, --:-- --掩码。

这不是有效的ISO 8601日期字符串吗?我是否需要以某种方式更改我的服务/模块配置才能使其正常工作?

修改

我没有定义自定义index操作,而是使用截取器覆盖query操作配置,将start_time字符串包装在正确的Date对象中:

angular.module('jtm.events').factory( 'Event', [
  '$resource',
  function($resource) {
    var Event = $resource( '/events/:id.json',
      {id: '@id'},
      {
        query: {
          action: 'query',
          isArray: true,
          transformResponse: function(response) {
            response = angular.fromJson(response);
            angular.forEach( response, function($event) {
              $event.start_time = new Date($event.start_time);
            });
            return response;
          },
        },
      }
    );

    return Event;
  }
]);

1 个答案:

答案 0 :(得分:0)

你需要在输入元素ng-model中传递日期对象而不是字符串。

use this 
start_time: new Date("2015-08-25T00:47:16Z")
ins ted of:-
start_time: "2015-08-25T00:47:16Z" 

您可以从此链接中获取帮助

[plnkr]:http://plnkr.co/edit/QaA31F?p=preview