Question

我正在使用AngularJS-bootstrap css作为组件（angular directives）。（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 Function，用于检索所有公共假期的列表。 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尝试

daysOfWeekDisabled: "0,6",

其中0表示星期日，6表示星期六，取决于您的本地日历

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

2 个答案: