为什么在月份下拉菜单中选择选项 12 时仅不加载 12 月份？

Question

我正在处理完整的日历。 在从互联网上获得参考后，我手动添加了月份下拉列表。 到目前为止它工作正常。 问题是，到 9 月为止，它运行良好。 但是当我选择十月时，它只显示九月，然后对于十一月，它显示十月，而对于十二月，它只显示十一月。十二月在此下拉列表和日历中不起作用。

我的代码如下：

$(".fc-right").append('<select class="select_month"><option value="">Select Month</option><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mrch</option><option value="4">Aprl</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select>');

$(".select_month").on("change", function (event) {
    $('#calendar_full').fullCalendar('changeView', 'month', this.value);
    $('#calendar_full').fullCalendar('gotoDate', y + '-' + this.value + '-1');
}); // y assigned as selected year.

如果我将 10 月 11 日、11 月 12 日和 12 月 13 日的选项值更改为 10 月和 11 月恢复正常，12 月仍然无法正常工作。

如何解决。请帮忙。

Answer 1

您没有创建有效的日期字符串来传递给 fullCalendar 函数。

1) this.value 将是一个数字。 changeView 希望您提供完整的日期（请参阅 documentation）。

2) y + '-' + this.value + '-1' 将生成像 2019-1-1 或 2019-10-1 这样的日期，它们不是有效的 RFC2822 或 ISO 日期格式，因为月份和日期部分中的单个数字值。

当您尝试将这些值用作日期时，您会在控制台（由 momentJS 生成）中看到警告，因为它无法保证它们是否会被正确解释。显然，在您的情况下，存在一些不正确的解释，导致您的问题。 momentJS documentation 为您提供了支持的日期格式的清晰列表。另见相关fullCalendar v3 dates documentation。

另外，在这里同时使用changeView 和 goToDate 是多余的。如果要确保选择“月”视图，请使用changeView，并传递一个日期。如果您只想更改日期而不关心视图类型，请使用goToDate。对于这个例子，我假设你想要changeView。

修复很简单：

1) 确保所有下拉选项都有 2 位数的值

2) 将硬编码的日期字符串也设置为两位数 01

3) 将完整的日期字符串传递给 fullCalendar 函数。

$(".fc-right").append('<select class="select_month"><option value="">Select Month</option><option value="01">Jan</option><option value="02">Feb</option><option value="03">Mrch</option><option value="04">Aprl</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">Aug</option><option value="09">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select>');

$(".select_month").on("change", function(event) {
  var dateStr = y + '-' + this.value + '-01';
  console.log(dateStr);
  $('#calendar_full').fullCalendar('changeView', 'month', dateStr);
});

工作演示：http://jsfiddle.net/f362m5du/2/