How to disable specific Dates in Bootstrap Datepicker

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share
How to disable specific Dates in Bootstrap Datepicker

Hello Dev’s Today in this blog i will show you how we can disable some dates in a jQuery, bootstrap datepicker. So we can easily disable specific dates with array in bootstrap datepicker in our application. Here we will know How to disable specific Dates in Bootstrap Datepicker.

Now it will do by using beforeShowDay options to disable a Specific days in bootstrap datepicker. So it is easy and also very simple method for disable dates on datepicker. Most of situation in many dates need to disable then we can use that example.

So here we are disabled Bootstrap Datepicker in particular dates enable by using beforeShowDay.

How to disable specific Dates in Bootstrap Datepicker
Example
<!DOCTYPE html>
<html>
<head>
<title>date</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</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 bg-info  text-center">
                        <h4><b class="text-white">Date Picker</b></h4>
                    </div>
                    <div class="card-body">
                        <form action="" method="post">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label>Date:</label>
                                        <input type="text"  name="date" value="{{old('date')}}"  class="datepicker form-control" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 text-center">
                                    <button class="btn btn-success btn-sm" type="submit">Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var disableDates = ["9-11-2019", "14-11-2019", "15-11-2019","27-12-2019"];
        $('.datepicker').datepicker({
            format: 'dd/mm/yyyy',
            beforeShowDay: function(date){
                dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
                if(disableDates.indexOf(dmy) != -1){
                    return false;
                }
                else{
                    return true;
                }
            }
        });
    </script>
</body>
</html>

Read Also : How to run laravel project without php artisan serve command ?

Thanks for read. I hope it help you. For more you can follow us on facebook.

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →