react中如何系统化的处理时间操作？

news2024/11/15 13:25:53

在 Web 开发中，我们经常需要处理日期和时间的格式化。

在 React 中，这个过程变得更加容易和直观，因为我们可以使用一个叫做 moment 的 npm 包来帮助我们完成这个任务。

什么是 Moment?

Moment.js是一个JavaScript库，用于处理日期和时间。它是一个轻量级的库，在处理日期和时间方面非常强大。

Moment.js提供了许多有用的功能，包括格式化日期和时间、比较日期、添加和减去时间等。

下载地址：http://momentjs.cn/

Moment 被设计为在浏览器和 Node.js 中都能工作。

所有的代码都应该在这两种环境中都可以工作，并且所有的单元测试都应该在这两种环境中运行。

系统当前使用以下的浏览器：Windows XP 上的 Chrome，Windows 7 上的 IE 8、9 和 10，Windows 10 上的 IE 11，Linux 上最新的 Firefox，OSX 10.8 和 10.11 上最新的 Safari。

如何使用 Moment?

安装

我们可以使用以下任意一种方式安装 moment。

npm install moment --save   # npm
yarn add moment             # Yarn
Install-Package Moment.js   # NuGet
spm install moment --save   # spm
meteor add momentjs:moment  # meteor

引入组件

在安装完成后，我们就可以在 React 组件中导入 moment 了。

import moment from 'moment';

使用 moment 格式化时间

<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
<h3>当前时间:{moment().format('YYYY-MM-DD HH:mm:ss')}</h3>
<h3> 今天星期几：{moment().format('d')}</h3>
<h3>时间戳{moment().format('X')}</h3>
<h4>2年前：{moment("2017-10-01", "YYYY-MM-DD").fromNow()}</h4>
<h1>20天后的日期：{moment().add('days',20).format('YYYY年MM月DD日')}</h1>
<h2>9小时后：{moment().add('hours',9).format('HH:mm:ss')}</h2>
<h1>第几季度：{moment().quarter()}</h1>
<h2>年：{moment().year()}</h2>
<h2>周：{moment().week()}</h2>
<h2>周：{moment().isoWeeks()}</h2>
<h2>时间：{moment().calendar()}</h2>

完整代码

import React from "react"; 
import moment from 'moment';

export default function MomentComponent() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      <h3>当前时间:{moment().format("YYYY-MM-DD HH:mm:ss")}</h3>
      <h3> 今天星期几：{moment().format("d")}</h3>
      <h3>时间戳{moment().format("X")}</h3>
      <h4>2年前：{moment("2017-10-01", "YYYY-MM-DD").fromNow()}</h4>
      <h1>20天后的日期：{moment().add("days", 20).format("YYYY年MM月DD日")}</h1>
      <h2>9小时后：{moment().add("hours", 9).format("HH:mm:ss")}</h2>
      <h1>第几季度：{moment().quarter()}</h1>
      <h2>年：{moment().year()}</h2>
      <h2>周：{moment().week()}</h2>
      <h2>周：{moment().isoWeeks()}</h2>
      <h2>时间：{moment().calendar()}</h2>
    </div>
  );
}

moment 常用命令

获取当前时间

//获取 当前时间
moment().format('YYYY-MM-DD HH:mm:ss');   //2020-08-25 10:23:59

//获取年份
moment().year();       //2020
moment().get('year');  //2020

//获取月份(0：一月份  11: 12月份 )
moment().month();       //7
moment().get('month');  //7

//获取一个月的某一天
moment().date();       //25
moment().get('date');  //25

//获取小时
moment().hours();          //11
moment().get('hours');     //11

//获取分钟
moment().minutes();        //11
moment().get('minutes');   //11

//获取秒数
moment().seconds();        //17
moment().get('seconds');   //17

//获取 今天星期几
moment().format('dddd');     //Tuesday
moment().format('d');        //2

moment().day();              //2（0~6 分别代表周日到周六）
moment().weekday();          //2（0~6 分别代表周日到周六）
moment().isoWeekday();       //2（1~7 分别代表周一到周日）
moment().get('date');        //2
moment().get('weekday');     //2
moment().get('isoWeekday');  //2

时间戳

时间戳：moment().format('X');

将时间戳转为时间

const dataTime = record.favTime;
let time= moment(dataTime).format('YYYY-MM-DD HH:mm:ss');

相对时间

相对时间：moment("20190101", "YYYYMMDD").fromNow();
10天后的日期：moment().add('days',10).format('YYYY年MM月DD日');
10小时后：moment().add('hours',10).format('HH:mm:ss');

//add       加时间    
//subtract  减时间
moment().subtract(10, 'days').format('YYYY-MM-DD HH:mm:ss');  //2020-08-15 10:51:48
moment().subtract(6, 'days').format('YYYY-MM-DD HH:mm:ss');  //2020-08-19 10:51:48
moment().subtract(3, 'days').format('YYYY-MM-DD HH:mm:ss');  //2020-08-22 10:51:48
moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss');  //前一天：2020-08-24 10:51:48
moment().format('YYYY-MM-DD HH:mm:ss');                      //当前时间：2020-08-25 10:51:48
moment().add(1, 'days').format('YYYY-MM-DD HH:mm:ss');       //后一天：2020-08-26 10:51:48
moment().add(3, 'days').format('YYYY-MM-DD HH:mm:ss');       //2020-08-28 10:51:48
moment().add(10, 'days').format('YYYY-MM-DD HH:mm:ss');      //2020-09-04 10:51:48

moment().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss');  //前一年：
moment().add(1, 'year').format('YYYY-MM-DD HH:mm:ss');       //后一年：

moment().subtract(1, 'hours').format('YYYY-MM-DD HH:mm:ss');  //前一小时：
moment().add(1, 'hours').format('YYYY-MM-DD HH:mm:ss');       //后一小时：

// startOf 设置为起始时间 
moment("20111031", "YYYYMMDD").fromNow();    //9 years ago
moment().startOf('day').fromNow();           //11 hours ago
moment().startOf('hour').fromNow();          //an hour ago
moment().endOf('day').fromNow();             //in 13 hours
moment().endOf('hour').fromNow();            //in 15 minutes

//年初
moment().startOf('year').format('YYYY-MM-DD HH:mm:ss');   //2020-01-01 00:00:00
//月初
moment().startOf('month').format('YYYY-MM-DD HH:mm:ss');  //2020-08-01 00:00:00
//日初
moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');    //2020-08-25 00:00:00
//周初  本周第一天（周日）
moment().startOf('week').format('YYYY-MM-DD HH:mm:ss');   //2020-08-23 00:00:00
//本周周一初
moment().startOf('isoWeek').format('YYYY-MM-DD HH:mm:ss');  //2020-08-24 00:00:00

设置时间

//设置年份
moment().year(2019);
moment().set('year', 2019);
moment().set({year: 2019});

//设置月份
//0~11, 0: 1月份, 11: 12月份
moment().month(8);        
moment().set('month', 8);

//设置  某个月中的某一天  某个周中的某一天  小时  分钟  秒数  同上，这里就不写了

格式化指定时间：

//格式化指定时间
moment(time).format('YYYY-MM-DD');

时间差

now_time.diff(start_time,"hour");      //小时数
now_time.diff(start_time,"minute");    //分钟数
now_time.diff(start_time,"second");    //现在和初始时间相差的秒数
now_time.diff(start_time, 'months');   //月数
now_time.diff(start_time, 'weeks');    //周数
now_time.diff(start_time, 'days');     //天数

更加详细内容，请查看 http://momentjs.cn/docs/

参考文档