使用 Bootstrap 日期选择器禁用日期

Question

我正在尝试使用datepicker 控件禁用某些日期（最终通过我提供的数组）。然而，似乎没有任何有用的东西被传递给dateDisabled 函数。当我在开发人员工具中设置断点时，第一个变量（在文档示例中设置为 data）只是数字零。

我已验证该选项本身有效，因为空白返回 true 会禁用所有日期。我必须做什么才能获得有效的输入？

注意：我刚刚发现我们使用的是 angular-ui-bootstrap 版本 0.12.1。

JS

    //options object for the datepicker control
    $scope.dateOptions = {
        dateDisabled: disableDates,
        formatYear: "yyyy"
    };

    // Disable weekend selection
    function disableDates(date, mode) {
        //return mode === 'day' && (date.getDay() === 5 || date.getDay() === 6);
        //return true;
        return date === new Date(2016, 6, 18);
    }

    //Set the calendar open
    $scope.openCalendar = function (e) {
        e.preventDefault();
        e.stopPropagation();
        $scope.vm.is_cal_open = !$scope.vm.is_cal_open;
    };

    $scope.hasInvalidErrorDate = function (date) {
        if (!date || date <= Date.parse("1/1/1900")) {
            return true;
        }

        return false;
    };

    $scope.earliestErrorDate = Date.parse("1/1/1900");

HTML

<div class="col-sm-4">
    <!-- Error Date -->
    <div class="form-group" ng-class="{'has-error': hasInvalidErrorDate(vm.data.adjustment.error_date) && form.$dirty}">
        <label for="error_date">Error Date</label>
        <p class="input-group calendar-wrapper">
            <!--input disabled the input so that it forces users to use the date picker and therfore ensure good input-->
            <input type="text" datepicker-popup="MM/dd/yyyy"
                   title="Click the calendar button"
                   name="error_date"
                   datepicker-options="dateOptions"
                   class="form-control"
                   is-open="vm.is_cal_open"
                   width="5"
                   ng-disabled="true"
                   ng-model="vm.data.adjustment.error_date"
                   min-date="dateOptions.minDate" />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default delegate-cal-btn" ng-click="openCalendar($event)"><i class="fa fa-calendar"></i></button>
            </span>
        </p>
        <span class="text-danger small" ng-show="hasInvalidErrorDate(vm.data.adjustment.error_date) && form.$dirty">
            Please select an error date
        </span>
    </div>
</div>

Answer 1

工作得很好。

$scope.today = function() {
                                $scope.dt = new Date();
                            };
                            $scope.today();

                        $scope.clear = function() {
                            $scope.dt = null;
                        };

                        $scope.inlineOptions = {
                            customClass : getDayClass,
                            minDate : new Date(),
                            showWeeks : true
                        };

                        $scope.dateOptions = {

                            formatYear : 'yy',
                            maxDate : new Date(2199, 12, 31),
                            minDate : new Date(),
                            startingDay : 1
                        };

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

                        $scope.toggleMin();

                        $scope.open1 = function() {
                            $scope.popup1.opened = true;
                        };

                        /*
                         * $scope.open2 = function() { $scope.popup2.opened =
                         * true; };
                         */

                        $scope.setDate = function(year, month, day) {
                            $scope.dt = new Date(year, month, day);
                        };

                        $scope.formats = [ 'dd-MMMM-yyyy', 'yyyy/MM/dd',
                                'dd.MM.yyyy', 'shortDate' ];
                        $scope.format = $scope.formats[0];
                        $scope.altInputFormats = [ 'M!/d!/yyyy' ];

                        $scope.popup1 = {
                            opened : false
                        };

                         $scope.dateOptions = {
                                    dateDisabled: disabled,
                                    formatYear: 'yy',
                                    maxDate: new Date(2020, 5, 22),
                                    minDate: new Date(),
                                    startingDay: 1
                                  };

                         // Disable weekend selection
                          function disabled(data) {
                            var date = data.date,
                              mode = data.mode;
                            return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
                          }


                        /*
                         * $scope.popup2 = { opened : false };
                         */
                        var tomorrow = new Date();
                        tomorrow.setDate(tomorrow.getDate() + 1);
                        var afterTomorrow = new Date();
                        afterTomorrow.setDate(tomorrow.getDate() + 1);
                        $scope.events = [ {
                            date : tomorrow,
                            status : 'full'
                        }, {
                            date : afterTomorrow,
                            status : 'partially'
                        } ];

                        function getDayClass(data) {
                            var date = data.date, mode = data.mode;
                            if (mode === 'day') {
                                var dayToCheck = new Date(date).setHours(0,
                                        0, 0, 0);

                                for (var i = 0; i < $scope.events.length; i++) {
                                    var currentDay = new Date(
                                            $scope.events[i].date)
                                            .setHours(0, 0, 0, 0);

                                    if (dayToCheck === currentDay) {
                                        return $scope.events[i].status;
                                    }
                                }
                            }

                            return '';
                        }