为什么在月下拉列表中选择选项 12 时仅加载 12 月?

Question

我正在处理完整的日历。 我手动添加了月份下拉菜单，从互联网上得到参考后。 到目前为止，它工作正常。 问题是，直到九月，它工作正常。 但是当我选择 10 月时，它只显示 9 月，然后对于 11 月，它显示 10 月，对于 12 月，它只显示 11 月。12 月在此下拉菜单和日历中不起作用。

我的代码如下：

$(".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 日，将 12 月更改为 12 日，将 12 月更改为 13 月，则 10 月和 11 月恢复正常，则 12 月仍然不起作用。

如何解决它。请帮忙。

Answer 1

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

1(this.value将是一个数字。changeView希望您提供完整的日期(请参阅文档(。

2( 由于月份和日期部分中的个位数值，y + '-' + this.value + '-1'将生成2019-1-1或2019-10-1等日期，这些日期在RFC2822或 ISO 日期格式中无效。

当您尝试将这些值用作日期时，您将在控制台中看到一条警告(由 momentJS 生成(，因为它无法保证它们是否会被正确解释。 显然，在您的情况下，有一些不正确的解释正在发生，导致您的问题。momentJS文档为您提供了支持的日期格式的清晰列表。另请参阅相关的完整日历 v3 日期文档。

此外，在这里同时使用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/