js实现日期选择

使用原生JavaScript实现日期选择器

创建基础HTML结构

<input type="text" id="datePicker" placeholder="选择日期">
<div id="datePickerCalendar" class="calendar-container"></div>

添加基本CSS样式

.calendar-container {
  display: none;
  position: absolute;
  width: 300px;
  border: 1px solid #ccc;
  background: white;
  z-index: 100;
}
.calendar-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #f0f0f0;
}
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.day-cell {
  padding: 10px;
  text-align: center;
  cursor: pointer;
}
.day-cell:hover {
  background: #eee;
}

实现JavaScript核心功能

document.addEventListener('DOMContentLoaded', function() {
  const dateInput = document.getElementById('datePicker');
  const calendar = document.getElementById('datePickerCalendar');
  let currentDate = new Date();

  dateInput.addEventListener('focus', showCalendar);

  function showCalendar() {
    calendar.style.display = 'block';
    renderCalendar(currentDate);
  }

  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 startDay = firstDay.getDay();

    let calendarHTML = `
      <div class="calendar-header">
        <button id="prevMonth">←</button>
        <h3>${year}年 ${month + 1}月</h3>
        <button id="nextMonth">→</button>
      </div>
      <div class="calendar-days">
        <div>日</div><div>一</div><div>二</div><div>三</div>
        <div>四</div><div>五</div><div>六</div>
    `;

    for (let i = 0; i < startDay; i++) {
      calendarHTML += `<div class="day-cell"></div>`;
    }

    for (let day = 1; day <= daysInMonth; day++) {
      calendarHTML += `<div class="day-cell" data-day="${day}">${day}</div>`;
    }

    calendarHTML += `</div>`;
    calendar.innerHTML = calendarHTML;

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

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

    const dayCells = document.querySelectorAll('.day-cell[data-day]');
    dayCells.forEach(cell => {
      cell.addEventListener('click', () => {
        const selectedDay = cell.getAttribute('data-day');
        const selectedDate = new Date(
          currentDate.getFullYear(),
          currentDate.getMonth(),
          selectedDay
        );
        dateInput.value = formatDate(selectedDate);
        calendar.style.display = 'none';
      });
    });
  }

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

使用第三方库实现日期选择

安装flatpickr库

npm install flatpickr

基本使用示例

import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.min.css";

flatpickr("#datePicker", {
  dateFormat: "Y-m-d",
  allowInput: true,
  locale: "zh"
});

移动端优化的日期选择

使用input的date类型

<input type="date" id="mobileDatePicker">

添加JavaScript增强功能

const mobileDatePicker = document.getElementById('mobileDatePicker');
mobileDatePicker.addEventListener('change', function() {
  console.log('选择的日期:', this.value);
});

日期范围选择实现

HTML结构

<input type="text" id="startDate" placeholder="开始日期">
<input type="text" id="endDate" placeholder="结束日期">
<div id="rangePickerCalendar"></div>

JavaScript实现

// 类似单日期选择器的实现，但需要处理两个日期之间的逻辑
// 可参考上述单日期选择器代码扩展