How to disable specific date in jQuery calendar control

In this jQuery tutorial, we will discuss how to disable specific date in jQuery calendar control.

Here, we have used in an asp.net application.

Disable specific date in jQuery calendar control

Here, I have created an asp.net web application. And in that application, I have added a textbox control on the page. This will show you a calendar in the textbox click.

<asp:TextBox ID="txtEffectiveDate" runat="server" CssClass="Calender disableTyping"></asp:TextBox>

Next here is my Script which will create a calendar in textbox click event.

jQuery calendar control
$('#<%= txtEffectiveDate.ClientID %>').datepicker({
            dateFormat: 'mm/dd/yy',
            changeMonth: true,
            changeYear: true,
            endDate: "today",
            maxDate: today,
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: '/Style Library/Images/calendar.png'
        });
    });

Now you can see all dates are enabled here except the weekend in the jQuery calendar control.

Disable specific date in jQuery calendar control

Now I will disable the specific date so that the user can’t select in the Calendar. So just create an array and define the date which you want to disable in the jQuery calendar control.

How to disable specific date in jQuery calendar control
var $myBadDates = new Array("11 July 2020","12 July 2020","13 July 2020","14 July 2020","05 August 2020","06 August 2020");

    function checkBadDates(mydate) {
        var $return = true;
        var $returnclass = "available";
        $checkdate = $.datepicker.formatDate('dd MM yy', mydate);
        for (var i = 0; i < $myBadDates.length; i++) {
            if ($myBadDates[i] == $checkdate) {
                $return = false;
                $returnclass = "unavailable";
            }
        }
        return [$return, $returnclass];
    }
    $('.disableTyping').keypress(function (e) {
        return false
    });

Next I am calling this method while calling to DatePicker in my code.

disable specific date in jQuery calendar control
 $('#<%= txtEffectiveDate.ClientID %>').datepicker({
            dateFormat: 'mm/dd/yy',
            changeMonth: true,
            changeYear: true,
            endDate: "today",
            maxDate: today,
            showOn: 'button',
            buttonImageOnly: true,
            beforeShowDay: checkBadDates,
            buttonImage: '/Style Library/Images/calendar.png'
        });

    });

Now go to the calendar and see the date which you have given here. That must be disabled in your jQuery calendar control.

jQuery calendar control

You may like the following jQuery articles:

This is how we can disable specific dates in jQuery calendar control in Asp.Net.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>