原生js 实现 日期范围选择
时间: 2024-02-24 20:33:50 浏览: 24
你可以使用原生JavaScript来实现日期范围选择。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>日期范围选择</title>
<style>
.selected {
background-color: #ccc;
}
</style>
</head>
<body>
<input type="text" id="start-date" placeholder="开始日期">
<input type="text" id="end-date" placeholder="结束日期">
<script>
var startDateInput = document.getElementById('start-date');
var endDateInput = document.getElementById('end-date');
startDateInput.addEventListener('input', updateEndDate);
endDateInput.addEventListener('input', updateStartDate);
function updateEndDate() {
var startDate = new Date(startDateInput.value);
var endDate = new Date(endDateInput.value);
if (startDate > endDate) {
endDateInput.value = startDateInput.value;
}
highlightSelectedRange();
}
function updateStartDate() {
var startDate = new Date(startDateInput.value);
var endDate = new Date(endDateInput.value);
if (startDate > endDate) {
startDateInput.value = endDateInput.value;
}
highlightSelectedRange();
}
function highlightSelectedRange() {
var allInputs = document.querySelectorAll('input[type="text"]');
allInputs.forEach(function(input) {
input.classList.remove('selected');
});
var startDate = new Date(startDateInput.value);
var endDate = new Date(endDateInput.value);
var currentDate = new Date(startDate);
while (currentDate <= endDate) {
var currentDateString = currentDate.toISOString().split('T')[0];
var currentInput = document.getElementById(currentDateString);
if (currentInput) {
currentInput.classList.add('selected');
}
currentDate.setDate(currentDate.getDate() + 1);
}
}
</script>
</body>
</html>
```
在上面的示例中,我们使用了两个文本输入框来分别表示开始日期和结束日期。通过监听输入框的 `input` 事件,我们能够在输入日期时及时更新另一个输入框的值。同时,我们还定义了一个 `highlightSelectedRange` 函数,用于高亮显示选定的日期范围。
请注意,上述示例只是一个简单的实现,如果需要更复杂的功能(如日期选择器、日期格式验证等),你可能需要使用第三方库或自己进一步扩展。