一、簡單說明
項目使用Vue+Element UI進行開發,使用了 DateTimePicker 日期時間選擇器。
二、問題描述
打開修改對話框(進行選擇日期操作可以正常顯示),在谷歌瀏覽器中初始化時能夠顯示日期和時間,但是一到IE瀏覽器中初始化時無法回填在顯示框,不過控制檯可以輸出時間。
谷歌瀏覽器中:
IE瀏覽器(11版)中:
三、解決方案
前兩種方法是筆者在網上找到的最多的回答,但是並未解決筆者的問題,第三種方法解決了問題,讀者可以直接跳過前兩種看第三種方法。
1.去掉placeholder屬性
此方法筆者採用時,問題沒有得到解決。
(PS:但是據說,此方法也適用於下拉框的值已經被選中,但是顯示框沒有值顯示情況,筆者還未證實,如果有證實過的讀者歡迎在評論區留言,感謝!)
2.對傳入日期數據進行格式化處理
時間控件選擇在ie11上發現不能顯示傳入的時間,選擇時間控件點擊會出現無效的結果. 發現傳入的值時間格式爲2018-01-22這種格式會出現兼容的問題. 所以必須替換格式 this.endTime = this.orderData.endTime.replace(/-/g, "/");
(PS:由於筆者也是剛接觸Vue和Element UI不久,所以此種方法可能由於自己的原因沒有弄出來,未解決筆者問題,報以下錯誤,想着以後再回過頭來看或許就會了,故也記錄下來,具體可參考:https://juejin.im/post/5c46d591f265da610e806216)
3. 使用value-format參數來綁定值的格式
在網上查找了挺多資料,主要有看到兩種方法,但是筆者試過了,問題沒有解決,第三種是最終解決辦法,在引入組件時,添加value-format參數來綁定值的格式:
value-format="yyyy-MM-dd hh:mm:ss"
至此,問題得以解決。
這些方法僅供讀者參考,希望能幫到你們,由於自己也是剛接觸不久,不足之處,歡迎大家批評指正,也可以一起交流。