UI Bootstrap datepicker 说 ISO-8601 日期字符串的日期无效答案

【问题标题】：UI Bootstrap datepicker says invalid date for ISO-8601 date stringUI Bootstrap datepicker 说 ISO-8601 日期字符串的日期无效
【发布时间】：2016-02-20 10:36:23
【问题描述】：

我从 Web API 接收 ISO 8601 格式 2011-11-14T14:48:00 的日期，因为这是默认情况下日期序列化的方式。在客户端上，我将日期值与输入控件绑定，并使用UI Bootstrap datepicker 进行日期控件。绑定进行得很好，我可以看到任何指定日期格式的日期。但是当我从控件中退出而不做任何更改时，模型值变得无效。我不认为日期是无效的，因为如果我删除日期值中的一个数字并重新输入相同的数字然后制表符，则模型值将变为有效。

标记

<input type="text" uib-datepicker-popup="{{dateFormat}}" ng-model="statusChangeDate" datepicker-options="dateOptions" is-open="opened" />
<span class="input-group-btn">
<button type="button" ng-click="open($event, 'status')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>

控制器

// This will come from a Web API call
$scope.statusChangeDate = '2011-11-14T14:48:00';

【问题讨论】：

确保 $scope.statusChangeDate 是 Date 类型。 $scope.statusChangeDate = new Date('2011-11-14T14:48:00');
@Gray 谢谢，这确实有效，但我相信我需要一个指令或过滤器来将所有 ISO 日期字符串解析为日期对象，因为 Web API 将始终在 ISO 字符串中序列化
不知道自己在做什么，很难给出如何处理的确切答案。但是，我们代码中的一个常见做法是在成功加载后修改传入的数据。遍历结果，并将字符串转换为日期。
是的，这个迭代是我认为需要概括的。我们的应用程序中可能有多个地方，我们从服务器接收日期字符串。

标签： angularjs asp.net-web-api datepicker angular-ui-bootstrap

【解决方案1】：

确保 $scope.statusChangeDate 是 Date 类型。 $scope.statusChangeDate = new Date('2011-11-14T14:48:00');

【讨论】：

我碰巧发现调用 new Date('2011-11-14T14:48:00') 将通过添加/减去浏览器的时区来本地化日期，从而导致原始日期发生变化日期。

【解决方案2】：

对于自动字符串到日期的转换，我创建了简单的属性指令：

（需要 lodash 或下划线，或者替换为原生 JS 函数祝你好运）

.directive('transformStringToDate', function () {
 return {
  restrict: 'A',
  require: 'ngModel',
  link: function (scope, element, attr) {
    var ngModel = attr.ngModel;
    var value = _.propertyOf(scope)(ngModel);
    if (!_.isUndefined(value)) {
      if (_.isString(value)) {
        var lastIndexOfDot = _.lastIndexOf(ngModel, '.');
        if (lastIndexOfDot < 0) {
          scope[ngModel] = new Date(value);
        } else {
          var parentObject = _.propertyOf(scope)(ngModel.substr(0, lastIndexOfDot));
          parentObject[ngModel.substr(lastIndexOfDot + 1)] = new Date(value);
        }
      } else if(_.isDate(value)) {
        console.log("No need to transform date", value, ngModel);
      }
    }
  }
}
})

在 HTML 中的用法：

<div class="form-group">
  <label class="col-md-6 col-lg-6">Bla bla:</label>
  <div class="col-md-6 col-lg-6">
    <p class="input-group">
      <input type="text"
             class="form-control"
             uib-datepicker-popup="{{'MMM dd, yyyy'}}"
             ng-model="someObject.anotherObject.myDate"
             transform-string-to-date
             is-open="myDatePopup"
             ng-required="true"
             close-text="Close"/>
      <span class="input-group-btn">
         <button type="button" class="btn btn-default" ng-click="myDatePopup = true">
           <i class="glyphicon glyphicon-calendar"></i>
         </button>
      </span>
    </p>
  </div>
</div>

http://plnkr.co/edit/zTp5wFCxImtFNJB9CaRb?p=preview

【讨论】：