moment转化时间戳出现Invalid Date的问题及解决

 更新时间:2023年05月12日 17:02:50   作者:Cherry☼  
这篇文章主要介绍了moment转化时间戳出现Invalid Date的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

moment转化时间戳出现Invalid Date

项目用在使用moment转换时间戳的时候出现Invalid Date

通过后端接口发现接口返回的字段是 beginTime: “1612922019029”

在数据传递得过程中类型发生了变化 所以得把字符串用Number()转化下数字类型即可正常显示

// 转换数字类型
beginTime: this.$moment(Number(item.beginTime)).format(
 "YYYY-MM-DD"
),

还有个小问题就是如果某个时间戳为空是时,则会显示1970-01-01

后端返回的字段

所以为了防止显示1970-01-01,所以通过三目运算判断一下

 endTime:
	   item.endTime == ""
	     ? ""
	     : this.$moment(Number(item.endTime)).format("YYYY-MM-DD"),

这样页面上页就不会出现1970-01-01

使用Moment.js处理时间戳转化为时间年月

Moment.js 是一个 JavaScript 日期处理类库(处理时间格式化的npm包),用于解析、检验、操作、以及显示日期,在新公司的项目中,大量使用Moment来处理时间日期,非常方便好用。

Moment.js 中文网:

http://momentjs.cn/

优点

  • 不依赖任何第三方库
  • 支持字符串、Date、时间戳以及数组等格式
  • 可以同时在浏览器和node环境中使用
  • 前后端通用,文档也很详细
  • 方便了日常开发中对时间的操作,提高了开发效率

使用步骤

1:在项目里面安装Moment

cnpm install moment --save

2:在要使用的组件里面引入

import moment from 'moment'; 

3:时间戳如下

{
  "users": [
    {
        "startTime":"1572502840091",
        "endTime":"1572512489920"
    }, {
      "startTime":"1572512489920",
      "endTime":"1572513935374"
    }
]
}

4:代码

这里把时间戳做成了mock数据,使用axios对数据接口进行请求,请求完成之后渲染在前端界面,如果有不理解的地方可以查看专题从零开始学react系列教程。

import React from 'react';
import axios from 'axios';
import moment from 'moment';
class Time extends React.Component {
  //构造函数
  constructor() {
    super();
    //react定义数据
    this.state = {
      list: []
    }
  }
  //请求接口的方法
  getData = () => {
    var api = 'http://localhost:3004/users';
    axios.get(api)
      .then((response) => {
        // handle success
        console.log(response.data);
        //用到this需要注意指向,箭头函数
        this.setState({
          list: response.data
        })
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      });
  }
  render() {
    return (
      <div>
        <h2>时间戳转化为时间</h2>
        <button onClick={this.getData}>获取时间</button>
        <ul>
          {
            this.state.list.map((value, key) => {
              let start = moment(parseInt(value.startTime)).format('YYYY/MM/DD hh:mm:ss');
              let end = moment(parseInt(value.endTime)).format('YYYY/MM/DD hh:mm:ss');
              return (
                <li key={key}>
                  <span>开始时间:{start}</span>
                  <span>结束时间:{end}</span>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}
export default Time;

5:效果

代码运行如下,获取到了时间年月日了。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vuex数据持久化的两种实现方案

    vuex数据持久化的两种实现方案

    在vuex的时候刷新以后里面存储的state就会被浏览器释放掉,因为我们的state都是存储在内存中的,所以一刷新页面就会把state中的数据重置,这就涉及到vue数据持久化的问题,这篇文章主要给大家介绍了关于vuex数据持久化的两种实现方案,需要的朋友可以参考下
    2021-07-07
  • vue项目报错:Missing script:"serve"的解决办法

    vue项目报错:Missing script:"serve"的解决办法

    这篇文章主要给大家介绍了关于vue项目报错:Missing script:"serve"的解决办法,"missing script: serve"是一个错误信息,意味着在执行启动脚本时,找不到名为"serve"的脚本,需要的朋友可以参考下
    2023-11-11
  • 解决vuecli3中img src 的引入问题

    解决vuecli3中img src 的引入问题

    这篇文章主要介绍了解决vuecli3中img src 的引入问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue实现底部侧边工具栏的实例代码

    Vue实现底部侧边工具栏的实例代码

    这篇文章主要介绍了Vue实现底部侧边工具栏的实例代码,文中通过分享一段代码介绍vue 侧边导航栏递归显示功能,需要的朋友可以参考下
    2018-09-09
  • vue项目引入本地bootstrap不生效问题及解决

    vue项目引入本地bootstrap不生效问题及解决

    这篇文章主要介绍了vue项目引入本地bootstrap不生效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue项目发布有缓存正式环境不更新的解决方案

    vue项目发布有缓存正式环境不更新的解决方案

    vue项目每次发布新版本后,测试人员都要强制刷新才能更新浏览器代码来验证bug,下面这篇文章主要给大家介绍了关于vue项目发布有缓存正式环境不更新的解决方案,需要的朋友可以参考下
    2024-03-03
  • uniapp引入模块化js文件和非模块化js文件的四种方式

    uniapp引入模块化js文件和非模块化js文件的四种方式

    这篇文章主要介绍了uniapp引入模块化js文件和非模块化js文件的四种方式,本文结合实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • vue+vant使用图片预览功能ImagePreview的问题解决

    vue+vant使用图片预览功能ImagePreview的问题解决

    这篇文章主要介绍了vue+vant使用图片预览功能ImagePreview的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • Vue.js devtool插件安装后无法使用的解决办法

    Vue.js devtool插件安装后无法使用的解决办法

    Vue.js devtool插件最近在开发人员中很火,这篇文章主要为大家详细介绍了Vue.js devtool插件安装后无法使用,出现提示“vue.js not detected”的解决办法
    2017-11-11
  • 探秘vue-rx 2.0(推荐)

    探秘vue-rx 2.0(推荐)

    这篇文章主要介绍了探秘vue-rx 2.0(推荐),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论