js日期选择器实现思路

<div id="datepicker">
    <input type="text" id="dateInput" readonly>
    <div id="calendar" style="display:none;"></div>
</div>

#datepicker {
    position: relative;
}

#dateInput {
    padding: 8px;
    border: 1px solid #ccc;
}

#calendar {
    position: absolute;
    top: 100%;
    left: 0;
    width: 300px;
    border: 1px solid #ccc;
    background: white;
}

document.addEventListener('DOMContentLoaded', function() {
    const dateInput = document.getElementById('dateInput');
    const calendar = document.getElementById('calendar');

    dateInput.addEventListener('focus', function() {
        calendar.style.display = 'block';
        renderCalendar(new Date());
    });

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

        let calendarHTML = '<table>';
        calendarHTML += '<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>';

        let day = 1;
        for (let i = 0; i < 6; i++) {
            calendarHTML += '<tr>';
            for (let j = 0; j < 7; j++) {
                if (i === 0 && j < firstDay || day > daysInMonth) {
                    calendarHTML += '<td></td>';
                } else {
                    calendarHTML += `<td>${day}</td>`;
                    day++;
                }
            }
            calendarHTML += '</tr>';
            if (day > daysInMonth) break;
        }

        calendarHTML += '</table>';
        calendar.innerHTML = calendarHTML;
    }
});

function formatDate(date) {
    const year = date.getFullYear();
    const month = ('0' + (date.getMonth() + 1)).slice(-2);
    const day = ('0' + date.getDate()).slice(-2);
    return `${year}-${month}-${day}`;
}