使用dadetimepicker進行時間選擇是個很不錯的選擇,但是美中不足的是該插件在chrome中顯示彈框的時候有時會出現位置錯位的現象,而在IE中則沒有這種現象,視圖如圖1
圖1
查閱了網上的資料說這是插件的一個bug,需要修改bootstrap-datetimepicker.js插件中的源碼才能夠解決這個問題。https://github.com/smalot/bootstrap-datetimepicker/issues/363中的相關回答給出了解決問題的答案,大意就是修改第507行top = top /*+ document.body.scrollTop*/,就是將原代碼改成top=top;五樓的@santiagofs給出了 if(this.container != 'body') top = top + document.body.scrollTop 這種修改方法,六樓的@bigjoevtrj大神贊成了這種解決方法。下面的@luupig 給出了另一種解決方法 if(this.container != 'body') top = top - containerOffset.top;
然而,然而,不知道為何,我的插件中使用這種方法並沒有奏效,可能是我的bootstrap-datetimepicker.js插件和別人的版本不一樣?最大的可能是自己並沒有這種解決方法該作用於哪里。汗Σ( ° △ °|||)︴
但是在最后自己也找到了另外一種解決方法去解決了這個位置錯位問題,解決方法如下:插件569-578行代碼如圖2
圖2
在用chrome調試的過程中,代碼走進了第一個if條件句,導致出現位置的錯位。自己修改如圖3
圖3
具體修改就是將第一個if條件去掉,讓代碼走進else的條件句中。之后再根據你設置彈框出現的位置進行條件語句的選擇。然而這樣改仍然有一個問題,就彈框出現的水平位置略有偏差,如圖4,略偏左。
圖4
這里還需調整彈框出現的水平位置,修改代碼如圖5
圖5
結果如圖6:
圖6
注:這篇博文純屬博主自己經驗所得,文中所述方法並不一定適合所有情況,博主也沒發現這么修改會不會有其他牽連的錯誤發生,還需看客擦亮自己的眼睛去識別對錯真偽,如有錯誤,歡迎批評指正。