使用JavaScript实现一个复杂功能：日期范围选择器
日期范围选择器是一个常见的Web应用功能，它允许用户选择一个日期范围。在本篇文章中，我们将使用JavaScript来实现这个功能。
一、实现思路
-
创建一个开始日期输入框和一个结束日期输入框。
-
添加事件监听器，监听开始日期输入框和结束日期输入框的输入事件。
-
当用户在输入框中输入日期时，验证输入的日期是否合法，如果合法，则更新日期范围。
-
提供清除日期范围的功能
二、代码实现
<!DOCTYPE html>
<html>
<head> <title>日期范围选择器</title>
</head>
<body> <!-- 开始日期输入框 --> <label for="start-date">开始日期:</label> <input type="date" id="start-date" oninput="validateDateRange()"> <!-- 当输入框内容变化时，调用validateDateRange函数 --> <br> <!-- 结束日期输入框 --> <label for="end-date">结束日期:</label> <input type="date" id="end-date" oninput="validateDateRange()"> <!-- 当输入框内容变化时，调用validateDateRange函数 --> <br> <!-- 清除日期范围按钮 --> <button onclick="clearDateRange()">清除日期范围</button> <!-- 当按钮被点击时，调用clearDateRange函数 --> <p id="date-range"></p> <!-- 用于显示日期范围的段落 --> <script> // 验证日期范围的函数 function validateDateRange() { // 获取开始日期和结束日期的值，并尝试将它们转换为Date对象 var startDate = new Date(document.getElementById("start-date").value); var endDate = new Date(document.getElementById("end-date").value); // 检查开始日期和结束日期是否有效（不是NaN） var isStartDateValid = !isNaN(startDate.getTime()); var isEndDateValid = !isNaN(endDate.getTime()); // 如果开始日期和结束日期都有效，则进行下一步验证 if (isStartDateValid && isEndDateValid) { // 检查结束日期是否早于开始日期，如果是，则弹出警告并清空结束日期输入框 if (endDate < startDate) { alert("结束日期不能早于开始日期"); document.getElementById("end-date").value = ""; } else { // 如果结束日期不早于开始日期，则显示日期范围 document.getElementById("date-range").innerText = "日期范围: " + startDate.toISOString().slice(0, 10) + " - " + endDate.toISOString().slice(0, 10); } } else { // 如果开始日期或结束日期无效，则清空显示区域 document.getElementById("date-range").innerText = ""; } } // 清除日期范围的函数 function clearDateRange() { // 清空开始日期和结束日期输入框的值 document.getElementById("start-date").value = ""; document.getElementById("end-date").value = ""; // 清空显示区域的内容 document.getElementById("date-range").innerText = ""; } </script>
</body>
</html>为了将当前日期转换为农历日期，我们需要使用一个外部库，例如 "lunar-js"。以下是如何使用这个库来实现这个功能：
首先，安装 "lunar-js" 库：
npm install lunar-js然后，在HTML中引入这个库：
<script src="node_modules/lunar-js/dist/lunar.min.js"></script>接下来，添加一个新的函数来将当前日期转换为农历日期
<script> // 引入lunar库 const Lunar = window.Lunar; // 创建Lunar实例 const lunar = new Lunar(); // 转换当前日期为农历日期的函数 function getLunarDate() { const currentDate = new Date(); // 获取当前日期 const lunarDate = lunar.convertSolarToLunar(currentDate); // 将当前日期转换为农历日期 return lunarDate; // 返回农历日期 }
</script>现在，你可以在HTML中调用这个函数并显示农历日期：
<p id="lunar-date"></p> <!-- 用于显示农历日期的段落 -->
<script> document.getElementById("lunar-date").innerText = getLunarDate().getLongYear() + "年" + getLunarDate().getMonth() + "月" + getLunarDate().getDay() + "日"; // 显示农历日期和月份
</script>