Angular + Bootstrap + 日期选择器 = 不工作

Question

我正在使用 AngularJs 1.6 和 angular-ui-bootstrap 2.5.0 (bootstrap-ui-tpl.min.js)

加载页面时，模型值 (dateOfBirth) 未预填充到日期选择器文本框中。似乎许多人都报告了不同版本 angular/bootstrap 的类似问题，但似乎没有任何效果。

HTML:

  <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dateOfBirth" datepicker-options="dateOptions"/>
  <span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="openDobDatePicker()"><i class="glyphicon glyphicon-calendar"></i></button>
  </span>

Javascript:

$scope.format = 'dd/MM/yyyy'

$scope.dateOfBirth = '05/12/2004'

$scope.dateOptions = {
  maxDate: new Date(),
  startingDay: 1,
  showWeeks: false
}

编辑： 似乎 angular 提供了 uibDateParser 来将 String 解析为 Date 对象。但是，以下内容默默地失败了：

$scope.dateOfBirth = $uibDateParser.parse('05/12/2004', 'dd/MM/yyyy')

Answer 1

它没有被填充，因为它是一个字符串而不是有效的 Date。所以，如果你改变它，

$scope.dateOfBirth = new Date("05/12/2004");

..它会起作用的！另外，请注意 new Date(..) 将随本地时区一起提供，因此如果您想更改时区或任何与日期操作有关的事情，momentjs 是一个很好的库来处理这些问题。

编辑：如果你的格式是dd/MM/yyyy，你也许可以做这样的事情来转换有效日期：

var parts ='05/12/2004'.split('/');
$scope.dateOfBirth = new Date(parts[2],parts[1]-1,parts[0]));

Angular + Bootstrap + 日期选择器 = 不工作

Angular + Bootstrap + Datepicker = not working

angularjs

angular-ui-bootstrap

bootstrap-datepicker