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 - GET YOUR COPY NOW!
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:
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.
<!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 - GET YOUR COPY NOW!
Happy coding :)
Top comments (0)