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

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

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


优点:

不依赖任何第三方库

支持字符串、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:效果

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

相关文章
|
6月前
|
JavaScript 前端开发
获取JavaScript时间戳函数的5种方法
获取JavaScript时间戳函数的5种方法
61 0
|
6月前
|
JavaScript 小程序 Unix
js时间戳与日期格式的相互转换
js时间戳与日期格式的相互转换
|
2月前
|
JavaScript 前端开发
js时间戳转日期时间
js时间戳转日期时间
81 20
|
19天前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
25 1
|
1月前
|
JavaScript 前端开发
在JavaScript中如何获取时间戳?
在JavaScript中如何获取时间戳?
64 0
|
3月前
|
JavaScript 前端开发
javascript中常见获取时间戳的方法
javascript中常见获取时间戳的方法
81 0
|
5月前
|
缓存 JavaScript 前端开发
js/javascript获取时间戳的5种方法
js/javascript获取时间戳的5种方法
|
4月前
|
JavaScript 前端开发
js/javascript 操作时间日期【全】含时间日期的创建、获取、比较、计算、格式化、时间戳、昨天、今天、星期汉化、计时、相关插件等
js/javascript 操作时间日期【全】含时间日期的创建、获取、比较、计算、格式化、时间戳、昨天、今天、星期汉化、计时、相关插件等
102 0
|
5月前
|
JavaScript
JS时间戳转时间
JS时间戳转时间
|
6月前
|
JavaScript
js怎样获取到时间戳?
js怎样获取到时间戳?