如何使用UI-B角度日期戳来禁用特定的日期和周末（sat / sun） [英] How to disable specific dates and weekends(sat/sun) using UI-B angular datepicker

问题描述

我正在使用AngularJS-bootstrap css进行组件（角度指令）（ui.bootstrap.datepicker）。我打电话给服务，以获得公共假期的所有清单。如何检查日期选择器中的选择日期是否在该列表中。如果选择的日期在该列表中，则禁用这些日期。我也想禁用周末（星期六和星期日）

I am using AngularJS-bootstrap css for components(angular directives).(ui.bootstrap.datepicker). I am calling a service to get all the list of public holidays. How to check if selected date from date picker is in that list or not. If selected date is in that list then disable those date. I also want to disable weekends(Saturday and Sunday)

<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>

检索所有公共假期列表的角度函数。 response.data有三个字段Id，Description和HolidayDate

Angular Function which retrieves list of all public holidays. response.data has three fields Id, Description and HolidayDate

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

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

How can see if my start date is in this list of public holidays and if yes show an alert. Also how can I exclude weekends

response.data 有

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

I have tried to disable weekends this way

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

            };

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

Now I want to know how can I disable those dates which are in response.data.holidayDate

推荐答案

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

In your TestVm.datePickerOptions, you'll add a new property called dateDisabled and assign it to a function that will handle incoming dates like in uib's example 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

But you'll use the function to check an incoming date against your holiday list and return true if you want the day disabled

这篇关于如何使用UI-B角度日期戳来禁用特定的日期和周末（sat / sun）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！