daterangepicker.js快捷筛选项的高亮显示问题修复

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快捷筛选项的高亮显示问题修复的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。