In this tutorial, We will learn how to Boostrap datepicker dates Disabled array of dates and Sunday & Saturday. so basically, you can enable and disable specific dates array with also enable disable Saturday and Sunday in bootstrap datepicker.
Example:
<!DOCTYPE html>
<html>
<head>
<title>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-8 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 = ['20120-11-30'];
var disabledDays = ['2020-11-28', '2020-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>
Thanks, May this example will help you.