daterangepicker.js是一個(gè)很好用的時(shí)間控件，項(xiàng)目中使用的地方也很多。但是最近發(fā)現(xiàn)了一個(gè)問題，就是比如我現(xiàn)在快捷篩選了近7天，但是當(dāng)我再次激活時(shí)間控件的時(shí)候，發(fā)現(xiàn)快捷篩選的高亮效果沒有顯示到“近7天”篩選項(xiàng)上，而是顯示到了“本周”上了，還有近30天和本月，也可能會(huì)對(duì)不上。

看了一下這塊的實(shí)現(xiàn)：

this.chosenLabel = this.container.find('.ranges li:eq(' + i + ')').addClass('active').attr('data-range-key');

?源文件daterangepicker.js的大概1385行。

原來是匹配到了選中的時(shí)間范圍的第一個(gè)快捷篩選項(xiàng)，然后給這個(gè)篩選項(xiàng)添加了高亮效果(active)。這樣的匹配邏輯是有問題的，不應(yīng)該根據(jù)時(shí)間范圍匹配第一個(gè)快捷篩選項(xiàng)，而是應(yīng)該根據(jù)時(shí)間范圍匹配上一次選中的那個(gè)篩選項(xiàng)，所以就需要把前一次點(diǎn)擊的快捷篩選項(xiàng)給記錄下來。好的是，控件給我們記錄好了(chosenLabel,可以通過this.chosenLabel來調(diào)用)，我們只要拿來使用就可以了。

修改之后的代碼：

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');

這樣就可以了，匹配到上一次的選項(xiàng)，添加高亮效果。

總結(jié)

以上是生活随笔為你收集整理的daterangepicker.js快捷筛选项的高亮显示问题修复的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。