使用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>

npm install lunar-js

<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>

<p id="lunar-date"></p> <!-- 用于显示农历日期的段落 -->  
<script>  
    document.getElementById("lunar-date").innerText = getLunarDate().getLongYear() + "年" + getLunarDate().getMonth() + "月" + getLunarDate().getDay() + "日"; // 显示农历日期和月份  
</script>