可以使用Bootstrap和Datepicker库来实现
<!DOCTYPE html>
<html>
<head>
<title>Date Range Picker</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
</head>
<body>
<div class="container">
<h1>Date Range Picker</h1>
<div class="input-group">
<input type="text" class="form-control" id="date-range" placeholder="Select Date Range">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-calendar"></i>
</span>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
$(document).ready(function() {
$('#date-range').daterangepicker({
opens: 'left',
drops: 'down',
autoApply: true,
locale: {
format: 'YYYY-MM-DD',
separator: ' - ',
applyLabel: 'Apply',
cancelLabel: 'Cancel',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 0
}
});
});
</script>
</body>
</html>