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

本文介绍如何解决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');

这样就可以了,匹配到上一次的选项,添加高亮效果。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值