Bootstrap Datepicker - Disabled Specific dates and Saturday,Sunday

Bootstrap · 29-Nov-2019

When “Bootstrap Datepicker - Disabled Specific dates and Saturday,Sunday” moves through design, development and browser testing, remote workforce management software can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with Bootstrap before adopting it in production.

Hi Guys,

In this tutorial i will give you simple example of Boostrap datepicker datesDisabled array of dates and Sunday & Saturday. so bacially, you can enable and disable specific dates array with also enable disable saturday and sunday in bootstrap datepicker.

it will useing beforeShowDay options to disable Specific days in bootstrap datepicker. we are disabled Bootstrap Datepicker in Sunday & Saturday and particular Sunday & Saturday enable useing beforeShowDay.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Datepicker - Disabled Specific dates and Saturday,Sunday</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>

it will help you.....