如何用JavaScript实现一个简易的日期选择器（DatePicker）日历？

小编 13 2024-10-10 06:00

这是一个关于如何使用JavaScript实现简易的DatePicker日历的示例代码：，，``

javascript，，，，，，简易DatePicker，，        .datepicker {，            display: inline-block;，            font-size: 14px;，        }，        .datepicker table {，            border-collapse: collapse;，            width: 175px;，        }，        .datepicker th, .datepicker td {，            padding: 5px;，            text-align: center;，        }，        .datepicker th {，            background-color: #f2f2f2;，        }，        .datepicker td {，            cursor: pointer;，        }，        .datepicker td:hover {，            background-color: #f2f2f2;，        }，，，，，，，，        function createCalendar(year, month) {，            const days = ['日', '一', '二', '三', '四', '五', '六'];，            const date = new Date(year, month);，            const day = date.getDay();，            const firstDay = (new Date(year, month 1, 1)).getDay();，            const lastDate = new Date(year, month + 1, 0).getDate();，            const preMonthLastDate = new Date(year, month 1, 0).getDate();，            let calendar = '' + year + '年' + (month + 1) + '月';，            calendar += '' + days.join('') + '';，            for (let i = 0; i< 6;="" i++)="" {，="" calendar="" +='' ;，="" for="" (let="" j="0;">< 7;="" j++)="" {，="" if="" (i="==" 0="" &&="">< firstday)="" {，="" calendar="" +='' ;，="" }="" else="" if="" (i="==" 0="" &&="" j="">= firstDay) {，                        calendar += '' + (j firstDay + 1) + '';，                    } else if (((i 1) * 7 + j + 1) > lastDate) {，                        calendar += '';，                    } else {，                        calendar += '' + ((i 1) * 7 + j + 1) + '';，                    }，                }，                calendar += '';，            }，            return calendar;，        }，，        function renderCalendar() {，            const now = new Date();，            const year = now.getFullYear();，            const month = now.getMonth();，            document.getElementById('calendar').innerHTML = createCalendar(year, month);，        }，，        renderCalendar();，，，，

``，，这段代码实现了一个简单的DatePicker日历，可以根据当前日期显示日历。你可以将这段代码复制到一个HTML文件中，然后用浏览器打开查看效果。

简易的DatePicker日历实现

1. HTML结构

我们需要创建一个HTML结构来容纳我们的日期选择器，我们将使用一个输入框（input）和一个弹出层（div）来显示可选的日期。

如何用JavaScript实现一个简易的日期选择器（DatePicker）日历？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易DatePicker</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <input type="text" id="datepicker" readonly>
    <div id="datepicker-popup"></div>
    <script src="script.js"></script>
</body>
</html>

2. CSS样式

我们需要为日期选择器添加一些基本的样式，这里我们只提供一个简单的样式示例，你可以根据需要进行修改。

/* styles.css */
#datepicker {
    padding: 5px;
    border: 1px solid #ccc;
}
#datepicker-popup {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    z-index: 1;
}
#datepicker-popup table {
    border-collapse: collapse;
    width: 100%;
}
#datepicker-popup th, #datepicker-popup td {
    padding: 5px;
    text-align: center;
    border: 1px solid #ccc;
}
#datepicker-popup th {
    background-color: #f2f2f2;
}
#datepicker-popup td:hover {
    background-color: #e6e6e6;
    cursor: pointer;
}

3. JavaScript逻辑

我们需要编写JavaScript代码来实现日期选择器的功能，以下是一个简单的实现：

// script.js
document.addEventListener('DOMContentLoaded', function () {
    const datepicker = document.getElementById('datepicker');
    const datepickerPopup = document.getElementById('datepicker-popup');
    let selectedDate = null;
    datepicker.addEventListener('click', function () {
        if (datepickerPopup.style.display === 'none') {
            showDatepicker();
        } else {
            hideDatepicker();
        }
    });
    function showDatepicker() {
        const today = new Date();
        const currentMonth = today.getMonth();
        const currentYear = today.getFullYear();
        const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
        const firstDayOfMonth = new Date(currentYear, currentMonth, 1).getDay();
        datepickerPopup.innerHTML = '';
        datepickerPopup.style.display = 'block';
        const table = document.createElement('table');
        const thead = document.createElement('thead');
        const tr = document.createElement('tr');
        ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].forEach(day => {
            const th = document.createElement('th');
            th.textContent = day;
            tr.appendChild(th);
        });
        thead.appendChild(tr);
        table.appendChild(thead);
        const tbody = document.createElement('tbody');
        let date = 1;
        for (let i = 0; i < 6; i++) {
            const tr = document.createElement('tr');
            for (let j = 0; j < 7; j++) {
                if (i === 0 && j < firstDayOfMonth || date > daysInMonth) {
                    const td = document.createElement('td');
                    tr.appendChild(td);
                } else {
                    const td = document.createElement('td');
                    td.textContent = date;
                    td.addEventListener('click', function () {
                        selectedDate = new Date(currentYear, currentMonth, date);
                        datepicker.value = selectedDate.toISOString().slice(0, 10);
                        hideDatepicker();
                    });
                    tr.appendChild(td);
                    date++;
                }
            }
            tbody.appendChild(tr);
        }
        table.appendChild(tbody);
        datepickerPopup.appendChild(table);
    }
    function hideDatepicker() {
        datepickerPopup.style.display = 'none';
    }
});