实现一个简单的日期选择器 (Date Picker)

推荐答案

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Date Picker</title>
    <style>
        .date-picker {
            position: relative;
            display: inline-block;
        }
        .date-picker input {
            padding: 8px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .calendar {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 10px;
            z-index: 1000;
        }
        .calendar.show {
            display: block;
        }
        .calendar table {
            width: 100%;
            border-collapse: collapse;
        }
        .calendar th, .calendar td {
            padding: 8px;
            text-align: center;
            border: 1px solid #ccc;
        }
        .calendar td:hover {
            background-color: #f0f0f0;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="date-picker">
        <input type="text" id="date-input" readonly>
        <div class="calendar" id="calendar">
            <table>
                <thead>
                    <tr>
                        <th colspan="7">
                            <button id="prev-month">←</button>
                            <span id="current-month-year"></span>
                            <button id="next-month">→</button>
                        </th>
                    </tr>
                    <tr>
                        <th>Sun</th>
                        <th>Mon</th>
                        <th>Tue</th>
                        <th>Wed</th>
                        <th>Thu</th>
                        <th>Fri</th>
                        <th>Sat</th>
                    </tr>
                </thead>
                <tbody id="calendar-body">
                </tbody>
            </table>
        </div>
    </div>

    <script>
        const dateInput = document.getElementById('date-input');
        const calendar = document.getElementById('calendar');
        const calendarBody = document.getElementById('calendar-body');
        const currentMonthYear = document.getElementById('current-month-year');
        const prevMonthButton = document.getElementById('prev-month');
        const nextMonthButton = document.getElementById('next-month');

        let currentDate = new Date();
        let selectedDate = null;

        function renderCalendar(date) {
            const year = date.getFullYear();
            const month = date.getMonth();
            const firstDay = new Date(year, month, 1);
            const lastDay = new Date(year, month + 1, 0);
            const daysInMonth = lastDay.getDate();
            const startingDay = firstDay.getDay();

            currentMonthYear.textContent = `${date.toLocaleString('default', { month: 'long' })} ${year}`;

            let calendarHtml = '';
            let day = 1;

            for (let i = 0; i < 6; i++) {
                calendarHtml += '<tr>';
                for (let j = 0; j < 7; j++) {
                    if (i === 0 && j < startingDay) {
                        calendarHtml += '<td></td>';
                    } else if (day > daysInMonth) {
                        calendarHtml += '<td></td>';
                    } else {
                        const dateString = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
                        calendarHtml += `<td data-date="${dateString}">${day}</td>`;
                        day++;
                    }
                }
                calendarHtml += '</tr>';
            }

            calendarBody.innerHTML = calendarHtml;
        }

        function updateSelectedDate(date) {
            selectedDate = date;
            dateInput.value = date.toLocaleDateString();
            calendar.classList.remove('show');
        }

        dateInput.addEventListener('click', () => {
            calendar.classList.toggle('show');
        });

        calendarBody.addEventListener('click', (event) => {
            if (event.target.tagName === 'TD' && event.target.dataset.date) {
                const selectedDateString = event.target.dataset.date;
                const [year, month, day] = selectedDateString.split('-');
                updateSelectedDate(new Date(year, month - 1, day));
            }
        });

        prevMonthButton.addEventListener('click', () => {
            currentDate.setMonth(currentDate.getMonth() - 1);
            renderCalendar(currentDate);
        });

        nextMonthButton.addEventListener('click', () => {
            currentDate.setMonth(currentDate.getMonth() + 1);
            renderCalendar(currentDate);
        });

        renderCalendar(currentDate);
    </script>
</body>
</html>

本题详细解读

1. HTML 结构

• <div class="date-picker">: 这是日期选择器的容器，包含一个输入框和一个日历面板。
• <input type="text" id="date-input" readonly>: 用于显示选中的日期，用户无法直接编辑。
• <div class="calendar" id="calendar">: 日历面板，默认隐藏，点击输入框时显示。
• <table>: 用于显示日历的表格结构，包含表头和日期单元格。

2. CSS 样式

• .date-picker: 设置日期选择器的相对定位，使其内部的日历面板可以绝对定位。
• .calendar: 设置日历面板的样式，包括背景色、边框、圆角等。
• .calendar.show: 控制日历面板的显示与隐藏。
• td:hover: 当用户悬停在日期单元格上时，改变背景色以提供视觉反馈。

3. JavaScript 逻辑

• renderCalendar(date): 根据传入的日期渲染日历面板。计算当前月份的天数、起始日，并生成对应的 HTML 结构。
• updateSelectedDate(date): 更新选中的日期，并将其显示在输入框中，同时隐藏日历面板。
• 事件监听:
  • dateInput.addEventListener('click'): 点击输入框时显示或隐藏日历面板。
  • calendarBody.addEventListener('click'): 点击日历面板中的日期单元格时，更新选中的日期。
  • prevMonthButton.addEventListener('click'): 点击“上一月”按钮时，切换到上一个月并重新渲染日历。
  • nextMonthButton.addEventListener('click'): 点击“下一月”按钮时，切换到下一个月并重新渲染日历。

4. 功能实现

• 日期选择: 用户可以通过点击日历面板中的日期单元格来选择日期，选中的日期会显示在输入框中。
• 月份切换: 用户可以通过点击“上一月”或“下一月”按钮来切换月份，日历面板会动态更新。

5. 扩展性

• 该日期选择器是一个基础实现，可以根据需求进一步扩展，例如添加时间选择、支持多语言、自定义样式等。