關於Element UI中日期時間選擇器在IE瀏覽器中初始化顯示的兼容性問題

一、簡單說明

       項目使用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"

             

    至此,問題得以解決。

    這些方法僅供讀者參考,希望能幫到你們,由於自己也是剛接觸不久,不足之處,歡迎大家批評指正,也可以一起交流。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章