Highlight, Disable specific days in jQuery UI datepicker

Question

Here, i want to achieve following

Highlight all holidays in date-picker
Disable specific days in date-picker
Disable specific weekends in date-picker

I have snippets of each separately, but i want all together

Highlight holidays

var holydays = ['10/17/2013', '10/18/2013', '11/2/2013'];

function highlightDays(date) {
    for (var i = 0; i < holydays.length; i++) {
        if (new Date(holydays[i]).toString() == date.toString()) {
            return [true, 'highlight'];
        }
    }
    return [true, ''];

}

$(function () {
    $("#dp").datepicker({
        minDate: 0,
        dateFormat: 'mm/dd/yy',
        inline: true,
        numberOfMonths: [1, 2],
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        beforeShowDay: highlightDays,
    });
});

Disable specific days

var disabledDays = ["10-20-2013", "10-21-2013", "11-15-2013", "11-17-2013"];
    function disableAllTheseDays(date) {
        var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
        for (i = 0; i < disabledDays.length; i++) {
            if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
                return [false];
            }
        }
        return [true];
    }

Disable Weekends

$(function() {
        $( "#availability" ).datepicker({
            minDate: 0,
            dateFormat: 'mm/dd/yy',
            inline: true,
            numberOfMonths: [1, 2],
            dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            beforeShowDay: $.datepicker.noWeekends
        });
    });

Could anyone help me..

Thanks in advance.

In "Disable specific days" the for loop is not needed for (i = 0; i < disabledDays.length; i++) The inner code is enough if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) { return [false]; } — Nomikos Strigkos
– Nomikos Strigkos, Commented Dec 3, 2020 at 10:57

babonamu · Accepted Answer · 2013-10-16 07:07:59Z

5

change :

$(function () {
    $("#dp").datepicker({
        minDate: 0,
        dateFormat: 'mm/dd/yy',
        inline: true,
        numberOfMonths: [1, 2],
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        beforeShowDay: setCustomDate // <-----change function
    });
});

add function :

function setCustomDate(date) {
    var clazz = "";
    var arr1 = highlightDays(date);
    if (arr1[1] != "") clazz = arr1[1];

    var arr2 = disableAllTheseDays(date);
    var arr3 = $.datepicker.noWeekends(date);

    return [(!arr2[0] || !arr3[0]) ? false : true, clazz];
}

answered Oct 16, 2013 at 7:07

babonamu

3971 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Heemanshu Bhalla Over a year ago

if have js array of closed days how can we pass that

Chim · Accepted Answer · 2014-02-12 15:43:02Z

We are now in 2014, and a minimal code is required. Here is my way to disable days.

my variable 'specific' , 0 <= specific <= 7

in my demo :

1 = sunday 2 = saturday 4 = Monday to friday

if specific == 5 that mean 4 + 1 so i allow Monday till friday + sunday.

7 means all days allowed to pick. notice that I only allow to pick starting now to Month + 1

$( "#datepicker" ).datepicker({
    minDate:0,
    maxDate: '+1M-1D',
    dateFormat: "yy-mm-dd",
    beforeShowDay: function(date) {
        var day = date.getDay();
        if(day == 6)
            return [(specific & 2) > 0, ''];
        else if(day == 0)
            return [(specific & 1) > 0, ''];
        else
            return [(specific & 4) > 0, ''];
    }
});

Mario Chueca · Accepted Answer · 2016-03-29 09:27:15Z

Just for future references. Since I was looking for the same thing and found these same function to disable days in a lot of different places:

http://www.spiceforms.com/blog/how-to-disable-dates-in-jquery-datepicker-a-short-guide/ https://davidwalsh.name/jquery-datepicker-disable-days

var disabledDays = ["10-20-2013", "10-21-2013", "11-15-2013", "11-17-2013"];

function disableAllTheseDays(date) {
     var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
     for (i = 0; i < disabledDays.length; i++) {
         if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
             return [false];
         }
     }
     return [true];
}

But since you're using inArray, the for is not needed, resulting in this simpler and more efficient function:

var disabledDays = ["4-2-2016", "4-4-2016"];

function disableAllTheseDays(date) {
     var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
     if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) return [false];
     return [true];
}

civid · Accepted Answer · 2018-10-04 10:37:56Z

0

This one works for me. Placed before closing body tag.

function DisableMonday(date) {
      var day = date.getDay();
     if (day == 1) {
     return [false,"","Unavailable"] ; 
     } else { 
     return [true] ;
     } 
    }
    jQuery(function($){
        $('input[name="datum"]').datepicker('option', 'beforeShowDay', DisableMonday).datepicker('refresh');
    });

answered Oct 4, 2018 at 10:37

civid

11 bronze badge

Comments

Simp Coder · Accepted Answer · 2024-02-05 13:49:45Z

modify the allowed_weekdays variable for your requirement using this you can restrict the dates for the particular weekday

var allowed_weekdays = ['1', '2', '3', '4', '5', '6', '7']; // 1 for Sunday to 7 for Saturday

    // Function to check if a date is in the allowed weekdays
    function isAllowedWeekday(date) {
        var day = date.getDay() + 1;  // Adding 1 to match your allowed_weekdays array
        return allowed_weekdays.includes(day.toString());
    }

    // Initialize datepicker
    $(".datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        beforeShowDay: function(date) {
            // Disable all dates except those in allowed weekdays
            return [isAllowedWeekday(date), ""];
        }
    }).attr("readonly", "readonly");

Collectives™ on Stack Overflow

Highlight, Disable specific days in jQuery UI datepicker

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related