Question

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

我正在使用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"

重叠日期框

1 个答案: