How to Disabled Specific dates and Friday,Saturday In Bootstrap Datepicker ?

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share
How to Disabled Specific dates and Friday,Saturday

Hello Dev’s Today in this tutorial i will show you a short and simple example of Bootstrap datepicker dates Disabled array of dates and Friday & Saturday. So bacially, we can enable and disable specific dates array with also enable disable saturday and friday by using bootstrap datepicker. Here we know How to Disabled Specific dates and Friday,Saturday in Bootstrap.

So it will using beforeShowDay options to disable Specific days in bootstrap datepicker. Now we are disabled Bootstrap Datepicker in Friday & Saturday and also a particular Friday & Saturday enable by using beforeShowDay.

How to Disabled Specific dates and Friday,Saturday
Example
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Datepicker - Disabled Specific dates and Saturday,Friday</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>
</head>
<body>
<div class="container">
   <div class="row">
      <div class="col-md-7 offset-md-3 mt-5">
         <div class="card">
            <div class="card-header bg-light">
               <h6>Bootstrap Datepicker - Disabled Specific dates and Saturday,Sunday</h6>
            </div>
            <div class="card-body">
               <form action="#">
                  <div class="row">
                     <div class="col-md-12">
                        <div class="form-group">
                           <label>Date:</label>
                           <input type="text"  name="date" class="datepicker form-control" autocomplete="off">
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-12">
                        <input type="submit" class="btn btn-success btn-block">
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
</div>
<script type="text/javascript">
$(function() {
   var enableDays = ['2019-11-30'];
   var disabledDays = ['2019-11-28', '2019-11-29'];

   function formatDate(d) {
     var day = String(d.getDate())
     //add leading zero if day is is single digit

     if (day.length == 1)
       day = '0' + day
     var month = String((d.getMonth()+1))
     //add leading zero if month is is single digit
     if (month.length == 1)
       month = '0' + month
     return d.getFullYear() + '-' + month + "-" + day;
   }

   $('.datepicker').datepicker({
        format: 'mm/dd/yyyy',
         beforeShowDay: function(date){
          var dayNr = date.getDay();
            if (dayNr==0  ||  dayNr==6){
                if (enableDays.indexOf(formatDate(date)) >= 0) {
                    return true;
                }
                return false;
            }
            if (disabledDays.indexOf(formatDate(date)) >= 0) {
               return false;
            }
            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 →