如何仅在单击外部时关闭 uib-datepicker？

Question

我需要使用以下uib-datepicker选择多个日期，然后在外部单击时将其关闭。

<div class="date-multi-select" uib-dropdown is-open="$ctrl.isOpen">
    <div class="input-group">
        <input type="text"
               class="form-control"
               placeholder="{{ $ctrl.placeholder }}"
               ng-model="$ctrl.value"
               ng-required="$ctrl.required"
               ng-disabled="$ctrl.disabled"
               ng-click="$ctrl.isOpen = true"
               ng-blur="$ctrl.toggleOpen($event)"
               ng-readonly="true">

        <div class="input-group-btn addon-button">
            <button type="button" class="btn btn-default" ng-click="$ctrl.toggleOpen($event)">
                <i class="far fa-calendar-alt"></i>
            </button>
        </div>
    </div>

    <div class="dropdown-menu" uib-dropdown-menu>
        <div uib-datepicker
             ng-model="$ctrl.dt"
             datepicker-options="$ctrl.dateOptions"
             multi-select="$ctrl.dates"
             template-url="datepicker-multi-select.html"
             ng-change="$ctrl.onDateChange()">
        </div>
    </div>
</div>

由于某种原因，我的 controller 无法正常工作（单击时日期选择器关闭）。

        self.toggleOpen = function (event) {
            if (event.relatedTarget.classList[0] === "btn") {
                self.isOpen = true;
            } else {
                self.isOpen = !self.isOpen;
            }
        };

如果我在父div中使用auto-close="disabled"或auto-close="outsideClick" ，日期选择器将不会关闭。

Answer 1

Controller：

angular.module('bdbDateMultiSelect')
    .component('bdbDateMultiSelect', {
        templateUrl: bdbTemplate('/js/angular/template/bdbDateMultiSelect.template.html'),
        bindings: {
            dates: '=',
            initValue: '=',
            identifier: '<',
            placeholder: '<',
            disabled: '<',
            minDate: '<',
            maxDate: '<',
            required: '=ngRequired'
        },
        controller: ['$scope', '$timeout', function ($scope, $timeout) {
            var self = this;

            self.value = '';
            self.isOpen = false;

            self.dateOptions = {
                startingDay: 1,
                showWeeks: false,
                customClass: getCustomClass,

            };

            self.$onInit = function () {
                self.dates = [];
                self.setPreDefinedDate();

                if (self.initValue) {
                    self.onDateChange();
                }
            };

            self.setPreDefinedDate = function () {

                for (var i = 0; i < self.dates.length; i++) {
                    self.dates[i] = moment(self.dates[i]).toDate();
                }

                if (angular.isDefined(self.minDate)) {
                    self.minDate = moment(self.minDate).toDate();
                    self.dateOptions.minDate = self.minDate;
                }
                if (angular.isDefined(self.maxDate)) {
                    self.maxDate = moment(self.maxDate).toDate();
                    self.dateOptions.maxDate = self.maxDate;
                }

                if (!angular.isDefined(self.placeholder)) {
                    self.placeholder = "Välj datum..."
                }
            };

            self.onDateChange = function () {
                $timeout(function () {
                    var value = '';

                    self.dates
                        .sort(function (date1, date2) {
                            return date1 - date2;
                        })
                        .forEach(function (date, i) {
                            value += moment(date).format("YYYY-MM-DD");

                            if ((i + 1) < self.dates.length) {
                                value += ', ';
                            }
                        });
                    self.value = value;
                });
            };

            self.close = function () {
                if (self.isOpen === true) {
                    self.isOpen = false;
                }
            };

            function getCustomClass(data) {
                var customClass = '';

                if (data.mode === 'day') {
                    var month = data.date.getMonth();
                    var activeMonth = this.datepicker.activeDate.getMonth();

                    if (month === activeMonth) {
                        customClass = 'active-day';
                    }
                }

                return customClass;
            }
        }]

    })
    .directive('onDateMultiSelectDocumentClick', [  //  closes datepicker when clicked outside
        function () {
            return {
                restrict: 'A',
                link: function (scope, element) {
                    element.on('click', function (e) {
                        e.stopPropagation();
                    });
                }
            }
        }
    ]);

