DEV Community

codeanddeploy
codeanddeploy

Posted on

How to Disable Specific Dates in Bootstrap Datepicker using jQuery?

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/jquery/how-to-disable-specific-dates-in-bootstrap-datepicker-using-jquery

In this post, I will share with you how to disable the specific dates in the bootstrap datepicker. Sometimes we need to disable the disabled specific date so that our users cannot select from it or maybe you have a condition that the user meets the requirements then you need to disabled the dates.

Luckily bootstrap datepicker already provided an option called datesDisabled then we will just put the value of our dates for disabled as array variable as you can see below:

var datesForDisable = ["08-5-2021", "08-10-2021", "08-15-2021", "08-20-2021"]

$('.datepicker').datepicker({
   format: 'mm-dd-yyyy',
   autoclose: true,
   todayHighlight: true,
   datesDisabled: datesForDisable
});
Enter fullscreen mode Exit fullscreen mode

That's it. Now I will show you the complete source code.

<!DOCTYPE html>
<html>
<head>
<title>How to Disable Specific Dates in Bootstrap Datepicker using jQuery?</title>
    <!-- Bootstrap 4 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- Bootstrap Datepicker CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3 mt-5">
                <div class="card">
                    <div class="card-header">How to Disable Specific Dates in Bootstrap Datepicker using jQuery?</div>
                    <div class="card-body">

                        <form action="" method="post">
                            <div class="form-group">
                                <label for="date">Date</label>
                                <input type="text" class="form-control datepicker" placeholder="Date" name="date">
                            </div>
                          <button type="submit" class="btn btn-primary">Submit</button>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <!-- Bootstrap 4 JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <!-- Bootstrap Datepicker JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript">

        var datesForDisable = ["08-5-2021", "08-10-2021", "08-15-2021", "08-20-2021"]

        $('.datepicker').datepicker({
            format: 'mm-dd-yyyy',
            autoclose: true,
            todayHighlight: true,
            datesDisabled: datesForDisable
        });
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/jquery/how-to-disable-specific-dates-in-bootstrap-datepicker-using-jquery if you want to download this code.

Happy coding :)

Discussion (0)