Disable Specific Dates in jQuery Datepicker

6 mins0
How to disable specific dates in datepicker

Disable Specific Dates in jQuery Datepicker is useful when you want to prevent users from selecting certain dates, like holidays or special events. In web development, collecting date input from users is common, and the jQuery Datepicker provides a smooth interface and many helpful features, such as setting start and end dates and formatting dates for display.

Sometimes, you need to block specific dates to maintain accurate data. Without a datepicker, you would have to validate user input manually, but jQuery Datepicker allows you to disable specific dates in jQuery Datepicker easily while users select their dates.

For example, we are creating HRMS or a school application that has a leave module. So it is normal to take leave on working days only. Users can not apply for leave on holidays or exam days. In this example, we will disable a few dates like holidays from the date picker.

<!DOCTYPE html>
<html>
<head>
    <title>Disable Specific Date In jQuery Datepicker</title>
    <link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <h2>How To Disable Some Dates In jQuery Datepicker</h2>
        <div class="row mt-3">
            <div class="col-md-12 form-group">
                <label>Select Date :</label>
                <input type="text" id="datepicker" class="form-control">
            </div>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(function() {
            var holidays = ["2022-08-11","2022-08-12", "2022-08-15"]
            $( "#datepicker" ).datepicker({
                beforeShowDay: function(date){
                    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    return [ holidays.indexOf(string) == -1 ]
                }
            });
        });
    </script>
</body>
</html>

In the above code, we have used libraries like Bootstrap, jquery-ui, and jQuery and defined single input with id as a date picker. Then in the document ready method, we initialized jQuery datepicker. Here, we have created an array of holiday dates which contains three dates in August 2022. While initializing the jQuery date picker, we applied the beforeShowDay property and logic to disable holiday dates defined in the holiday array.

When someone tries to select a date then it will show our holiday dates disabled and the user can not select it. Below is a simple output image for the above example.

Conclusion

In this article, we have created a simple input date and disabled weekends for that input. Some many options or properties can be useful with Datepicker.

Here we are showing how to disable specific weekends in a datepicker, but you can also block other dates as needed. Disable Weekends in jQuery Datepicker explains how to prevent users from selecting Saturdays and Sundays, giving you better control over date input in your forms.

Related Articles