datetimepicker 外掛程式位置問題解決經驗

標籤：

      使用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

      註：這篇博文純屬博主自己經驗所得，文中所述方法並不一定適合所有情況，博主也沒發現這麼修改會不會有其他牽連的錯誤發生，還需看客擦亮自己的眼睛去識別對錯真偽，如有錯誤，歡迎批評指正。

datetimepicker 外掛程式位置問題解決經驗