AngularJS Bootstrap-datepicker 弹出窗口在第一次点击时显示不正确的日期答案

【问题标题】：AngularJS Bootstrap-datepicker popup shows incorrect date on first clickAngularJS Bootstrap-datepicker 弹出窗口在第一次点击时显示不正确的日期
【发布时间】：2016-08-01 15:31:39
【问题描述】：

我正在使用 Date 函数初始化模型并将其绑定到具有 datepicker 的输入。

<label>Begin Date</label>
<div class='input-group date'>
          <input ng-model="Main.BeginDate" class="form-control" onkeydown="return false" datepicker-popup="MM/dd/yyyy" show-weeks="false" is-open="BeginDate" ng-focus="BeginDate=true" ng-click="BeginDate=true" min-date="Main.MinDate" required/>
          <span class="input-group-addon">
               <span class="glyphicon glyphicon-calendar"></span>
          </span>
 </div>

第一次点击时，日期选择器会显示当前日期即使实际日期不同。然后再次单击输入时，日期选择器弹出窗口将重置为正确的日期。

我试过了：

使用$filter格式化日期
自定义new Date()函数
删除min-date 属性

如何让弹出窗口显示绑定到模型的日期？

我正在使用：

AngularJS v1.5.0
引导程序 v3.3.6
Angular-ui-bootstrap 版本：0.13.4

第一次点击 ------>>>>>

第二次点击----->>>>

【问题讨论】：

标签： angularjs datepicker bootstrap-datepicker

【解决方案1】：

我检查了情况，您使用的版本似乎存在某种冲突。如果我使用 angular 1.4.9 或更低版本并尝试您的代码似乎一切正常。这是一个plunker 向您展示。但是，一旦我使用 angular 1.5.0 或更高版本，我就会面临与您相同的问题。您可以使用 angular 1.4.9 和 angular-ui-bootstrap 0.13.4 或升级您的 angular ui bootstrap 版本。

index.html

 <!doctype html>
<html ng-app="app">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="DateCtrl" style="padding:40px">
  <label>Begin Date</label>
<div class='input-group date'>
          <input ng-model="dt" class="form-control" onkeydown="return false" datepicker-popup="MM/dd/yyyy" show-weeks="false" is-open="BeginDateOpen" ng-focus="BeginDateOpen=true" ng-click="BeginDateOpen=true" min-date="Main.MinDate" required/>
          <span class="input-group-addon">
               <span class="glyphicon glyphicon-calendar"></span>
          </span>
 </div>

</div>
  </body>
</html>

example.js

angular.module('app', ['ui.bootstrap']);
angular.module('app').controller('DateCtrl', function ($scope) {

$scope.today = function(){
  $scope.dt = new Date(1998,1,5)
}
$scope.today();
});

【讨论】：

谢谢。我无法将 Angular 更改为 1.5 以下，因为其他库依赖于该版本。我确实尝试将 UI-bootstrap 从 0.13.4 更改为 1.0.0 甚至 2.0.1。但是弹出窗口从未出现过。 plnkr.co/edit/15euZAV2vERLC6KS6Hgf 。但我找到了另一种解决方法。我已经添加了答案。谢谢。

【解决方案2】：

正如@Amit 所提到的，问题似乎是因为库版本之间的不兼容。

基于 here 提到的错误，添加属性 init-date 的解决方案有效。

<input ng-model="dt" class="form-control" 
        onkeydown="return false" datepicker-popup="MM/dd/yyyy" show-weeks="false" 
        is-open="BeginDateOpen" ng-focus="BeginDateOpen=true" ng-click="BeginDateOpen=true" 
        min-date="Main.MinDate" required
        init-date="dt"/>

这是plunker

【讨论】：