Codewolfy - Learn Programming For free
Disable specific dates in jQuery datepicker

In web development, taking date input from user is commonly occurs. The jQuery Date picker provides excellent user interface and user experience. It also provide many functionality like start date, end date, format date for user display or more.

While taking date input sometimes we need to skip some dates or need to force user not to select some specific date like holidays. Without datepicker we need to validate it against user input but date picker provides functionality to disable some dates while taking user input easily.

For example, we are creating HRMS or school application which has leave module. So it normal to take leave on working days only. User can not apply leave on holidays or exam days. In this example, we will disable few dates like holidays from datepicker.


<!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 above code, we have used libraries like bootstrap, jquery-ui and jQuery and defined single input with id as datepicker. Then in document ready method, we have initialized jQuery datepicker. Here, we have created array of holiday date which contains three dates of august 2022. While initializing jQuery date picker, we have applied beforeShowDay property and logic to disable holiday dates defined in holiday array.

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

Disable holiday date in jQuery datepicker

Conclusion

In this article, we have created simple date input and disabled weekends for that input. There are many options or properties which can be useful with datepicker.

Share your thoughts

Ask anything about this examples