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的类型为Date。 $ scope.statusChangeDate = new Date（'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 datepicker表示ISO-8601日期字符串

2 个答案: