Question

在我们的项目中，我们在同一个表单上使用带有angularjs的多个日历（bootstrap datepicker）。当我们选择有效日期时，日历弹出窗口会关闭，但如果我们没有选择任何日期并单击同一页面（或表单）上的另一个日历按钮，则之前的日历将保持打开状态。我们希望在我们选中或点击任何其他按钮后立即关闭之前的日历。

我可以帮助解决这个问题。我们为每个日期弹出窗口使用不同的名称。

Answer 1

点击其他日期选择器时关闭多个日期选择器

实时代码 http://jsfiddle.net/RLQhh/1003/

 /****new min date code */
     $scope.dateChange = function(event){          
       var d= $scope.minDate1.setDate( $scope.dt.getDate() + 1);
       $scope.minDate1=new Date(d);
    }
     /****new min date code end */

  $scope.toggleMin = function() {
    $scope.minDate = $scope.minDate ? null : new Date();
       $scope.minDate1 = new Date();
  };

html代码

<h4>Start Date</h4>
    <div class="row">
        <div class="col-md-6">
            <p class="input-group">
              <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened1" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" ng-change="dateChange($event)"close-text="Close" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open1($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
        </div>
    </div>
    <h4>End Date</h4>
    <div class="row">
        <div class="col-md-6">
            <p class="input-group">
              <input type="text" ng-disabled="!dt" class="form-control" datepicker-popup="{{format}}" ng-model="dt2" is-open="opened2" min-date="minDate1" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
              <span class="input-group-btn">
                <button type="button" ng-disabled="!dt" class="btn btn-default" ng-click="open2($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
        </div>
    </div>

单击其他引导程序日期选择器日历按钮后，如何关闭引导日期选择器日历

1 个答案: