利用JavaScript實(shí)現(xiàn)一個(gè)日期范圍選擇器

更新時(shí)間：2024年01月22日 09:08:14 作者：刻刻帝的海角

日期范圍選擇器是一個(gè)常見(jiàn)的Web應(yīng)用功能,它允許用戶選擇一個(gè)日期范圍,本文我們將使用JavaScript來(lái)實(shí)現(xiàn)這個(gè)功能,感興趣的小伙伴可以了解下

一、實(shí)現(xiàn)思路

創(chuàng)建一個(gè)開(kāi)始日期輸入框和一個(gè)結(jié)束日期輸入框。

添加事件監(jiān)聽(tīng)器，監(jiān)聽(tīng)開(kāi)始日期輸入框和結(jié)束日期輸入框的輸入事件。

當(dāng)用戶在輸入框中輸入日期時(shí)，驗(yàn)證輸入的日期是否合法，如果合法，則更新日期范圍。

提供清除日期范圍的功能

二、代碼實(shí)現(xiàn)

<!DOCTYPE html>  
<html>  
<head>  
    <title>日期范圍選擇器</title>  
</head>  
<body>  
    <!-- 開(kāi)始日期輸入框 -->  
    <label for="start-date">開(kāi)始日期:</label>  
    <input type="date" id="start-date" oninput="validateDateRange()"> <!-- 當(dāng)輸入框內(nèi)容變化時(shí)，調(diào)用validateDateRange函數(shù) -->  
    <br>  
    <!-- 結(jié)束日期輸入框 -->  
    <label for="end-date">結(jié)束日期:</label>  
    <input type="date" id="end-date" oninput="validateDateRange()"> <!-- 當(dāng)輸入框內(nèi)容變化時(shí)，調(diào)用validateDateRange函數(shù) -->  
    <br>  
    <!-- 清除日期范圍按鈕 -->  
    <button onclick="clearDateRange()">清除日期范圍</button> <!-- 當(dāng)按鈕被點(diǎn)擊時(shí)，調(diào)用clearDateRange函數(shù) -->  
    <p id="date-range"></p> <!-- 用于顯示日期范圍的段落 -->  
  
    <script>  
        // 驗(yàn)證日期范圍的函數(shù)  
        function validateDateRange() {  
            // 獲取開(kāi)始日期和結(jié)束日期的值，并嘗試將它們轉(zhuǎn)換為Date對(duì)象  
            var startDate = new Date(document.getElementById("start-date").value);  
            var endDate = new Date(document.getElementById("end-date").value);  
            // 檢查開(kāi)始日期和結(jié)束日期是否有效（不是NaN）  
            var isStartDateValid = !isNaN(startDate.getTime());  
            var isEndDateValid = !isNaN(endDate.getTime());  
            // 如果開(kāi)始日期和結(jié)束日期都有效，則進(jìn)行下一步驗(yàn)證  
            if (isStartDateValid && isEndDateValid) {  
                // 檢查結(jié)束日期是否早于開(kāi)始日期，如果是，則彈出警告并清空結(jié)束日期輸入框  
                if (endDate < startDate) {  
                    alert("結(jié)束日期不能早于開(kāi)始日期");  
                    document.getElementById("end-date").value = "";  
                } else { // 如果結(jié)束日期不早于開(kāi)始日期，則顯示日期范圍  
                    document.getElementById("date-range").innerText = "日期范圍: " + startDate.toISOString().slice(0, 10) + " - " + endDate.toISOString().slice(0, 10);  
                }  
            } else { // 如果開(kāi)始日期或結(jié)束日期無(wú)效，則清空顯示區(qū)域  
                document.getElementById("date-range").innerText = "";  
            }  
        }  
  
        // 清除日期范圍的函數(shù)  
        function clearDateRange() {  
            // 清空開(kāi)始日期和結(jié)束日期輸入框的值  
            document.getElementById("start-date").value = "";  
            document.getElementById("end-date").value = "";  
            // 清空顯示區(qū)域的內(nèi)容  
            document.getElementById("date-range").innerText = "";  
        }  
    </script>  
</body>  
</html>

為了將當(dāng)前日期轉(zhuǎn)換為農(nóng)歷日期，我們需要使用一個(gè)外部庫(kù)，例如 "lunar-js"。以下是如何使用這個(gè)庫(kù)來(lái)實(shí)現(xiàn)這個(gè)功能：

首先，安裝 "lunar-js" 庫(kù)：

npm install lunar-js

然后，在HTML中引入這個(gè)庫(kù)：

<script src="node_modules/lunar-js/dist/lunar.min.js"></script>

接下來(lái)，添加一個(gè)新的函數(shù)來(lái)將當(dāng)前日期轉(zhuǎn)換為農(nóng)歷日期

<script>  
    // 引入lunar庫(kù)  
    const Lunar = window.Lunar;  
    // 創(chuàng)建Lunar實(shí)例  
    const lunar = new Lunar();  
  
    // 轉(zhuǎn)換當(dāng)前日期為農(nóng)歷日期的函數(shù)  
    function getLunarDate() {  
        const currentDate = new Date(); // 獲取當(dāng)前日期  
        const lunarDate = lunar.convertSolarToLunar(currentDate); // 將當(dāng)前日期轉(zhuǎn)換為農(nóng)歷日期  
        return lunarDate; // 返回農(nóng)歷日期  
    }  
</script>

現(xiàn)在，你可以在HTML中調(diào)用這個(gè)函數(shù)并顯示農(nóng)歷日期：

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

到此這篇關(guān)于利用JavaScript實(shí)現(xiàn)一個(gè)日期范圍選擇器的文章就介紹到這了,更多相關(guān)JavaScript日期選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: