前端开发的伙伴们肯定常常遇到一个问题,那就是要求对时间的显示格式做处理,而且格式多种多样,常常让你应接不暇,现在推荐一个好用的工具给大家!

一、Moment.js介绍

解析、校验、操作、显示日期和时间的 JavaScript 工具库;是一个轻量级的js时间处理类库,其使用简单,方便了日常开发中对时间的操作,提高了开发效率。

二、使用技巧

1、可以通过传递日期的字符串来初始化 Moment 对象:

const date = moment(日期).startOf('month').format("YYYY-MM-DD")

它接受任何字符串,按照 (顺序) 解析:

ISO 8601 肯定是最方便的。这是格式参考:

格式

含义

例子

YYYY

4 位数字年份

2018

YY

2 位数字年份

18

M

2 位数字月份号,省略前导 0

7

MM

2 位数字月号

07

MMM

3 个字母的月份名称

7 月

MMMM

全月名称

七月

dddd

全天名称

周日

gggg

4 位数字,星期

2018

gg

两位数字星期

18

w

一年中的周没有前导零

18

ww

一年中以零开头的一周

18

e

星期几,从 0 开始

4

D

2 位天数,省略前导 0

9

DD

2 位数字的天数

09

Do

天序号

9 号

T

指示时间部分的开始

HH

2 位数小时 (24 小时制),从 0 到 23

22

H

2 位数小时 (24 小时制),从 0 到 23,前导 0

22

kk

2 位数小时 (24 小时制) 从 1 到 24

23

k

2 位数小时 (24 小时制) 从 1 到 24,不加 0

23

a/A

am 或 pm

pm

hh

2 位数小时 (12 小时制)

11

mm

2 位数字分钟

22

ss

2 位数秒

40

s

2 位秒,不带前导零

40

S

1 位数毫秒

1

SS

2 位毫秒

12

SSS

3 位数毫秒

123

Z

时区

+02:00

x

UNIX 时间戳 (以毫秒为单位)

1410432140575

2、计算相对时间

moment("20111031", "YYYYMMDD").fromNow(); // 11 年前
moment("20120620", "YYYYMMDD").fromNow(); // 10 年前
moment().startOf('day').fromNow();        // 17 小时前
moment().endOf('day').fromNow();          // 7 小时内
moment().startOf('hour').fromNow();       // 39 分钟前

3、日历时间

moment().subtract(10, 'days').calendar(); // 2022/05/29
moment().subtract(6, 'days').calendar();  // 上星期四16:38
moment().subtract(3, 'days').calendar();  // 上星期日16:38
moment().subtract(1, 'days').calendar();  // 昨天16:38
moment().calendar();                      // 今天16:38
moment().add(1, 'days').calendar();       // 明天16:38
moment().add(3, 'days').calendar();       // 下星期六16:38
moment().add(10, 'days').calendar();      // 2022/06/18

4、多语言支持

moment.locale();         // zh-cn
moment().format('LT');   // 16:38
moment().format('LTS');  // 16:38:52
moment().format('L');    // 2022/06/08
moment().format('l');    // 2022/6/8
moment().format('LL');   // 2022年6月8日
moment().format('ll');   // 2022年6月8日
moment().format('LLL');  // 2022年6月8日下午4点38分
moment().format('lll');  // 2022年6月8日 16:38
moment().format('LLLL'); // 2022年6月8日星期三下午4点38分
moment().format('llll'); // 2022年6月8日星期三 16:38

5、还有更多其他好用的函数

to()

var a = moment([2007, 0, 28]);
var b = moment([2007, 0, 29]);
a.to(b);                     // "1 天内"
a.to([2007, 0, 29]);         // "1 天内"
a.to(new Date(2007, 0, 29)); // "1 天内"
a.to("2007-01-29");          // "1 天内"


diff()

var a = moment([2007, 0, 29]);
var b = moment([2007, 0, 28]);
a.diff(b, 'days') // 1


startOf() //通过将原始的 moment 设置为时间单位的开头来对其进行更改。

moment().startOf('year');    // 设置为今年一月1日上午 12:00
moment().startOf('month');   // 设置为本月1日上午 12:00
moment().startOf('quarter');  // 设置为当前季度的开始,即每月的第一天上午 12:00
moment().startOf('week');    // 设置为本周的第一天上午 12:00
moment().startOf('isoWeek'); // 根据 ISO 8601 设置为本周的第一天上午 12:00
moment().startOf('day');     // 设置为今天上午 12:00
moment().startOf('date');     // 设置为今天上午 12:00
moment().startOf('hour');    // 设置为当前时间,但是 0 分钟、0 秒钟、0 毫秒
moment().startOf('minute');  // 设置为当前时间,但是 0 秒钟、0 毫秒
moment().startOf('second');  // 与 moment().milliseconds(0); 相同