vue+vant项目移动端处理浏览器日期date不兼容问题

雨点打透心脏的1/2处 2023-07-07 08:45 89阅读 0赞

问题：在苹果手机的浏览器上处理的日期显示NaN，如下图所示情况。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]

解决方案：将日期格式中的2020-02-22 转换成为 2020/02/22

> 转换格式前： 2020-02-22 00:02:00  
> 转换格式后： 2020/02/22 00:02:00

![在这里插入图片描述][20200222121002424.png]

使用如下代码进行格式化处理：

var str = /-/g.test(format) ? format.replace(/-/g,"/") : format;  //处理ios浏览器不兼容
     var d = new Date(str);

完整代码如下：

/**
     * 时间格式化为02.09这样的格式
     */
    export function dateformat(format) {
       var str = /-/g.test(format) ? format.replace(/-/g,"/") : format;  //处理ios浏览器不兼容
        var d = new Date(str);
        var month = d.getMonth() + 1;
        var day = d.getDate();
        if (month < 10) {
            month = '0' + month;
        }
        if (day < 10) {
            day = '0' + day;
        }
        var val = month + '.' + day;
        return val;
    }

日期转换格式之后，如下图。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200222113002528.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[20200222121002424.png]: https://img-blog.csdnimg.cn/20200222121002424.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200222113949877.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70