一、简单说明
项目使用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不久,所以此种方法可能由于自己的原因没有弄出来,未解决笔者问题,报以下错误,想着以后再回过头来看或许就会了,故也记录下来,具体可参考:)
3. 使用value-format参数来绑定值的格式
在网上查找了挺多资料,主要有看到两种方法,但是笔者试过了,问题没有解决,第三种是最终解决办法,在引入组件时,添加value-format参数来绑定值的格式:
value-format="yyyy-MM-dd hh:mm:ss"
至此,问题得以解决。
这些方法仅供读者参考,希望能帮到你们,由于自己也是刚接触不久,不足之处,欢迎大家批评指正,也可以一起交流。