重叠日期框

Question

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

我为此使用 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"