
daterangepicker.js是一个很好用的时间控件,项目中使用的地方也很多。但是最近发现了一个问题,就是比如我现在快捷筛选了近7天,但是当我再次激活时间控件的时候,发现快捷筛选的高亮效果没有显示到“近7天”筛选项上,而是显示到了“本周”上了,还有近30天和本月,也可能会对不上。
看了一下这块的实现:
this.chosenLabel = this.container.find('.ranges li:eq(' + i + ')').addClass('active').attr('data-range-key');
源文件daterangepicker.js的大概1385行。
原来是匹配到了选中的时间范围的第一个快捷筛选项,然后给这个筛选项添加了高亮效果(active)。这样的匹配逻辑是有问题的,不应该根据时间范围匹配第一个快捷筛选项,而是应该根据时间范围匹配上一次选中的那个筛选项,所以就需要把前一次点击的快捷筛选项给记录下来。好的是,控件给我们记录好了(chosenLabel,可以通过this.chosenLabel来调用),我们只要拿来使用就可以了。
修改之后的代码:
this.container.find(".ranges li[data-range-key='" +this.chosenLabel +"']").addClass('active');
this.chosenLabel = this.container.find('.ranges li:eq(' + i + ')').attr('data-range-key');
这样就可以了,匹配到上一次的选项,添加高亮效果。

本文介绍如何解决daterangepicker.js在重新激活时高亮显示错误的问题。通过修改代码使其正确匹配并高亮上次选择的时间范围。
890

被折叠的 条评论
为什么被折叠?



