react中monent如何获取日期?


本文摘自PHP中文网,作者青灯夜游,侵删。

方法:1、使用“npm install moment --save”安装moment;2、在组件中使用import语句引入moment;3、使用monent提供的方法来获取日期,例“moment().format();”获取当前时间。

本教程操作环境:windows7系统、React16版,该方法适用于所有品牌电脑。

相关推荐:《React视频教程》

在写项目时,我们有时需要获取当前时间,这时我们除了用之前 js 获取日期的方式之外,也可以使用 moment 来获取日期。

1、安装 moment

1

npm install moment --save

2、引入 moment

1

import moment from 'moment'

3、使用 moment

获取当前时间:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

//获取 当前时间

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

设置时间:

1

2

3

4

5

6

7

8

9

10

11

//设置年份

moment().year(2019);

moment().set('year', 2019);

moment().set({year: 2019});

 

//设置月份

//0~11, 0: 1月份, 11: 12月份

moment().month(8);       

moment().set('month', 8);

 

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

格式化指定时间:

1

2

//格式化指定时间

moment(time).format('YYYY-MM-DD');

时间差:

1

2

3

4

5

6

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');     //天数

相对时间:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

//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');       //后一小时:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

// 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

更多编程相关知识,请访问:编程视频课程!!

以上就是react中monent如何获取日期?的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

React中怎么获取input的值

redux和React有啥区别

React怎么跳出新页面

React怎么安装jquery

如何解决React中文乱码问题

React中的portal是做什么的

React中get与post的区别是什么

React向数组中追加数据的方法

React中怎么传递事件对象

React中怎么遍历对象

更多相关阅读请进入《React》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...