推荐一款强大的jQuery日期范围选择插件——jQuery Date Range Picker
<!DOCTYPE html>
<html>
<head>
<title>jQuery Date Range Picker 示例</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
</head>
<body>
<div class="reportrange">
<i class="fa fa-calendar"></i>
<span></span>
<b class="caret"></b>
</div>
<script>
$(document).ready(function() {
$('.reportrange').daterangepicker({
startDate: moment().startOf('day'),
endDate: moment().endOf('day'),
locale: {
format: 'YYYY-MM-DD'
}
}, function(start, end) {
$('#reportrange span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
});
});
</script>
</body>
</html>这段代码展示了如何在网页中引入并使用daterangepicker插件来选择日期范围。它使用了moment.js来处理日期，并提供了一个简洁直观的用户界面供用户选择日期范围。
评论已关闭