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

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,页面再真的显示正常了

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值