JS日历相关函数使用详解

背景

很多网站需要使用日历组件来提供日期输入的功能。而JavaScript日历组件则是一种极为常见和方便的实现方式。本篇文章将介绍如何使用JavaScript实现一个日历组件，并详细介绍日历组件相关的核心函数。

实现

HTML结构

在HTML结构中，我们需要一个用于显示日期的input元素和一个用于显示日历的div元素。示例代码如下：

<input id="datepicker" type="text">
<div id="calendar"></div>

初始化函数

我们首先需要编写一个日历组件的初始化函数，该函数将在页面加载时被调用。其中包括获取日期和显示日历组件等操作。其中核心代码如下所示：

function initDatePicker() {
  var datePicker = document.querySelector("#datepicker");
  var calendar = document.querySelector("#calendar");

  // 设置input元素初始值为当前日期
  datePicker.value = formatDate(new Date());

  // 添加input元素的点击事件监听器
  datePicker.addEventListener('click', function(e) {
    // 显示日历组件
    calendar.style.display = "block";  
  });

  // 点击日历组件之外的区域时，隐藏日历组件
  document.addEventListener('click', function(e) {
    if (!calendar.contains(e.target) && !datePicker.contains(e.target)) {
      calendar.style.display = "none";
    }
  });
}

显示日历函数

接下来是显示日历的核心代码，该函数将在点击input元素后被调用。其中主要逻辑是根据当前日期生成相应的月份，并将其显示在日历组件中。核心代码如下：

function showCalendar() {
  var calendar = document.querySelector("#calendar");
  var now = new Date();
  var month = now.getMonth();
  var year = now.getFullYear();

  // 生成日历表格的HTML代码
  var html = '<table>';
  html += '<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>';
  html += '<tbody>';

  // 根据当前月份计算月份的第一天和最后一天的日期
  var firstDay = new Date(year, month, 1);
  var lastDay = new Date(year, month + 1, 0);

  // 计算日历表格中的行数
  var numRows = Math.ceil((lastDay.getDate() + firstDay.getDay()) / 7);

  // 生成日历表格中的每一个单元格
  var date = 1;
  for (var i = 0; i < numRows; i++) {
    html += '<tr>';
    for (var j = 0; j < 7; j++) {
      if ((i == 0 && j < firstDay.getDay()) || date > lastDay.getDate()) {
        html += '<td></td>';
      } else {
        html += '<td>' + date + '</td>';
        date++;
      }
    }
    html += '</tr>';
  }

  html += '</tbody></table>';

  // 显示日历表格
  calendar.innerHTML = html;
}

格式化日期函数

在日历组件中我们还需要使用一些日期格式化相关的函数来方便地获取和使用日期对象。该函数将一个日期对象以"YYYY-MM-DD"的格式进行输出。核心代码如下：

function formatDate(date) {
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();

  month = month < 10 ? '0' + month : month;
  day = day < 10 ? '0' + day : day;

  return year + '-' + month + '-' + day;
}

示例说明

下面是两个使用JavaScript日历组件的简单示例:

示例1

在一个表单中，我们需要用日历组件来获取用户输入的日期信息。具体实现方式如下：

<!DOCTYPE html>
<html>
  <head>
    <title>例1: 使用日历组件来获取日期信息</title>
    <meta charset="utf-8">
  </head>
  <body>
    <form>
      <label for="datepicker">请选择日期:</label>
      <input id="datepicker" type="text" name="date" required>
      <div id="calendar"></div>
      <button type="submit">提交</button>
    </form>

    <script>
      function init() {
        initDatePicker();
        showCalendar();
      }
      init();
    </script>
  </body>
</html>

示例2

在一个日程表中，我们需要使用日历组件来方便地查看某一天的日程安排。具体实现方式如下：

<!DOCTYPE html>
<html>
  <head>
    <title>例2: 使用日历组件来查看某一天的日程安排</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h2 id="title"></h2>
    <div id="calendar"></div>

    <script>
      function init() {
        initDatePicker();
        showCalendar();

        // 根据所选日期更新日历组件的标题
        var datePicker = document.querySelector("#datepicker");
        datePicker.addEventListener('input', function(e) {
          var title = document.querySelector("#title");
          title.innerHTML = "日程安排: " + e.target.value;
        });
      }
      init();
    </script>
  </body>
</html>