1. Python技术站首页
  2. 其他
  3. JavaScript

js实现日历

• JavaScript

当我们开发一个网站或应用时，通常需要为用户提供日历功能。在 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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 几句话带你理解JS中的this、闭包、原型链

    下面我将为你详细讲解“几句话带你理解JS中的this、闭包、原型链”的完整攻略。 this 在Javascript中，this关键字代表函数执行时的上下文环境，它的值取决于函数被调用时的方式。如果函数是作为对象的方法被调用，this指向该对象，如果函数作为普通函数被调用，this指向全局对象window。 在ES6中，箭头函数使用词法作用域，且绑定了外层函数…

    JavaScript 2023年6月10日
    00

  • JavaScript数据存储 Cookie篇

    下面是JavaScript数据存储之Cookie篇的完整攻略。 什么是Cookie Cookie 是一种在客户端存储数据的机制，通过浏览器将数据存储在用户的计算机上。Cookie 通常由 Web 服务器生成，以便服务器可以记住用户的状态，从而改善用户对网站的体验。 Cookie 的属性 Cookie 有以下几个属性： 名称：Cookie 的名称。 值：Coo…

    JavaScript 2023年6月11日
    00

  • javascript强大的日期函数代码分享

    JavaScript强大的日期函数代码分享 日期和时间是我们在开发Web应用中最常用到的一个组件，JavaScript提供了丰富的API让我们更加便捷地处理日期和时间。下面将分享一些常用的日期函数及其代码实现。 Date对象 JavaScript中内置的Date对象提供了一些常用的处理日期和时间的方法，其中比较常用的有以下几个方法： getFullYear(…

    JavaScript 2023年5月27日
    00

  • Javascript中的 “&” 和 “|” 详解

    当我们使用JavaScript进行位操作时，可能会遇到“&”和“|”这两个符号。这两个符号分别代表按位与和按位或操作。在本文中，我们将深入讲解“&”和“|”这两个符号的详细用法。 按位与操作（&） 按位与操作的基本规则是，将两个二进制数字进行按位与操作，对于相同位置的二进制数字，当且仅当两个数字都是1时，结果为1，否则结果为0。 代码…

    JavaScript 2023年5月17日
    00

  • JS AJAX前台如何给后台类的函数传递参数

    JS AJAX（Asynchronous JavaScript and XML）使得前端能够异步发起HTTP请求，获取数据，并更新页面，而无需刷新整个页面。在传递参数方面，AJAX提供了多种方式： 通过URL传递参数 通过在URL后面添加查询字符串，即可将参数传递给后台。 let xhr = new XMLHttpRequest(); let url = &…

    JavaScript 2023年6月11日
    00

  • js显示动态时间的方法详解

    下面是关于”js显示动态时间的方法详解”的完整攻略。 一、简介 在网页或应用中，展示动态时间是非常常见的需求。JavaScript作为一门严谨、高效、灵活、结构化的脚本语言，其展示动态时间的方法也就显得格外的简单和方便。 二、JS展示动态时间的方法 2.1. 获取时间 我们可以使用JS的Date()来获取当前时间。 var currentDate = new…

    JavaScript 2023年5月27日
    00

  • 如何在WebForm中使用javascript防止连打（双击）

    下面是如何在WebForm中使用javascript防止连打（双击）的攻略。 1. 使用Javascript实现防止连打的原理 当用户在WebForm页面中连续点击同一个按钮时，可能会产生多次请求与处理，导致数据混乱，甚至出现系统异常等问题。使用Javascript可以有效防止这种情况的发生。 实现原理是通过给按钮添加一个onclick事件，在该事件里面添加…

    JavaScript 2023年6月11日
    00

  • Web Uploader文件上传插件使用详解

    Web Uploader文件上传插件使用攻略 Web Uploader是一款基于HTML5的文件上传插件，可以通过它来实现文件上传功能。下面将介绍Web Uploader的使用方法和相关示例。 一、环境准备 首先，需要在web页面中引入Web Uploader的相关js和css文件，以及Jquery库。可以通过CDN引入，也可以下载到本地使用。 <li…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部