快捷導(dǎo)航

基于JavaScript+HTML編寫一個(gè)日期選擇插件

更新時(shí)間：2023年10月12日 10:42:54 作者：黑夜開發(fā)者

在現(xiàn)代Web應(yīng)用程序中,日期選擇器是一個(gè)非常常見的組件,用戶可以使用它來(lái)選擇特定的日期,在本篇文章中,我們將使用JavaScript和HTML來(lái)創(chuàng)建一個(gè)簡(jiǎn)單但功能強(qiáng)大的日期選擇插件,這個(gè)日期選擇插件是比較考驗(yàn)Js基本功的,需要的朋友可以參考下

一、寫作思路介紹

在現(xiàn)代Web應(yīng)用程序中，日期選擇器是一個(gè)非常常見的組件，用戶可以使用它來(lái)選擇特定的日期。在本篇文章中，我們將使用JavaScript和HTML來(lái)創(chuàng)建一個(gè)簡(jiǎn)單但功能強(qiáng)大的日期選擇插件。這個(gè)日期選擇插件是比較考驗(yàn)Js基本功的。

該插件將具有以下功能：

點(diǎn)擊輸入框時(shí)，將顯示日期選擇器。
日期選擇器上方有一個(gè)年份和月份選擇器，可以向左或向右切換。
日期選擇器下方是一個(gè)日期網(wǎng)格，用戶可以通過(guò)點(diǎn)擊來(lái)選擇日期。
當(dāng)用戶選擇一個(gè)日期后，插件將自動(dòng)將選定的日期填充到輸入框中。

二、準(zhǔn)備工作

2.1 寫一個(gè)入口頁(yè)面

在開始之前，我們需要準(zhǔn)備一些基本的 HTML 和 CSS 結(jié)構(gòu)（date-picker.html）。

HTML 結(jié)構(gòu)如下：

<!DOCTYPE html>
<html>
<head>
    <title>日期選擇插件</title>
    <link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>
<body>
    <div class="container">
        <input type="text" id="date-input" placeholder="選擇日期">
    </div>
    <script src="script.js"></script>
</body>
</html>

2.2 設(shè)計(jì)基本的插件樣式

CSS 樣式如下(style.css)：

.container {
    background-color: #FDF5E6;
    padding: 10px;
    width: 200px;
    border-radius: 5px;
}
#date-input {
    width: 100%;
    height: 30px;
    padding: 5px;
    font-size: 16px;
    border: none;
}

大概出來(lái)的效果圖如下：

2.3 實(shí)現(xiàn)日期選擇插件

首先，我們需要監(jiān)聽輸入框的點(diǎn)擊事件，當(dāng)用戶點(diǎn)擊輸入框時(shí)，展示日期選擇插件。

在 JavaScript 文件中添加以下代碼：

