当前位置：首页 > JavaScript

js实现日历控件

2026-01-30 11:45:56JavaScript

实现日历控件的基本思路

日历控件通常需要展示一个月的日期表格，并允许用户选择日期。核心功能包括日期渲染、导航（上一月/下一月）和日期选择。

js实现日历控件

基础HTML结构

创建一个简单的HTML结构，包含日历容器和导航按钮：

js实现日历控件

<div class="calendar">
  <div class="header">
    <button class="prev">←</button>
    <h2 class="title">2023年10月</h2>
    <button class="next">→</button>
  </div>
  <div class="days">
    <div class="day">日</div>
    <div class="day">一</div>
    <!-- 其他星期... -->
  </div>
  <div class="dates"></div>
</div>

CSS样式设计

.calendar {
  width: 300px;
  border: 1px solid #ccc;
  font-family: Arial;
}
.header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}
.dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 40px;
}
.date {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.date:hover {
  background-color: #eee;
}
.date.selected {
  background-color: #4285f4;
  color: white;
}

JavaScript核心逻辑

初始化日历并渲染当前月份：

class Calendar {
  constructor(container) {
    this.container = container;
    this.currentDate = new Date();
    this.selectedDate = null;
    this.init();
  }

  init() {
    this.render();
    this.bindEvents();
  }

  render() {
    const year = this.currentDate.getFullYear();
    const month = this.currentDate.getMonth();

    // 更新标题
    this.container.querySelector('.title').textContent = 
      `${year}年${month + 1}月`;

    // 清空日期
    const datesContainer = this.container.querySelector('.dates');
    datesContainer.innerHTML = '';

    // 获取当月第一天和最后一天
    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0);

    // 获取当月天数
    const daysInMonth = lastDay.getDate();

    // 获取第一天是星期几（0-6）
    const firstDayOfWeek = firstDay.getDay();

    // 创建日期元素
    for (let i = 0; i < firstDayOfWeek; i++) {
      const empty = document.createElement('div');
      datesContainer.appendChild(empty);
    }

    for (let i = 1; i <= daysInMonth; i++) {
      const date = document.createElement('div');
      date.className = 'date';
      date.textContent = i;
      date.dataset.date = i;

      // 高亮选中日期
      if (this.selectedDate && 
          this.selectedDate.getDate() === i && 
          this.selectedDate.getMonth() === month && 
          this.selectedDate.getFullYear() === year) {
        date.classList.add('selected');
      }

      datesContainer.appendChild(date);
    }
  }

  bindEvents() {
    // 上一月/下一月
    this.container.querySelector('.prev').addEventListener('click', () => {
      this.currentDate.setMonth(this.currentDate.getMonth() - 1);
      this.render();
    });

    this.container.querySelector('.next').addEventListener('click', () => {
      this.currentDate.setMonth(this.currentDate.getMonth() + 1);
      this.render();
    });

    // 选择日期
    this.container.querySelector('.dates').addEventListener('click', (e) => {
      if (e.target.classList.contains('date')) {
        const day = parseInt(e.target.dataset.date);
        this.selectedDate = new Date(
          this.currentDate.getFullYear(),
          this.currentDate.getMonth(),
          day
        );
        this.render();
        this.onDateSelect && this.onDateSelect(this.selectedDate);
      }
    });
  }
}

使用日历控件

实例化日历并处理日期选择事件：

document.addEventListener('DOMContentLoaded', () => {
  const calendar = new Calendar(document.querySelector('.calendar'));

  calendar.onDateSelect = (date) => {
    console.log('选择的日期:', date);
    // 这里可以添加自定义逻辑
  };
});