一、踩坑背景

在做某个项目的过程中,系统要求兼容safari,在使用Element-ui情况下,用到了datepicker组件,但是datepicker在type为daterange情况下,页面首次加载给日期组件赋初值,但是变量是有值,视图没有展示出来。

于是在解决这个问题的过程中,我在github上找到了初步的解决办法:https://github.com/kenberkeley/fix-date。

引入fix-date这个模块,可能还是有点问题。

二、问题的根源

因为自己开发环境不是Mac,所以没有safari浏览器。之前一直以为是Element-ui日期组件本身的问题,其实并不是。问题出在safari浏览器上,对于new Date(),这个方法所接受的参数,不能是'2019-02-27 23:59:59'格式,还有些不兼容的格式,大家可以有空自己在safari浏览器下试验下。所以在使用new Date('2019-2-27 23:59:59')导致本身解析出来的是NaN-NaN-NaN NaN:NaN:NaN,所以Element-ui日期组件上才不会显值。改了之后,发现日期组件还是没有显示出来。结果是因为传给日期组件的日期格式也有一定的问题。不能传递'2019-2-27 23:59:59',可以参考value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],element-ui官网的赋值方式来赋值。这时候就没什么问题。

三、解决办法。

1.fix-date(一个npm模块,可以去npm.js上下载)

https://github.com/kenberkeley/fix-date/blob/master/README.md

按照这个地址上面的方法使用,便可以解决。(有可能针对某些版本的safari浏览器可能无效)

2.对问题的根源做解决

对于new Date('2019-02-27 23:59:59')这种格式,safari不兼容,所以要将xxxx-xx-xx的时间格式,转换为 xxxx/xx/xx的格式 。

'2019-02-27 23:59:59'.replace(/-/g,'/'))

对于初始化日期组件,没有显示的问题,解决参考element-ui官网的方式:

value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]
05-15 01:53