How to Disable Specific Dates in Bootstrap Datepicker using jQuery?
Tags: javascript, php, jquery, bootstrap
Published: 2022-03-24 07:06:54

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

[![Advanced Laravel SAAS Starter Kit with CRUD Generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyjyev8tz3r8vi2w3on1.png)](https://1.envato.market/5g5QAn)

[Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!](https://1.envato.market/5g5QAn)


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:

```php
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
});
```

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

```php
<!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>
```

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.

[![Advanced Laravel SAAS Starter Kit with CRUD Generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyjyev8tz3r8vi2w3on1.png)](https://1.envato.market/5g5QAn)

[Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!](https://1.envato.market/5g5QAn)

Happy coding :)