document.getElementById("date-input").addEventListener("click", function() {
    showDatePicker();
});
function showDatePicker() {
    // 創(chuàng)建日期選擇插件的容器
    var datePickerContainer = document.createElement("div");
    datePickerContainer.className = "date-picker";
    // 獲取當(dāng)前日期
    var currentDate = new Date();
    // 獲取當(dāng)前年份和月份
    var currentYear = currentDate.getFullYear();
    var currentMonth = currentDate.getMonth();
    // 創(chuàng)建日歷表格
    var calendarTable = createCalendarTable(currentYear, currentMonth);
    // 將日歷表格添加到日期選擇插件的容器中
    datePickerContainer.appendChild(calendarTable);
    // 將日期選擇插件的容器添加到文檔中
    document.body.appendChild(datePickerContainer);
}
function createCalendarTable(year, month) {
    // 創(chuàng)建日歷表格
    var table = document.createElement("table");
    // 創(chuàng)建表頭
    var thead = document.createElement("thead");
    var tr = document.createElement("tr");
    var daysOfWeek = ["日", "一", "二", "三", "四", "五", "六"];
    for (var i = 0; i < daysOfWeek.length; i++) {
        var th = document.createElement("th");
        th.textContent = daysOfWeek[i];
        tr.appendChild(th);
    }
    thead.appendChild(tr);
    table.appendChild(thead);
    // 創(chuàng)建表格主體
    var tbody = document.createElement("tbody");
    var startDate = new Date(year, month, 1); // 當(dāng)月第一天
    var endDate = new Date(year, month + 1, 0); // 當(dāng)月最后一天
    var currentDate = new Date(year, month, 1); // 當(dāng)前日期，默認(rèn)為當(dāng)月第一天
    while (currentDate <= endDate) {
        tr = document.createElement("tr");
        for (i = 0; i < 7; i++) {
            var td = document.createElement("td");
            if (currentDate.getMonth() === month) {
                td.textContent = currentDate.getDate();
                td.addEventListener("click", selectDate);
                td.className = "date";
            } else {
                td.textContent = "";
                td.className = "disabled";
            }
            if (currentDate.toDateString() === new Date().toDateString()) {
                td.className += " current-day";
            }
            tr.appendChild(td);
            currentDate.setDate(currentDate.getDate() + 1);
        }
        tbody.appendChild(tr);
    }
    table.appendChild(tbody);
    return table;
}
function selectDate(event) {
    var selectedDate = new Date(year, month, event.target.textContent);
    var dateString = selectedDate.getFullYear() + "-" + (selectedDate.getMonth() + 1) + "-" + selectedDate.getDate();
    document.getElementById("date-input").value = dateString;
    // 移除日期選擇插件的容器
    var datePickerContainer = document.querySelector(".date-picker");
    datePickerContainer.parentNode.removeChild(datePickerContainer);
}

在以上代碼中，我們使用 showDatePicker 函數(shù)來(lái)創(chuàng)建日期選擇插件的容器，并將其添加到文檔中。

createCalendarTable 函數(shù)創(chuàng)建了一個(gè)日歷表格，并根據(jù)給定的年份和月份生成了相應(yīng)的日期。

selectDate 函數(shù)用于選擇日期并將其寫入輸入框，然后移除日期選擇插件的容器。

2.4 美化日期選擇插件

為了美化日期選擇插件，我們使用了自定義的 CSS 樣式。

首先，我們將整體邊框背景搭配調(diào)的比較舒服一點(diǎn)，在style.css里面追加下面的內(nèi)容：

.date-picker {
    position: absolute;
    background-color: #FFF;
    border: 1px solid #DDD;
    padding: 10px;
    z-index: 999;
}
.current-day {
    background-color: #CCC;
}
.date-picker td {
    text-align: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.date-picker td:hover {
    background-color: #EEE;
}
.date-picker td:not(.disabled):hover {
    background-color: #DDD;
}
.disabled {
    color: #AAA;
    cursor: not-allowed;
}
.container {
    background-color: #FDF5E6;
}

然后，我們使用灰色作為選中日期的背景色，并使用黑色作為日期字樣的顏色：

.current-day {
    background-color: #CCC;
}
.date-picker td {
    color: #000;
}

其他常規(guī)樣式的配置可以根據(jù)需要進(jìn)行調(diào)整，比如邊框樣式、鼠標(biāo)懸停效果等，我們來(lái)看一下最終大概的效果。

三、總結(jié)

在本文中，我們介紹了如何使用 JavaScript 和 HTML 來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的日期選擇插件，并對(duì)其進(jìn)行了美化。通過(guò)監(jiān)聽輸入框的點(diǎn)擊事件，在用戶點(diǎn)擊輸入框時(shí)展示日期選擇插件，并通過(guò)點(diǎn)擊日期來(lái)選擇日期并將其寫入輸入框。最后，我們使用 CSS 樣式來(lái)美化日期選擇插件，使其更加美觀。這個(gè)日期選擇插件可以方便地應(yīng)用于網(wǎng)頁(yè)中，提供良好的用戶體驗(yàn)。

到此這篇關(guān)于基于JavaScript+HTML編寫一個(gè)日期選擇插件的文章就介紹到這了,更多相關(guān)JavaScript+HTML日期選擇插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: