js实现日历

当我们开发一个网站或应用时，通常需要为用户提供日历功能。在 Web 界面中，为用户提供日历的最常用方式是使用 JavaScript 实现。在这里，我将通过一些示例和说明，为大家介绍JavaScript实现日历的攻略。

1. 获取当前日期

要实现一个日历，我们首先需要获取当前日期，在 JavaScript 中可以使用 Date() 对象获取当前日期。

const currentDate = new Date();

该代码将创建一个 Date() 对象来获取当前日期和时间。如果您只需要日期，则可以使用以下代码：

const currentDay = new Date().getDate();
const currentMonth = new Date().getMonth() + 1;
const currentYear = new Date().getFullYear();

代码中，getDate() 方法可以获取当前日期（1-31），getMonth() 方法可以获取当前月份（0-11），需要加上1才是实际的月份，getFullYear() 方法可以获取当前年份。

2. 创建日历表格

接下来，我们需要创建一个日历表格，用于展示当前月份的日期。HTML代码如下：

<table>
  <thead>
    <tr>
      <th>SUN</th>
      <th>MON</th>
      <th>TUE</th>
      <th>WED</th>
      <th>THU</th>
      <th>FRI</th>
      <th>SAT</th>
    </tr>
  </thead>
  <tbody id="calendar-body"></tbody>
</table>

该代码中，我们创建了一个包含表头和主体的表格，表头包括周日到周六七个单元格，主体部分是一个 tbody 元素，其中用于添加我们生成的日期单元格。

在 JavaScript 中，我们可以使用以下代码进行日期单元格的生成：

const calendarBody = document.getElementById("calendar-body");

// 计算本月第一天的日期和星期几
const currentMonthStart = new Date(currentYear, currentMonth - 1, 1);
const firstDayOfWeek = currentMonthStart.getDay();

// 用于存储日期单元格的 HTML 字符串
let calendarHTML = "";

// 用于计算当前行剩余日期单元格的数量
let remainingCells = 7;
let currentDay = 1;

for (let i = 0; i < 6; i++) {
  calendarHTML += "<tr>";
  for (let j = 0; j < 7; j++) {
    if (i === 0 && j < firstDayOfWeek) {
      calendarHTML += "<td></td>";
      remainingCells--;
    } else if (currentDay > daysInMonth[currentMonth - 1]) {
      calendarHTML += "<td></td>";
      remainingCells--;
    } else {
      calendarHTML += `<td>${currentDay}</td>`;
      currentDay++;
      remainingCells--;
    }
  }
  calendarHTML += "</tr>";
  if (remainingCells === 0) {
    break;
  }
}

calendarBody.innerHTML = calendarHTML;

代码中，我们用 currentMonthStart 获取本月第一天的日期，使用 getDay() 获取该天是星期几。然后，我们使用双重循环生成日期单元格，根据本月第一天的星期几决定第一行缺失的日期单元格数量，以及根据本月天数决定剩余的日期单元格填充方式。最后，将 HTML 字符串插入 tbody 元素。

3. 添加交互功能

最后，我们可以为日历添加一些交互功能，例如下一个月、上一个月和返回今天。HTML 代码如下：

<button id="prevMonthBtn">Prev Month</button>
<button id="todayBtn">Today</button>
<button id="nextMonthBtn">Next Month</button>

初始时，我们需要使用 JavaScript 生成当前月份的日历，然后为按钮添加事件监听程序。

// 用于存储当前月份的天数
const daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

// 生成当前月份的日历
const generateCalendar = () => {
  // ...
};

generateCalendar();

// 为 Prev Month 按钮添加事件监听程序
const prevMonthBtn = document.getElementById("prevMonthBtn");
prevMonthBtn.addEventListener("click", () => {
  currentMonth--;
  if (currentMonth === 0) {
    currentMonth = 12;
    currentYear--;
  }
  generateCalendar();
});

// 为 Next Month 按钮添加事件监听程序
const nextMonthBtn = document.getElementById("nextMonthBtn");
nextMonthBtn.addEventListener("click", () => {
  currentMonth++;
  if (currentMonth === 13) {
    currentMonth = 1;
    currentYear++;
  }
  generateCalendar();
});

// 为 Today 按钮添加事件监听程序
const todayBtn = document.getElementById("todayBtn");
todayBtn.addEventListener("click", () => {
  currentDay = new Date().getDate();
  currentMonth = new Date().getMonth() + 1;
  currentYear = new Date().getFullYear();
  generateCalendar();
});

代码中，我们使用常量 daysInMonth 存储每个月份的天数列表，之后编写 generateCalendar() 函数用于生成日历。最后，为 Prev Month、Next Month 和 Today 三个按钮添加事件监听程序。

示例说明

以下是两个示例，用于说明如何使用 JavaScript 实现日历：

示例一：使用 moment.js 库实现日历

moment.js 是一个流行的 JavaScript 库，用于解析、验证、操作和显示日期（官网）。使用 moment.js，我们可以轻松创建和操作日期。

首先，我们需要安装并引入 moment.js 库：

<script src="https://momentjs.com/downloads/moment.min.js"></script>

接下来，我们可以使用该库的功能编写生成日历的代码：

const calendarBody = document.getElementById("calendar-body");

const currentMonth = moment().month();
const currentYear = moment().year();

const generateCalendar = () => {
  const currentMonthStart = moment([currentYear, currentMonth, 1]);
  const firstDayOfWeek = currentMonthStart.day();

  let calendarHTML = "";
  let remainingCells = 7;
  let currentDay = 1;

  for (let i = 0; i < 6; i++) {
    calendarHTML += "<tr>";
    for (let j = 0; j < 7; j++) {
      if (i === 0 && j < firstDayOfWeek) {
        calendarHTML += "<td></td>";
        remainingCells--;
      } else if (currentDay > currentMonthStart.daysInMonth()) {
        calendarHTML += "<td></td>";
        remainingCells--;
      } else {
        calendarHTML += `<td>${currentDay}</td>`;
        currentDay++;
        remainingCells--;
      }
    }
    calendarHTML += "</tr>";
    if (remainingCells === 0) {
      break;
    }
  }

  calendarBody.innerHTML = calendarHTML;
};

generateCalendar();

const prevMonthBtn = document.getElementById("prevMonthBtn");
prevMonthBtn.addEventListener("click", () => {
  const prevMonth = moment([currentYear, currentMonth, 1]).subtract(1, "months");
  currentMonth = prevMonth.month();
  currentYear = prevMonth.year();
  generateCalendar();
});

const nextMonthBtn = document.getElementById("nextMonthBtn");
nextMonthBtn.addEventListener("click", () => {
  const nextMonth = moment([currentYear, currentMonth, 1]).add(1, "months");
  currentMonth = nextMonth.month();
  currentYear = nextMonth.year();
  generateCalendar();
});

const todayBtn = document.getElementById("todayBtn");
todayBtn.addEventListener("click", () => {
  currentMonth = moment().month();
  currentYear = moment().year();
  generateCalendar();
});

代码中，我们使用 moment() 函数获取当前日期，month() 和 year() 方法获取当前月份和年份。然后，我们可以使用 moment([currentYear, currentMonth, 1]) 创建一个 moment 对象来表示当前月份的第一天。使用 .day() 方法可以获取当前月份的第一天是星期几。最后，我们使用 .daysInMonth() 方法获取当前月份的天数。

示例二：使用 DateRangePicker 插件实现日历

另一个使用 JavaScript 实现日历的方法是使用日期范围选择器插件。这些插件允许用户选择一个起始日期和一个结束日期，并可以可视化显示日期范围。

下面是一个使用 Bootstrap Date Range Picker 插件实现日历的示例。您需要引入以下库：

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/moment/dist/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

接下来，编写实现日历的代码：

const dateRangePicker = $("#calendar-picker");

dateRangePicker.daterangepicker({
  // 设置日期格式和起始日期
  startDate: moment().startOf("month"),
  endDate: moment().endOf("month"),
  locale: {
    format: "YYYY-MM-DD",
  },
});

// 当用户选择新日期时更新日历
dateRangePicker.on("apply.daterangepicker", function (ev, picker) {
  const startDate = picker.startDate;
  const endDate = picker.endDate;

  const rangeStart = startDate.clone().startOf("month");
  const rangeEnd = endDate.clone().endOf("month");

  const calendarBody = document.getElementById("calendar-body");

  let calendarHTML = "";
  for (let day = rangeStart.date(); day <= rangeEnd.date(); day++) {
    const currentDate = moment([rangeStart.year(), rangeStart.month(), day]);
    if (currentDate.isSameOrBefore(endDate) && currentDate.isSameOrAfter(startDate)) {
      calendarHTML += `<td>${currentDate.date()}</td>`;
    } else {
      calendarHTML += "<td></td>";
    }
  }

  // 插入日期单元格到表格
  calendarBody.innerHTML = `<tr>${calendarHTML}</tr>`;
});

代码中，我们首先使用 $("#calendar-picker").daterangepicker() 函数创建日期范围选择器。然后，我们可以使用 .on("apply.daterangepicker") 方法添加事件监听函数，当用户选择日期范围时更新日历。我们首先获取选定日期范围（startDate 和 endDate），然后使用 clone() 和 startOf()/endOf() 方法确定范围开始和结束日期。最后，我们使用 moment() 获取每个日期单元格的日期，并检查它是否在日期范围内，如果是，则插入一个日期单元格，否则插入一个空单元格。

以上就是实现JavaScript日历的完整攻略，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现日历 - Python技术站