一、踩坑背景
在做某个项目的过程中,系统要求兼容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)]