Updated index.html with Comments & Improvements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Live Demo: Bootstrap simple datepicker example">
<title>Bootstrap Datepicker Example</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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" style="max-width: 800px; margin: 50px auto;">
<div class="row">
<div class="form-group">
<label for="example1">Select Date (7 days from today):</label>
<input type="text" id="example1" class="form-control" placeholder="Click to show the datepicker">
<br><br>
<label for="example2">Select Any Date:</label>
<input type="text" id="example2" class="form-control" placeholder="Click to show the datepicker">
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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>
<!-- Initialize Datepickers -->
<script>
$(document).ready(function () {
// Calculate 7 days from today
var newDate = new Date();
newDate.setDate(newDate.getDate() + 7);
// Initialize first datepicker with future date restriction
$('#example1').datepicker({
autoclose: true,
format: "dd/mm/yyyy",
startDate: newDate
});
// Initialize second datepicker with no restriction
$('#example2').datepicker({
autoclose: true,
format: "dd/mm/yyyy"
});
});
</script>
</body>
</html>
🔍 What's Improved
-
Semantic HTML: Added
label for="..."to improve accessibility. -
Clear Comments: Explain what each section or script does.
-
Separation of Concerns: Better visual separation of each section (head, body, script).
-
Code Readability: Improved spacing and indentation.
