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快捷筛选项的高亮显示问题修复的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。