js实现下拉框日历

<label for="date">选择日期:</label>
<input type="text" id="date" readonly>
<div id="calendar" style="display:none;">
  <!-- 日历内容将在这里动态生成 -->
</div>

#calendar {
  border: 1px solid #ccc;
  padding: 5px;
  position: absolute;
  background: white;
}

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

  // 创建日历
  function createCalendar(year, month) {
    calendar.innerHTML = ''; // 清空旧日历
    const firstDayOfMonth = new Date(year, month, 1);
    const lastDayOfMonth = new Date(year, month + 1, 0);
    const daysInMonth = lastDayOfMonth.getDate();
    const startDay = firstDayOfMonth.getDay() || 7; // 如果第一天是星期日，则视为7

    let date = 1;
    for (let i = 0; i < 6; i++) { // 最多6行
      const weekRow = document.createElement('div');
      weekRow.className = 'week-row';
      for (let j = 0; j < 7; j++) {
        if (i === 0 && j < startDay - 1) {
          const emptyCell = document.createElement('div');
          weekRow.appendChild(emptyCell);
        } else if (date > daysInMonth) {
          break;
        } else {
          const dayCell = document.createElement('div');
          dayCell.innerText = date;
          dayCell.addEventListener('click', function() {
            dateInput.value = `${year}-${month + 1}-${date < 10 ? '0' + date : date}`;
            calendar.style.display = 'none';
          });
          weekRow.appendChild(dayCell);
          date++;
        }
      }
      calendar.appendChild(weekRow);
      if (date > daysInMonth) break;
    }
  }

  // 显示日历
  dateInput.addEventListener('focus', function() {
    const today = new Date();
    createCalendar(today.getFullYear(), today.getMonth());
    calendar.style.display = 'block';
  });

  // 隐藏日历
  document.addEventListener('click', function(event) {
    if (!event.target.closest('#date') && !event.target.closest('#calendar')) {
      calendar.style.display = 'none';
    }
  });
});