使用FullCalendar切换月份时出现Uncaught TypeError错误求助

使用FullCalendar组件切换选中月份时，触发以下错误：

Uncaught TypeError: Cannot read properties of null (reading 'getUTCFullYear')
报错文件：index.global.min.js:6

相关代码 #

HTML代码 #

<div id='calendar'></div>

JavaScript代码 #

const selected = [];
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      start: 'title',
      center: '',
      end: ''
    },
    initialView: 'dayGridMonth',
    selectable: true,
    dateClick: function(info) {},
  });

  document.getElementById('month').addEventListener('change', function() {
    var date = document.getElementById('month').value;
    console.log(date);
    calendar.gotoDate(date);
  });

  calendar.render();
});

报错原因 #

核心问题是calendar.gotoDate(date)接收的参数格式不合法。FullCalendar的gotoDate方法只接受有效的Date对象、ISO标准格式的日期字符串（如'2024-05'或'2024-05-01'）。如果下拉框返回的日期格式不符合要求，会导致内部处理时生成null对象，进而触发读取getUTCFullYear的错误。

解决方案 #

1. 统一日期格式为ISO标准 #

如果下拉框的选项值不是ISO格式（比如是'2024年5月'），先转换格式再传入：

document.getElementById('month').addEventListener('change', function() {
  var dateStr = document.getElementById('month').value;
  // 示例：将'2024年5月'转为'2024-05'
  const matchResult = dateStr.match(/(\d{4})年(\d{1,2})月/);
  if (matchResult) {
    const [year, month] = matchResult.slice(1);
    const isoDate = `${year}-${month.padStart(2, '0')}`;
    calendar.gotoDate(isoDate);
  }
});

2. 转为Date对象后传入 #

直接把输入值转换成有效的Date对象，同时验证有效性：

document.getElementById('month').addEventListener('change', function() {
  var date = new Date(document.getElementById('month').value);
  // 验证Date对象是否有效
  if (!isNaN(date.getTime())) {
    calendar.gotoDate(date);
  }
});

3. 确保DOM元素存在 #

额外检查month元素是否存在，避免因元素找不到导致date为undefined：

const monthSelect = document.getElementById('month');
if (monthSelect) {
  monthSelect.addEventListener('change', function() {
    var date = monthSelect.value;
    console.log(date);
    // 后续处理逻辑
    const validDate = new Date(date);
    if (!isNaN(validDate.getTime())) {
      calendar.gotoDate(validDate);
    }
  });
}

内容的提问来源于stack exchange，提问作者upcoming