Question

我正在使用AngularJS和UI Bootstrap编写应用程序，并且我正在尝试实现一种模式，用户可以在其中选择事件的开始日期和结束日期。我遇到的问题是，当用户选择结束日期时，开始日期也会受到影响，从而导致错误的值。

我在这里做了一个最小的测试用例：http://147.75.205.135/test/

~~（我尝试使用Plunkr重现它，但出于某种原因我没有在那里得到相同的行为）~~

Plunker链接：http://plnkr.co/edit/kika1viHi8csXMuklw8Z

要重新创建问题，请点击＆＃34;启动＆＃34;按钮，打开开始日期的日期选择器，然后单击右箭头转到下个月并选择日期。然后在结束日期，单击右箭头转到下个月并选择任何日期。然后点击＆＃34;保存＆＃34;。将显示一个警告框，显示开始日期和结束日期，但开始日期与在datepicker中选择的日期不对应，它设置为为结束日期选择的月份的第1天。

我已将其钉在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;
  }
};

在开始日期选择器上从ng-change调用。评论它会使奇怪的行为消失。但我不明白为什么会导致这个问题。我需要这个功能，以便当用户选择了开始日期时，会自动调整结束日期，使其永远不会在开始日期之前。

完整代码：

的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>

使用的版本

AngularJS：1.4.8
JQuery：2.1.4
UI-bootstrap：1.2.4

Answer 1

我遇到了同样的问题。问题是您在这里复制Date对象： $ scope.endDate = $ scope.startDate

只需将其更改为： $ scope.endDate = new Date（$ scope.startDate.getTime（））

使用AngularJS和UI Bootstrap的多个日期选择器的奇怪行为

1 个答案: