How to Disable Past Dates in Bootstrap Datetimepicker: A Step-by-Step Guide
Learn how to disable past dates in Bootstrap Datetimepicker with this easy-to-follow tutorial. Perfect for ensuring users can only select dates from today onward in your web applications.
In this tutorial, I’ll walk you through how to disable past dates in Bootstrap Datetimepicker. This is a common requirement when you want to ensure users can only select dates from today onward, preventing them from choosing dates in the past. Whether you're working on a booking system, event scheduler, or any other project, this feature is incredibly useful.
We’ll use the Bootstrap Datetimepicker library, which provides an easy way to handle date and time inputs. By setting the minDate option to the current date, we can disable all past dates effortlessly. Below, you’ll find a simple example and the complete code to implement this functionality in your project.
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>Disable Past Dates in Bootstrap Datetimepicker - Tutorial</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<h2>Disable Past Dates in Bootstrap Datetimepicker</h2>
<strong>Today's Date: 5/7/2020</strong>
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepickerDemo'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepickerDemo').datetimepicker({
minDate: new Date() // Disable past dates
});
});
</script>
</body>
</html>