Disable/Enable selected date range on jQuery datepicker UI

Question

So I have the following demo http://dev.driz.co.uk/week.html that shows a jQuery UI datepicker that has multiple instances for each month of the year.

I\'ve modified

Answer 1

I used all the solutions but not worked but i made change in common jquery.datepick.js

Exisiting _isSelectable constructor function

_isSelectable: function(elem, date, onDate, minDate, maxDate) {
        var dateInfo = (typeof onDate === 'boolean' ? {selectable: onDate} :
            (!$.isFunction(onDate) ? {} : onDate.apply(elem, [date, true])));
        //This function is modified by Savata to Block fridays on homepage
        return (dateInfo.selectable !== false) &&
            (!minDate || date.getTime() >= minDate.getTime()) &&
            (!maxDate || date.getTime() <= maxDate.getTime());
    }

Changed to

_isSelectable: function(elem, date, onDate, minDate, maxDate) {
        var dateInfo = (typeof onDate === 'boolean' ? {selectable: onDate} :
            (!$.isFunction(onDate) ? {} : onDate.apply(elem, [date, true])));
        return (dateInfo.selectable !== false) &&
            (!minDate || date.getTime() >= minDate.getTime()) &&
            (!maxDate || date.getTime() <= maxDate.getTime()) && date.getDay() != 5;

/*Added last condition date.getDay() != 5 to block friday In your case change accordingly for sunday = 0 to saturday = 6 */ }

Answer 2

But how would I disable a range of dates? As I only have the start and end dates.

One way could be to create an array of dates based on the start and end dates that you have. Use that array in beforeShowDay to disable the range.

Demo: http://jsfiddle.net/abhitalks/FAt66/1/

For example, Relevant portions of JS:

var startDate = "2014-06-15", // some start date
    endDate  = "2014-06-21",  // some end date
    dateRange = [];           // array to hold the range

// populate the array
for (var d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)) {
    dateRange.push($.datepicker.formatDate('yy-mm-dd', d));
}

// use this array 
beforeShowDay: function (date) {
    var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
    return [dateRange.indexOf(dateString) == -1];
}

Now, you could set startDate and endDate whenever a date is selected. In the example fiddle I linked to above, the start and end dates are set whenever a date is selected in the two top inputs. The data array is populated when date is selected in the second input.

Note: The above example is additive, i.e. everytime you select a new range it gets added as disabled dates into the target. If you want to clear the existing disabled range before specifying a new range, then you could do a destroy and reattach the datepicker. (And also reset the dateRange array)

Demo 2: http://jsfiddle.net/abhitalks/FAt66/3/

Relevant portion of JS:

$("#dt").datepicker("destroy");
$("#dt").datepicker({ 
    dateFormat : 'yy-mm-dd',
    beforeShowDay: disableDates
});

var disableDates = function(dt) {
    var dateString = jQuery.datepicker.formatDate('yy-mm-dd', dt);
    return [dateRange.indexOf(dateString) == -1];
}

---

Looking at your actual code, all you need is this:

onSelect: function(dateText, inst) { 
    var date = $(this).datepicker('getDate');
    startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
    endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
    var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;

    addWeek($.datepicker.iso8601Week(new Date(dateText)), $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings ));

    for (var d = new Date(startDate);
        d <= new Date(endDate);
        d.setDate(d.getDate() + 1)) {
            dateRange.push($.datepicker.formatDate('dd/mm/yyyy', d));
    }

    selectCurrentWeek();
},
beforeShowDay: disableDates,
    ...

This will keep adding the newly selected date ranges to the array and will additively keep on disabling. But, be cautioned that you will need an escape route when an already selected week is removed. In that case, you may work with multiple array which can be coalesced into one master array.

Answer 3

If there is a requirement to disable a list of dates or like if in any reservation kind of projects where we have to disable some dates throughout the process. So you can use following code,

$(function() {
    //This array containes all the disabled array
      datesToBeDisabled = ["2019-03-25", "2019-03-28"];

        $("#datepicker").datepicker({
          changeMonth: true,
          changeYear: true,
          minDate : 0,
          todayHighlight: 1,
          beforeShowDay: function (date) {
              var dateStr = jQuery.datepicker.formatDate('yy-mm-dd', date);
                  return [datesToBeDisabled.indexOf(dateStr) == -1];
          },

        });
});