vue项目中时间格式化出现NaN

最新推荐文章于 2024-09-13 20:58:11 发布

czp555

最新推荐文章于 2024-09-13 20:58:11 发布

阅读量4.7k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/czp555/article/details/102402842

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.VUE组件中这样写

2. 过滤器

filters: {

formatDateTime: function(val) {

var value = new Date(val);

var year = value.getFullYear();

var month = padDate(value.getMonth() + 1);

var day = padDate(value.getDate());

return year + "-" + month + "-" + day;

}

3.页面显示

4.在.vue文件<template>标签里，先把变量转为date类型，再添加过滤器

5.手机上显示正常（此情况在电脑端显示正确，部分手机也显示正确，本人在8p上显示NaN，修改后8p显示正常）

错错错错错错！！！！！！！！！！！！！！！！！！！！！！！！！！

按照以上的写法，虽然时间是格式化了，在ios上可以正常显示，但是时间都别格式化未当前时间的年月日，有问题

一下方案可以解决时间格式化在ios上出现NaN

于是想到用moment.js，成功解决问题！！

1.vue中先引入npm install moment --save

import moment from "moment/moment";

2.将时间利用moment转化为带/的格式

//注意：苹果手机不支持以“-”分割的时间形式，故必须进行格式转换为‘YYYY/MM/DD HH:mm:ss‘。 //date格式是后台返回过来的Timestamp 2018-09-01T09:10:41.000+0000 let transTime = moment(date).format('YYYY/MM/DD HH:mm:ss')

//利用moment工具生成date对象
let date = moment(t).toDate()

3.然后就可以按照你之前的格式化来格式了

 dateFormat(fmt, date) {
        if (date == null || date == "") {
            return "未知";
        }
        //注意： 苹果手机不支持以“ - ”分割的时间形式， 故必须进行格式转换为‘ YYYY / MM / DD HH: mm: ss‘。
        //date格式是后台返回过来的Timestamp 2018 - 09 - 01 T09: 10: 41.000 + 0000
        if (Object.prototype.toString.call(date) !== '[object Date]') {
            let transTime = moment(date).format('YYYY/MM/DD HH: mm: ss');
            date = moment(transTime).toDate(); // //利用moment工具生成date对象
            // date = new Date(date);
        }
        var o = {
            "M+": date.getMonth() + 1, //月份
            "d+": date.getDate(), //日
            "h+": date.getHours(), //小时
            "m+": date.getMinutes(), //分
            "s+": date.getSeconds(), //秒
            "q+": Math.floor((date.getMonth() + 3) / 3), //季度
            "S": date.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    },

ok，页面再真的显示正常了