CODEWITHSUNDEEP
angularjsdatepickerangular-ui-bootstrap
user1030181
user1030181

Reputation: 2015

How to disable specific dates and weekends(sat/sun) using UI-B angular 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>

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 has

enter image description here

I have tried to disable weekends this way

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

            };

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

Upvotes: 0

Views: 1883

Answers (2)

Ric
Ric

Reputation: 11

if you simply disabled all SAT and SUN try

daysOfWeekDisabled: "0,6",

where 0 is sunday and 6 is saturday, dependig how your local calendar is

Upvotes: 0

Cameron Rodriguez
Cameron Rodriguez

Reputation: 146

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);
 }
}

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

Upvotes: 1

Related Questions