只显示年月的js日历插件

要创建一个只显示年月（年月视图）的JavaScript日历插件，你需要考虑以下几个基础概念：

基础概念

DOM操作：用于动态创建和修改网页内容。
事件处理：用于响应用户的交互，如点击按钮切换月份。
日期处理：使用JavaScript的Date对象来获取和处理日期和时间。

优势

简洁性：年月视图比完整的日历更简洁，适合只需要快速查看或选择年份和月份的场景。
用户友好：用户可以直观地看到不同月份的布局，便于选择特定的时间范围。

类型

静态日历：页面加载时显示固定的年月。
交互式日历：允许用户通过按钮或其他控件切换不同的年月。

应用场景

报表系统：用户可以选择特定的年月来查看相关数据。
预订系统：用户可以选择服务提供的年月范围。
项目管理工具：用于选择项目的开始和结束年月。

实现步骤

HTML结构：创建一个容器来放置日历。
CSS样式：设计日历的外观，使其看起来整洁且易于使用。
JavaScript逻辑：编写脚本来生成日历，并处理用户的交互。

示例代码

以下是一个简单的年月视图日历插件的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>年月日历</title>
<style>
  .calendar {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .month {
    text-align: center;
    padding: 5px;
    cursor: pointer;
  }
  .month:hover {
    background-color: #f0f0f0;
  }
</style>
</head>
<body>

<div class="calendar" id="calendar"></div>

<script>
function generateCalendar(year, month) {
  const calendarDiv = document.getElementById('calendar');
  calendarDiv.innerHTML = ''; // Clear previous calendar

  const header = document.createElement('div');
  header.className = 'header';
  header.innerHTML = `<button onclick="prevMonth()">Prev</button> ${year}-${month.toString().padStart(2, '0')} <button onclick="nextMonth()">Next</button>`;
  calendarDiv.appendChild(header);

  const monthsContainer = document.createElement('div');
  monthsContainer.className = 'months';
  for (let m = 0; m < 12; m++) {
    const monthDiv = document.createElement('div');
    monthDiv.className = 'month';
    monthDiv.textContent = new Date(year, m).toLocaleString('default', { month: 'long' });
    monthDiv.onclick = () => selectMonth(year, m + 1);
    monthsContainer.appendChild(monthDiv);
  }
  calendarDiv.appendChild(monthsContainer);
}

let currentDate = new Date();
let currentYear = currentDate.getFullYear();
let currentMonth = currentDate.getMonth() + 1; // getMonth() is zero-based

function prevMonth() {
  currentMonth--;
  if (currentMonth <= 0) {
    currentMonth = 12;
    currentYear--;
  }
  generateCalendar(currentYear, currentMonth);
}

function nextMonth() {
  currentMonth++;
  if (currentMonth > 12) {
    currentMonth = 1;
    currentYear++;
  }
  generateCalendar(currentYear, currentMonth);
}

function selectMonth(year, month) {
  currentYear = year;
  currentMonth = month;
  generateCalendar(currentYear, currentMonth);
}

generateCalendar(currentYear, currentMonth);
</script>

</body>
</html>