基于JavaScript和HTML实现日期选择插件的完整教程

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

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

document.getElementById("date-input").addEventListener("click", function() {
    showDatePicker();
});
function showDatePicker() {
    // 创建日期选择插件的容器
    var datePickerContainer = document.createElement("div");
    datePickerContainer.className = "date-picker";
    // 获取当前日期
    var currentDate = new Date();
    // 获取当前年份和月份
    var currentYear = currentDate.getFullYear();
    var currentMonth = currentDate.getMonth();
    // 创建日历表格
    var calendarTable = createCalendarTable(currentYear, currentMonth);
    // 将日历表格添加到日期选择插件的容器中
    datePickerContainer.appendChild(calendarTable);
    // 将日期选择插件的容器添加到文档中
    document.body.appendChild(datePickerContainer);
}
function createCalendarTable(year, month) {
    // 创建日历表格
    var table = document.createElement("table");
    // 创建表头
    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);
    // 创建表格主体
    var tbody = document.createElement("tbody");
    var startDate = new Date(year, month, 1); // 当月第一天
    var endDate = new Date(year, month + 1, 0); // 当月最后一天
    var currentDate = new Date(year, month, 1); // 当前日期，默认为当月第一天
    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);
}

.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;
}