CODEWITHSUNDEEP
angularjsangular-ui-bootstrapwatchbootstrap-datepicker
Petter
Petter

Reputation: 4165

Odd behaviour with multiple datepickers using AngularJS and UI Bootstrap

I'm writing an app using AngularJS and UI Bootstrap, and I'm trying to implement a modal where the user can choose a start date and an end date for an event. The problem I'm having is that when the user is chosing an end date, the start date is affected as well, leading to incorrect values.

I have made a minimal test case here: http://147.75.205.135/test/

(I tried to reproduce it using Plunkr, but for some reason I didn't get the same behaviour there)

Plunker link: http://plnkr.co/edit/kika1viHi8csXMuklw8Z

To recreate the issue, click the "Launch" button, open up the datepicker for the start date, and click the right arrow to go to the next month and choose a date. Then for the end date, click the right arrow to go to the next month and pick any date. Then click "Save". An alert box will show up displaying the start and end date, but the start date does not correspond to the one chosen in the datepicker, it is set to the 1st of the month chosen for the end date.

I have nailed it down to the following function in http://147.75.205.135/test/script/angular/main.js:

$scope.adjustEndDate =  function() {
  if ($scope.endDate < $scope.startDate) {
    console.log("Adjusting end date to " + $scope.startDate);
    $scope.endDate = $scope.startDate;
  }
};

It is called from ng-change on the start date picker. Commenting it out makes the odd behaviour go away. But I don't understand why it would cause this issue. I need this function so that when the user has chosen a start date, the end date is automatically adjusted so that it is never before the start date.

Complete code:

index.html

<!doctype html>
<html>
<head>
  <title>Test page</title>

  <link rel="stylesheet" href="bootswatch-dist/css/bootstrap.min.css"></link>
  <link rel="stylesheet" href="css/main.css"></link>

  <script>
var conf = {
  templates: {
    datepickModal: "script/angular/templates/datepickModal.html"
      }
};
  </script>
  <script src="angular/angular.js" ></script>
  <script src="jquery/dist/jquery.min.js"></script>
  <script src="angular-animate/angular-animate.js"></script>
  <script src="angular-bootstrap/ui-bootstrap.js"></script>
  <script src="angular-bootstrap/ui-bootstrap-tpls.js"></script>
  <script src="script/angular/main.js"></script>

</head>
<body data-ng-app="mainApp">
    <div id="main" ng-controller="testCtrl">
        <button ng-click="openModal()">Launch modal</button>
    </div>
</body>
</html>

main.js

+function(angular, d3) {
  "use strict";
  var app = angular.module('mainApp', ['ui.bootstrap']);


  app.controller('datepickCtrl', ['$scope', '$rootScope', '$uibModalInstance', function($scope, $rootScope, $uibModalInstance) {
    $scope.startDate = new Date();
    $scope.endDate = new Date();
    $scope.startOpened = false;
    $scope.endOpened = false;
    $scope.name = '';
    $scope.mode = 'list';
    $scope.save = function () {
      alert("Saving dates start: " + $scope.startDate + " and end " +     $scope.endDate);
    };
    $scope.cancel = function () {
      $uibModalInstance.dismiss('cancel');
    };
    $scope.toggleStartCalendar = function($event) {
      $event.preventDefault();
      $event.stopPropagation();

      $scope.startOpened = !$scope.startOpened;
    };
    $scope.toggleEndCalendar = function($event) {
      $event.preventDefault();
      $event.stopPropagation();

      $scope.endOpened = !$scope.endOpened;
    };
    $scope.dateOptions = {
      formatYear: 'yy',
      startingDay: 1
    };

    $scope.setMode = function(mode) {
      $scope.mode = mode;
    }

    $scope.cancel = function () {
      $uibModalInstance.dismiss('cancel');
    };


    $scope.adjustEndDate =  function() {
      if ($scope.endDate < $scope.startDate) {
        console.log("Adjusting end date to " + $scope.startDate);
        $scope.endDate = $scope.startDate;
      }
    };

    $scope.adjustStartDate = function() {
      if ($scope.startDate > $scope.endDate) {
        console.log("Adjusting start date to " + $scope.endDate);
        $scope.startDate = $scope.endDate;
      }
    };

  }]);

  app.controller('testCtrl', ['$scope', '$rootScope', '$uibModal',     function($scope, $rootScope, $uibModal) {

    $scope.openModal = function() {
      if (conf.suspended) {
        return;
      }
      var modalInstance = $uibModal.open({
        animation: true,
        templateUrl: conf.templates.datepickModal,
        controller: 'datepickCtrl',
        size: 'md'
      });
    };
  }]);
}(window.angular, window.d3);

modal.html

<div class="modal-header">
  <h3 class="modal-title">Datepick tester</h3>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-md-6">
            <p class="input-group">
              <label for="startdate">Start date</label><p class="input-group">
              <input type="text" class="form-control" uib-datepicker-popup ng-model="startDate" ng-change="adjustEndDate()" is-open="startOpened" ng-required="true" uib-datepicker-options="dateOptions" name="startdate" ng-click="toggleStartCalendar($event)"/>
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="toggleStartCalendar($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
        </div>
        <div class="col-md-6">
          <p class="input-group">
            <label for="enddate">End date</label><p class="input-group">
            <input type="text" class="form-control" uib-datepicker-popup ng-model="endDate" is-open="endOpened" ng-change="adjustStartDate()" ng-required="true" uib-datepicker-options="dateOptions" name="enddate" ng-click="toggleEndCalendar($event)"/>
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="toggleEndCalendar($event)"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
          </p>
        </div>
    </div>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="save()">Save</button>
  <button class="btn btn-warning" ng-click="cancel()">Close</button>
</div>

Versions used

Upvotes: 2

Views: 970

Answers (1)

Thomas Stark
Thomas Stark

Reputation: 26

I had the same problem. The issue is that you are copying the Date object here: $scope.endDate = $scope.startDate

Just change it to: $scope.endDate = new Date($scope.startDate.getTime())

Upvotes: 1

Related Questions