模板：

<link href="/js/angular/template/bdbDateMultiSelect.css?v=1" rel="stylesheet"/>

<div class="date-multi-select" uib-dropdown is-open="$ctrl.isOpen" on-date-multi-select-document-click="$ctrl.close()">
    <div class="input-group">
        <input type="text"
               class="form-control"
               placeholder="{{ $ctrl.placeholder }}"
               ng-model="$ctrl.value"
               ng-required="$ctrl.required"
               ng-disabled="$ctrl.disabled"
               ng-click="$ctrl.isOpen = true"
               ng-readonly="true">

        <div class="input-group-btn addon-button">
            <button type="button" class="btn btn-default" ng-click="$ctrl.isOpen = true">
                <i class="far fa-calendar-alt"></i>
            </button>
        </div>
    </div>

    <div class="dropdown-menu" uib-dropdown-menu>
        <div uib-datepicker
             ng-model="$ctrl.dt"
             datepicker-options="$ctrl.dateOptions"
             multi-select="$ctrl.dates"
             template-url="datepicker-multi-select.html"
             ng-change="$ctrl.onDateChange()">
        </div>
    </div>
</div>

<script type="text/ng-template" id="datepicker-multi-select.html">
    <div ng-switch="datepickerMode">
        <div uib-daypicker ng-switch-when="day" tabindex="0" class="uib-daypicker" template-url="multiday.html"></div>
        <div uib-monthpicker ng-switch-when="month" tabindex="0" class="uib-monthpicker"></div>
        <div uib-yearpicker ng-switch-when="year" tabindex="0" class="uib-yearpicker"></div>
    </div>
</script>

<script type="text/ng-template" id="multiday.html">
    <table class="table" role="grid" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}">
        <thead>
        <tr>
            <th>
                <button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="-1">
                    <i aria-hidden="true" class="glyphicon glyphicon-chevron-left"></i><span class="sr-only">previous</span>
                </button>
            </th>

            <!--    Month and year in calender  -->
            <th colspan="{{::5 + showWeeks}}">
                <button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1">
                    <strong>{{title}}</strong>
                </button>
            </th>
            <th>
                <button type="button" class="btn btn-default btn-sm pull-right uib-right" ng-click="move(1)" tabindex="-1">
                    <i aria-hidden="true" class="glyphicon glyphicon-chevron-right"></i>
                    <span class="sr-only">next</span>
                </button>
            </th>
        </tr>
        <tr>
            <th ng-if="showWeeks" class="text-center"></th>
            <th ng-repeat="label in ::labels track by $index" class="text-center"><small aria-label="{{::label.full}}">{{::label.abbr}}</small></th>
        </tr>
        </thead>

        <!--    Dates in calender   -->
        <tbody>
        <tr class="uib-weeks" ng-repeat="row in rows track by $index" role="row">
            <td ng-if="showWeeks" class="text-center h6"><em>{{ weekNumbers[$index] }}</em></td>

            <td ng-repeat="dt in row" class="uib-day text-center" role="gridcell" id="{{::dt.uid}}" ng-class="::dt.customClass">
                <button type="button"
                        class="btn btn-default btn-sm"
                        ng-class="{ 'btn-info': dt.selected }"
                        ng-click="select(dt.date)"
                        ng-disabled="::dt.disabled"
                        tabindex="-1">
                    <!--'uib-is-class="'btn-info' for selectedDt, 'active' for activeDt on dt"-->
                    <span ng-class="::{'text-muted': dt.secondary, 'text-info': dt.current}">{{::dt.label}}</span>
                </button>
            </td>
        </tr>
        </tbody>
    </table>
</script>