CODEWITHSUNDEEP
angularjsdatepickerbootstrap-datepicker
Mahesh
Mahesh

Reputation: 3997

AngularJS Bootstrap-datepicker popup shows incorrect date on first click

I am initilizing a model with a Date function and binding it to an input which has a 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>

On first click, the datepicker shows the current date even though the actual date is different. Then on clicking the input again, the datepicker-popup resets to the correct date.

I tried:

How do I get the popup to show the date bound to the model?

I am using:

First click ------>>>>> enter image description here

Second click ----->>>>enter image description here

Upvotes: 0

Views: 1288

Answers (2)

Mahesh
Mahesh

Reputation: 3997

As mentioned by @Amit, the issue seems to be because of the incompatibilities between the versions of the libraries.

Based on the bug mentioned here, the solution to add atttribute init-date worked. 

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

Here is a plunker

Upvotes: 1

Amit
Amit

Reputation: 436

I checked the situation and seems like the versions that you are using are somehow conflicting. If i use angular 1.4.9 or below and try your code all seems to work. Here is a plunker to show you that. But as soon as I use angular 1.5.0 or above I face the same issue as you. You could use angular 1.4.9 and angular-ui-bootstrap 0.13.4 or upgrade your angular ui bootstrap version.

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();
});

Upvotes: 1

Related Questions