如何使用UI-B angular datepicker禁用特定日期和周末(星期六/星期日)

Question

我使用AngularJS-bootstrap css作为组件(angular指令)。(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中的日期

Answer 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

Answer 2

如果您只是禁用了所有SAT和SUN try

daysOfWeekDisabled: "0,6",

其中0是周日，6是周六，具体取决于您当地的日历