javascript - 为什么在月份下拉菜单中选择选项 12 时仅不加载 12 月份?
问题描述
我正在处理完整的日历。在从互联网上获得参考后,我手动添加了月份下拉列表。到目前为止它工作正常。问题是,到 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 月仍然无法正常工作。
如何修复它。请帮忙。
解决方案
您没有创建有效的日期字符串来传递给 fullCalendar 函数。
1)this.value
将是一个数字。changeView
希望您提供完整的日期(请参阅文档)。
2)由于月份和日期部分中的单个数字值,y + '-' + this.value + '-1'
将生成类似于2019-1-1
或2019-10-1
不是有效的 RFC2822 或 ISO 日期格式的日期。
当您尝试将这些值用作日期时,您会在控制台中看到警告(由 momentJS 生成),因为它不能保证它们是否会被正确解释。显然,在您的情况下,存在一些不正确的解释,导致您的问题。momentJS文档为您提供了支持的日期格式的清晰列表。另请参阅相关的fullCalendar v3 日期文档。
此外,在这里同时使用changeView
和 goToDate
是多余的。如果要确保选择“月”视图,请使用changeView
,并传递一个日期。如果您只想更改日期而不关心视图类型,请使用goToDate
. 对于这个例子,我假设你想要changeView
.
修复很简单:
1) 确保所有下拉选项都有 2 位数的值
01
2) 将硬编码的日期字符串也设置为两位数
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/
推荐阅读
- mapbox - Mapbox flyTo动画在桌面浏览器上不起作用
- javascript - 使用 Ramda 根据键名模式对数组对象进行乘法和变换。在新的平面数组中返回所有内容
- android - 将协程与分页库一起使用时未分派数据
- java - Spring Boot:通过更改标志在嵌入式和 postgresql 数据源之间切换
- laravel - 在一个域或子域上托管两个 Laravel 项目?
- firebase - 我如何将firebase输出更改为具有本机反应的文本,从我现在所拥有的
- javascript - 为什么 React 会丢弃整个 DOM 子树并从头开始重新创建它?
- python - 尝试从日期开始按月拆分/排序文件
- python - 替换列表中的索引字符串并写入文本文件
- javascript - 从通知图标中删除号码