UI Bootstrap 日期选择器说 ISO-8601 日期字符串的日期无效

Question

我从 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';

Answer 1

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

Answer 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

UI Bootstrap 日期选择器说 ISO-8601 日期字符串的日期无效

UI Bootstrap datepicker says invalid date for ISO-8601 date string

datepicker

asp.net-web-api

angularjs

angular-ui-bootstrap