为什么在月份下拉列表中选择选项 12 时,只有 12 月份不加载?
Why December month only not loading when choosing option 12 in month drop down?
我正在处理完整的日历。
在从互联网上获得参考后,我手动添加了月份下拉列表。
到目前为止它工作正常。
问题是,直到 9 月,它都运行良好。
但是当我选择 Oct 时,它只显示 Sep,然后选择 Nov- 它显示 Oct,而对于 Dec,它只显示 Nov。十二月不适用于此下拉列表和日历。
我的代码如下:
$(".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.
如果我将 Oct 的选项值更改为 11,Nov 更改为 12,Dec 更改为 13,那么 10 月和 11 月恢复正常,12 月仍然无法正常工作。
如何解决。请帮忙。
您没有创建要传递给 fullCalendar 函数的有效日期字符串。
1) this.value
将是一个数字。 changeView
希望您提供完整的日期(参见 documentation)。
2) y + '-' + this.value + '-1'
将生成像 2019-1-1
或 2019-10-1
这样的日期,这些日期不是有效的 RFC2822 或 ISO 日期格式,因为月份和日期部分中的值为个位数.
当您尝试将这些值用作日期时,您会在控制台(由 momentJS 生成)中看到一条警告,因为它不能保证它们是否会被正确解释。显然,在您的情况下,正在进行一些不正确的解释,从而导致您的问题。 momentJS documentation gives you a clear list of supported date formats. See also the related fullCalendar v3 dates documentation.
此外,同时使用 changeView
和 goToDate
在这里是多余的。如果要确保选择 "month" 视图,请使用 changeView
,并传递一个日期。如果您只想更改日期而不关心视图类型,请使用 goToDate
。对于这个例子,我假设你想要 changeView
.
修复很简单:
1) 确保您的所有下拉选项都具有两位数的值
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);
});
我正在处理完整的日历。 在从互联网上获得参考后,我手动添加了月份下拉列表。 到目前为止它工作正常。 问题是,直到 9 月,它都运行良好。 但是当我选择 Oct 时,它只显示 Sep,然后选择 Nov- 它显示 Oct,而对于 Dec,它只显示 Nov。十二月不适用于此下拉列表和日历。
我的代码如下:
$(".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.
如果我将 Oct 的选项值更改为 11,Nov 更改为 12,Dec 更改为 13,那么 10 月和 11 月恢复正常,12 月仍然无法正常工作。
如何解决。请帮忙。
您没有创建要传递给 fullCalendar 函数的有效日期字符串。
1) this.value
将是一个数字。 changeView
希望您提供完整的日期(参见 documentation)。
2) y + '-' + this.value + '-1'
将生成像 2019-1-1
或 2019-10-1
这样的日期,这些日期不是有效的 RFC2822 或 ISO 日期格式,因为月份和日期部分中的值为个位数.
当您尝试将这些值用作日期时,您会在控制台(由 momentJS 生成)中看到一条警告,因为它不能保证它们是否会被正确解释。显然,在您的情况下,正在进行一些不正确的解释,从而导致您的问题。 momentJS documentation gives you a clear list of supported date formats. See also the related fullCalendar v3 dates documentation.
此外,同时使用 changeView
和 goToDate
在这里是多余的。如果要确保选择 "month" 视图,请使用 changeView
,并传递一个日期。如果您只想更改日期而不关心视图类型,请使用 goToDate
。对于这个例子,我假设你想要 changeView
.
修复很简单:
1) 确保您的所有下拉选项都具有两位数的值
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);
});