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

Question

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

标记

<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>

Controller

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

Answer 1

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

(需要 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