JS简单实现移动端日历功能示例

首先，实现移动端日历功能需要考虑日期的显示、日期的选择和切换不同月份等问题，以下是一个完整攻略：

设计思路

在页面中渲染日历主体部分，包括日期、星期、月份等。
通过 JavaScript 操作获取当前时间，并根据当前时间初始化日历的显示。
实现日历的月份、日期的切换。
实现日期的选择，可以记录选中的日期并高亮显示。

代码实现

HTML 结构

首先，我们需要在 HTML 中创建一个日历的结构，包括表格、日期、星期和月份等。

<div class="calendar">
  <div class="header">
    <span class="prev-month">&lt;</span>
    <span class="month">2021年5月</span>
    <span class="next-month">&gt;</span>
  </div>
  <table>
    <thead>
      <tr>
        <th>日</th>
        <th>一</th>
        <th>二</th>
        <th>三</th>
        <th>四</th>
        <th>五</th>
        <th>六</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="disabled">25</td>
        <td class="disabled">26</td>
        <td class="disabled">27</td>
        <td class="disabled">28</td>
        <td class="">29</td>
        <td class="">30</td>
        <td class="">31</td>
      </tr>
      <!-- 其他日期的表格 -->
    </tbody>
  </table>
</div>

CSS 样式

.calendar {
  width: 300px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.month {
  font-size: 16px;
  font-weight: bold;
}
table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  text-align: center;
  table-layout: fixed;
}
table th,
table td {
  width: 14.28%;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
table th {
  color: #666;
}
td.disabled {
  color: #ccc;
}
td.selected {
  background-color: #f66;
  color: #fff;
  font-weight: bold;
  border-radius: 50%;
}

JavaScript 实现

获取时间

使用 Date() 对象获取当前时间，并获取当前年份、月份、日期等信息。

const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();

初始化日历

要初始化日历的显示，首先需要获取到当前月份的第一天是星期几，然后根据这个信息确定日历中表格的位置。同时，需要把具体的日期填充到表格中，如果某一天为当前日期，则需要高亮显示。

function initCalendar() {
  const firstDay = new Date(year, month - 1, 1).getDay();
  const daysInMonth = new Date(year, month, 0).getDate();

  const prevMonthDays = firstDay === 0 ? 7 : firstDay;
  let lastMonthDays = new Date(year, month - 1, 0).getDate();

  const tbody = document.querySelector("table tbody");

  let lastMonthStart = lastMonthDays - prevMonthDays + 1;
  const currentMonthDays =
    day === 1 ? 0 : Math.min(daysInMonth, prevMonthDays + 42);

  let row = null;
  for (let i = 1; i <= currentMonthDays; i++) {
    if ((i - 1) % 7 === 0) {
      row = document.createElement("tr");
      tbody.appendChild(row);
    }
    const cell = document.createElement("td");
    if (i <= prevMonthDays) {
      cell.className = "disabled";
      cell.textContent = lastMonthStart++;
    } else {
      const date = i - prevMonthDays;
      if (date === day) {
        cell.className = "selected";
      }
      cell.textContent = date;
    }
    row.appendChild(cell);
  }
}

切换月份

切换月份需要先修改 year 和 month 的值，然后调用初始化日历的函数重新渲染日历。

function prevMonth() {
  month--;
  if (month < 1) {
    year--;
    month = 12;
  }
  clearCalendar();
  initCalendar();
}

function nextMonth() {
  month++;
  if (month > 12) {
    year++;
    month = 1;
  }
  clearCalendar();
  initCalendar();
}

选择日期

选择日期需要监听鼠标单击事件，并根据点击的 <td> 元素所在行和列，获取日期信息并记录下来。同时，要把先前选中的日期的类名去掉，然后给当前选中的日期加上类名以实现高亮显示。

function selectDate(e) {
  const td = e.target;
  if (td.tagName === "TD" && !td.classList.contains("disabled")) {
    const currentSelected = document.querySelector(".selected");
    if (currentSelected) {
      currentSelected.classList.remove("selected");
    }
    td.classList.add("selected");
  }
}

案例说明

示例 1：修改月份

我们可以通过增加两个按钮，分别用于切换到上一个月和下一个月，来实现切换月份的功能。如下面的 HTML 代码所示：

<div class="calendar">
  ...
  <div class="footer">
    <button id="prevMonthBtn">&lt;</button>
    <button id="nextMonthBtn">&gt;</button>
  </div>
</div>

然后，我们需要在 JavaScript 中为这两个按钮绑定事件监听函数，并在函数中调用切换月份的函数：

document.getElementById("prevMonthBtn").addEventListener("click", prevMonth);
document.getElementById("nextMonthBtn").addEventListener("click", nextMonth);

示例 2：显示详细日期信息

在 HTML 中，我们可以为每个 <td> 元素添加一个 data-date 属性，用于存储该日期的详细信息。如下所示：

<td class="" data-date="2021-06-01">1</td>

然后，我们可以在选择日期的函数中获取这个属性的值，并将其展示在页面的另一个位置上，比如一个 <div> 元素中。具体的代码如下：

function selectDate(e) {
  const td = e.target;
  ...
  const dateStr = `${year}-${month.toString().padStart(2, "0")}-${date
    .toString()
    .padStart(2, "0")}`;
  document.getElementById("selectedDate").textContent = dateStr;
}

其中，padStart 方法用于在数字不足两位时，在前面添加一个 0。dateStr 变量用于存储当前选中日期的字符串形式，然后将其添加到页面的 <div> 元素中，即可完成显示详细日期信息的功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS简单实现移动端日历功能示例 - Python技术站