亲手制作微信小程序日历组件

微信小程序日历组件开发指南

日历组件是微信小程序中常用的组件之一，它可以帮助用户选择日期和时间。日历组件的开发并不复杂，但需要掌握一些基础的知识。

1. 获取日期数据

首先，我们需要获取当前日期的数据。这可以通过调用 JavaScript 的 new Date() 方法来实现。

const date = new Date();

date 对象包含了当前日期的各种信息，包括年份、月份、日期、小时、分钟和秒。

2. 创建日历组件的布局

获取到日期数据后，就可以开始创建日历组件的布局了。我们可以使用 HTML 和 CSS 来完成这项工作。

<div class="calendar">
  <div class="calendar-header">
    <div class="calendar-title">
      <h1>2023 年 3 月</h1>
    </div>
    <div class="calendar-nav">
      <button class="calendar-nav-prev">&lt;</button>
      <button class="calendar-nav-next">&gt;</button>
    </div>
  </div>
  <div class="calendar-body">
    <div class="calendar-week">
      <div class="calendar-day">一</div>
      <div class="calendar-day">二</div>
      <div class="calendar-day">三</div>
      <div class="calendar-day">四</div>
      <div class="calendar-day">五</div>
      <div class="calendar-day">六</div>
      <div class="calendar-day">日</div>
    </div>
    <div class="calendar-days">
      <!-- 这里将填充日期 -->
    </div>
  </div>
</div>

这段 HTML 代码定义了一个简单的日历组件布局。其中，.calendar 类是日历组件的外围容器，.calendar-header 类是日历组件的头部，.calendar-title 类是日历组件的标题，.calendar-nav 类是日历组件的导航栏，.calendar-nav-prev 和 .calendar-nav-next 类是日历组件的上一月和下一月按钮，.calendar-body 类是日历组件的主体，.calendar-week 类是日历组件的星期栏，.calendar-day 类是日历组件的星期几，.calendar-days 类是日历组件的日期列表。

3. 添加样式

接下来，我们需要为日历组件添加样式。我们可以使用 CSS 来完成这项工作。

.calendar {
  width: 300px;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.calendar-header {
  background-color: #f5f5f5;
  padding: 10px;
}

.calendar-title {
  font-size: 1.5rem;
  font-weight: bold;
}

.calendar-nav {
  float: right;
}

.calendar-nav button {
  border: none;
  background-color: #fff;
  cursor: pointer;
}

.calendar-body {
  padding: 10px;
}

.calendar-week {
  display: flex;
}

.calendar-day {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #ccc;
}

.calendar-days {
  display: flex;
  flex-wrap: wrap;
}

.calendar-day--current {
  background-color: #007bff;
  color: #fff;
}

这段 CSS 代码为日历组件添加了基本的样式。其中，.calendar 类设置了日历组件的宽度、边框和圆角，.calendar-header 类设置了日历组件头部的背景色和内边距，.calendar-title 类设置了日历组件标题的字体大小和粗细，.calendar-nav 类设置了日历组件导航栏的位置和浮动方向，.calendar-nav button 类设置了日历组件导航栏按钮的样式，.calendar-body 类设置了日历组件主体的内边距，.calendar-week 类设置了日历组件星期栏的显示方式，.calendar-day 类设置了日历组件星期几的宽度、高度、行高、对齐方式和边框，.calendar-days 类设置了日历组件日期列表的显示方式，.calendar-day--current 类设置了日历组件当前日期的背景色和文字颜色。

4. 添加交互

最后，我们需要为日历组件添加交互。我们可以使用 JavaScript 来完成这项工作。

// 获取日历组件元素
const calendar = document.querySelector('.calendar');

// 获取日历组件头部元素
const calendarHeader = calendar.querySelector('.calendar-header');

// 获取日历组件标题元素
const calendarTitle = calendarHeader.querySelector('.calendar-title');

// 获取日历组件导航栏元素
const calendarNav = calendarHeader.querySelector('.calendar-nav');

// 获取日历组件上一月按钮元素
const calendarNavPrev = calendarNav.querySelector('.calendar-nav-prev');

// 获取日历组件下一月按钮元素
const calendarNavNext = calendarNav.querySelector('.calendar-nav-next');

// 获取日历组件主体元素
const calendarBody = calendar.querySelector('.calendar-body');

// 获取日历组件星期栏元素
const calendarWeek = calendarBody.querySelector('.calendar-week');

// 获取日历组件日期列表元素
const calendarDays = calendarBody.querySelector('.calendar-days');

// 获取当前日期
const date = new Date();

// 获取当前年份
const year = date.getFullYear();

// 获取当前月份
const month = date.getMonth() + 1;

// 获取当前日期
const day = date.getDate();

// 获取当前月份的天数
const daysInMonth = new Date(year, month, 0).getDate();

// 获取上个月的天数
const daysInLastMonth = new Date(year, month - 1, 0).getDate();

// 获取下个月的天数
const daysInNextMonth = new Date(year, month + 1, 0).getDate();

// 创建日历组件标题
const calendarTitleText = `${year} 年 ${month} 月`;

// 设置日历组件标题
calendarTitle.innerText = calendarTitleText;

// 创建日历组件星期栏
for (let i = 1; i <= 7; i++) {
  const calendarDay = document.createElement('div');
  calendarDay.classList.add('calendar-day');
  calendarDay.innerText = ['日', '一', '二', '三', '四', '五', '六'][i - 1];
  calendarWeek.appendChild(calendarDay);
}

// 创建日历组件日期列表
for (let i = 1; i <= daysInMonth; i++) {
  const calendarDay = document.createElement('div');
  calendarDay.classList.add('calendar-day');
  calendarDay.innerText = i;

  // 如果当前日期是今天，则添加`current`类
  if (i === day) {
    calendarDay.classList.add('calendar-day--current');
  }

  calendarDays.appendChild(calendarDay);
}

// 添加上个月的日期
for (let i = daysInLastMonth - (7 - daysInMonth % 7); i <= daysInLastMonth; i++) {
  const calendarDay = document.createElement('div');
  calendarDay.classList.add('calendar-day');
  calendarDay.classList.add('calendar-day--disabled');
  calendarDay.innerText = i;
  calendarDays.insertBefore(calendarDay, calendarDays.firstChild);
}

// 添加下个月的日期
for (let i = 1; i <= 7 - daysInMonth % 7; i++) {
  const calendarDay = document.createElement('div');
  calendarDay.classList.add('calendar-day');
  calendarDay.classList.add('calendar-day--disabled');
  calendarDay.innerText = i;
  calendarDays.appendChild(calendarDay);
}

// 添加日历组件导航栏事件监听器
calendarNavPrev.addEventListener('click', () => {
  // 获取上个月的日期
  const lastMonth = month - 1;
  const last