前端开发的伙伴们肯定常常遇到一个问题,那就是要求对时间的显示格式做处理,而且格式多种多样,常常让你应接不暇,现在推荐一个好用的工具给大家!
一、Moment.js介绍
解析、校验、操作、显示日期和时间的 JavaScript 工具库;是一个轻量级的js时间处理类库,其使用简单,方便了日常开发中对时间的操作,提高了开发效率。
二、使用技巧
1、可以通过传递日期的字符串来初始化 Moment 对象:
const date = moment(日期).startOf('month').format("YYYY-MM-DD")
它接受任何字符串,按照 (顺序) 解析:
- ISO 8601
- The RFC 2822 时间日期格式
- 日期对象接受的格式
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 |
| 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); 相同