javascript - 重叠的日期框

Question

我正在尝试在屏幕上显示多个日期。目前，当用户单击日期按钮时，它将打开一个日期选择器。如果用户单击框外的按钮，日期选择器将按照正常 react 关闭。但是，如果用户单击另一个日期选择器按钮，日期选择器将不会关闭，而是会打开另一个日期选择器窗口并将其重叠。 [我尝试上传图片]

我为此使用 Angular-UI。 http://angular-ui.github.io/bootstrap/ 我相信这是一个错误？单击不同按钮时是否有快速禁用第一个框的方法？

谢谢!

编辑: 使用的代码在这里:

<div class="row">
                <p class="input-group">
                    <input type="text" class="form-control dateTextField" datepicker-popup="{{format}}" ng-model="search.minOrderTime" is-open="minordertime" datepicker-options="dateOptions" close-text="Close" />
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default dateButton" ng-click="openDate($event,'minordertime')"><i class="glyphicon glyphicon-calendar"></i></button>
                            </span>
                </p>
            </div>

            <b>Max Order Time:</b>
            <div class="row">
                <p class="input-group">
                    <input type="text" class="form-control dateTextField" datepicker-popup="{{format}}" ng-model="search.maxOrderTime" is-open="maxordertime" datepicker-options="dateOptions" min-date="minDate" date-disabled="disabled(date, mode)" close-text="Close" />
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default dateButton" ng-click="openDate($event, 'maxordertime')"><i class="glyphicon glyphicon-calendar"></i></button>
                            </span>
                </p>

            </div>

            <b>min Last Modified:</b>
            <div class="row">
                <p class="input-group">
                    <input type="text" class="form-control dateTextField" datepicker-popup="{{format}}" ng-model="search.minLastModified" is-open="minlastmodified" datepicker-options="dateOptions" min-date="minDate" date-disabled="disabled(date, mode)" close-text="Close" />
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default dateButton" ng-click="openDate($event, 'minlastmodified')"><i class="glyphicon glyphicon-calendar"></i></button>
                            </span>
                </p>
            </div>

            <b>Max Last Modified:</b>
            <div class="row">
                <p class="input-group">
                    <input type="text" class="form-control dateTextField" datepicker-popup="{{format}}" ng-model="search.maxLastModified" is-open="maxlastmodified" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" close-text="Close" />
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default dateButton" ng-click="openDate($event,'maxlastmodified')"><i class="glyphicon glyphicon-calendar"></i></button>
                            </span>
                </p>
            </div>

            <b>Order Date:</b>
            <div class="row">
                <p class="input-group">
                    <input type="text" class="form-control dateTextField" datepicker-popup="{{format}}" ng-model="search.orderDate" is-open="orderdate" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" close-text="Close" />
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default dateButton" ng-click="openDate($event,'orderdate')"><i class="glyphicon glyphicon-calendar"></i></button>
                            </span>
                </p>
            </div>

Javascript:

  $scope.openDate = function ($event, opened) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope[opened] = true;
};

Answer 1

使用对象来存储当前打开的日期选择器，而不是直接存储在 $scope 上。这样，当您打开一个新的选择器时，您可以通过编写 $scope.openPicker = {} 并分配新的打开选择器 $scope.openPicker[opened] 轻松清除所有选择器

Working plunkr

只需记住更改您的 is-open 以包含该对象:is-open="openPicker.yourPicker"