如何使用 UI-B 角度日期选择器禁用特定日期和周末（周六/周日）答案

【问题标题】：How to disable specific dates and weekends(sat/sun) using UI-B angular datepicker如何使用 UI-B 角度日期选择器禁用特定日期和周末（周六/周日）
【发布时间】：2017-03-28 18:26:49
【问题描述】：

我正在将 AngularJS-bootstrap css 用于组件（角度指令）。（ui.bootstrap.datepicker）。我正在调用一项服务来获取所有公共假期的列表。如何检查从日期选择器中选择的日期是否在该列表中。如果所选日期在该列表中，则禁用这些日期。我也想禁用周末（周六和周日）

<div class="form-group">
                                <div class="input-group datePicker">
                                    <input id="dt-processEndDate" name="dt-processEndDate" class="form-control"
                                           type="text" size="10" ng-model-options="{updateOn: 'default'}"
                                           required required-err-message="Process End Date is Required"
                                           uib-datepicker-popup="{{TestVm.datePickerFormat}}"
                                           ng-model="TestVm.processEndDate"
                                           is-open="TestVm.processEndDateDatePicker.isOpen"
                                           datepicker-options="TestVm.datePickerOptions"
                                           close-text="Close" alt-input-formats="TestVm.datePickerAltInputFormats" />
                                    <span class="input-group-btn">
                                        <button type="button" ng-model-options="{updateOn: 'default'}" class="btn btn-default" ng-click="TestVm.openProcessEndDateDatePicker()">
                                            <i class="glyphicon glyphicon-calendar"></i>
                                        </button>
                                    </span>
                                </div>
                            </div>

检索所有公共假期列表的 Angular 函数。 response.data 包含三个字段 Id、Description 和 HolidayDate

function publicHolidays() {
            holidayService.GetPublicHolidays().then(function (response) {
                $scope.holidays = response.data;
            })
        }

如何查看我的开始日期是否在此公共假期列表中，如果是则显示警报。还有如何排除周末

response.data有

我曾尝试以这种方式禁用周末

TestVm.datePickerOptions = {
                formatYear: 'yy',
                startingDay: 1,
                showWeeks: false,
                dateDisabled: myDisabledDates

            };

现在我想知道如何禁用 response.data.holidayDate 中的日期

【问题讨论】：

标签： angularjs datepicker angular-ui-bootstrap

【解决方案1】：

在您的 TestVm.datePickerOptions 中，您将添加一个名为 dateDisabled 的新属性并将其分配给将处理传入日期的函数，如 uib 的示例 https://plnkr.co/edit/y7MLqxjI73qAaHhapHj0?p=preview

$scope.TestVm.datePickerOptions = {
 ...
 dateDisabled : function disabled(data) {
  var date = data.date,
  mode = data.mode;
  return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
 }
}

但您将使用该函数根据您的假期列表检查传入日期，如果您希望禁用该日期，则返回 true

【讨论】：

我已经禁用了周末（周六和周日）。但我也有来自response.data 的公共假期列表，所以我怎样才能同时禁用这些公共假期以及周末。

【解决方案2】：

如果您只是禁用所有 SAT 和 SUN 尝试

daysOfWeekDisabled: "0,6",

0 是星期日，6 是星期六，这取决于你当地的日历是怎样的

【讨论】：