How to Disable Dates in jQuery Datepicker

The jQuery Datepicker is a versatile tool that allows you to disable specific dates, ranges of dates, or even weekdays to prevent users from selecting them. This feature can be useful for various applications, such as booking systems or event scheduling. In this tutorial, we will learn how to disable dates in the jQuery Datepicker.

Step 1: Include jQuery and jQuery UI

First, ensure that you have included the jQuery and jQuery UI libraries in your HTML file. You can use the following CDN links:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    

Step 2: Create an Input Field

Create an input field where the datepicker will be applied:

<input type="text" id="datepicker" placeholder="Select a date">
    

Step 3: Initialize the Datepicker

Next, initialize the datepicker in your script. Add the following code at the bottom of your HTML file:

<script>
$(document).ready(function() {
    $('#datepicker').datepicker();
});
</script>
    

Step 4: Disable Specific Dates

To disable specific dates, you can use the beforeShowDay option. This option allows you to provide a function that returns an array. The first element of the array indicates whether the date is selectable (true or false), and the second element can provide additional CSS classes:

<script>
$(document).ready(function() {
    var disabledDates = ["10/10/2024", "10/12/2024", "10/15/2024"]; // Dates to disable

    $('#datepicker').datepicker({
        beforeShowDay: function(date) {
            var formattedDate = $.datepicker.formatDate('mm/dd/yy', date);
            return [disabledDates.indexOf(formattedDate) === -1]; // Disable if the date is in the disabledDates array
        }
    });
});
</script>
    

Step 5: Disable Weekdays

If you want to disable specific weekdays, you can modify the beforeShowDay function to check the day of the week:

<script>
$(document).ready(function() {
    $('#datepicker').datepicker({
        beforeShowDay: function(date) {
            var day = date.getDay(); // Get the day of the week (0 = Sunday, 1 = Monday, etc.)
            return [day !== 0 && day !== 6]; // Disable Sundays (0) and Saturdays (6)
        }
    });
});
</script>
    

Final Thoughts

In this tutorial, you learned how to disable specific dates and weekdays in the jQuery Datepicker. This feature can help streamline user interaction and prevent invalid selections in your applications. Experiment with the datepicker options to customize it further to meet your needs!