momentjs
是一款非常火的时间处理工具,通过它你可以很方便的对时间进行格式化输出、判断先后、加减操作、而且还支持多语言,是一款良心工具。
一、momentjs简介
它的官网http://momentjs.cn ,它是一个时间处理类库。它被设计为既支持浏览器也能在Nodejs环境下运行:window 7 下的IE8, IE9, XP 系统下稳定版的 Chrome 浏览器, Mac系统下的 Safari 10.8 以及 Linux 系统下的稳定版 Firefox 浏览器。可以说已经覆盖了所有的浏览器支持了。
在前端对日期时间的处理,使用它能帮助我们带来极大的便利。下面开始安装它。
二、momentjs安装
通过script引入
momentjs
已在cdnjs.cloudflare上入驻,你可以直接使用cdn链接快速将其引入到你的页面内使用:
<!-- 版本2.24.0 -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js'></script>
它非常小,在经过 gzip 后甚至可以将流量限定在 17kb 以内。甚至察觉不到它的引入会给页面的加载带来延迟。
使用npm安装
使用npm进行安装也非常简单:
npm install moment --save
即可安装最新版本的momentjs
。
更多安装方法
点击这里 可以查看更多环境下的安装方式。
三、实例化时间
在以前,通过new Date()
就可以获取到当前时间了,但其功能不够强大。现在使用momentjs
也依然非常简便:
1、当前时间
let now = moment(); // 拿到当前时间,now 变量表示了当前时间,它是一个moment对象。
2、使用指定时间
也常常会出现根据已有的一个时间数据创建一个可操作的时间对象的需求,momentjs
也是支持的,同时它还支持所有原本new Date()
支持的参数。
指定字符串时间-标准 ISO 8601 格式
momentjs
允许你使用多种格式的字符串进行初始化:
let someDate = moment("2019-12-23 06:38:00.000");
let someDate = moment("2019-12-23 06:38:00");
let someDate = moment("2019-12-23 06:38");
let someDate = moment("2019-12-23 06");
let someDate = moment("2019-12-23T06");
let someDate = moment("2019-12-23");
let someDate = moment(new Date());
指定字符串时间-指定自定义格式
除了能直接使用标准 ISO 8601 的字符串时间,还支持你自己指定你希望的格式。就像这样:
let someDate = moment("12月23日2019年06时38分00秒", "MM月DD日YYYY年HH时mm分ss秒");
你其实只需要知道各个字母代表了什么含义,就可以组建出符合你需求的任意格式。它们的规则如下:
字符(大小写严格区分) | 含义 | 示列 |
---|---|---|
Y | 年份 | YYYY:四位数年份,YY:两位数 |
M | 月份 | MM: 数字两位数,M:数字一位数,MMM:简写描述型月份(Dec),MMMM:详细描述型月份(December) |
D | 天 | D:一位天数,DD:2位天数。DDD: 在一年中的第几天,DDDD:在一年中的第几天 |
X | 时间戳(秒) | 这是精确到秒到,实际上它是一个小数,小数点后面也就是毫秒,小数点前面就是精确到秒 |
x | 时间戳(毫秒) | 一个整数,精确到毫秒的时间戳 |
d | 星期里的天 | ddd:简写描述型的星期几(Sun),dddd:详细描述型的星期几(Sunday) |
e | 星期里的天 | e:一位纯数字,ee:2位纯数字 |
H | 24小时制的小时 | H:一位纯数字,HH:2位 |
h | 12小时制的小时 | h: 一位, hh:2位 |
a | 12小时制时指定上下午 | a:小写(am,pm),A:大写(AM,PM) |
m | 分钟 | m:一位,mm:两位 |
s | 秒 | s:一位,ss:两位 |
还有更详细的用法,请点击这里查看。
指定时间-使用对象
同时你还可以使用一个对象来直接创建指定时间的对象:
let someDate = moment({ year :2010, month :3, day :5, hour :15, minute :10, second :3, millisecond :123});
此对象支持下列参数:
{
y: 2010,
year :2010,
month :3,
M: 3,
day :5,
d: 5,
hour :15,
h: 15,
minute :10,
m: 10
second :3,
s: 3,
millisecond :123,
ms: 123
}
指定时间-时间戳
直接使用时间戳初始化:
let someDate = moment(1318781876406); // 毫秒时间戳
let someDate = moment.unix(1318781876.406); // 秒时间戳
let someDate = moment.unix(1318781876); // 秒时间戳
更多实例化方法见点击这里。
四、格式化输出
当你有一个moment时间对象后,直接使用format
方法即可将时间输出到指定的格式中:
someDate.format("YYYY/MM/DD HH-mm-ss"); // 2019/12/23 10-12-32
其格式语法和上述相同。
五、时间操作
moment提供了强大的时间操作,这是它一大亮点之一。
1、加
let newDate = someDate.add(1, "days"); // 加1天
let newDate = someDate.add(1, "d"); // 加1天
let newDate = someDate.add(1, "years"); // 加1年
let newDate = someDate.add(1, "y"); // 加1年
// ...
支持的单位可以是下面的:
单位 | 简写 | 含义 |
---|---|---|
years | y | 年 |
quarters | Q | 季 |
months | M | 月 |
weeks | w | 周 |
days | d | 天 |
hours | h | 小时 |
minutes | m | 分钟 |
seconds | s | 秒 |
milliseconds | ms | 毫秒 |
2、减
let newDate = someDate.subtract(1, "days"); // 减去1天
let newDate = someDate.subtract(1, "d"); // 减去1天
let newDate = someDate.subtract(1, "years"); // 减去1年
let newDate = someDate.subtract(1, "y"); // 减去1年
// ...
这个单位和用法与加法一样的。
更多操作请点击这里。
五、踩坑记录
moment的却非常好用,但我在使用时遇到一个很扯蛋的问题:
- 在使用
npm
安装了momentjs后,打包时会将momentjs所有的语言都打包,导致打包结果臃肿,而实际上是用不到那么多的语言的。
此问题理应可以通过配置达到只打包对应语言的,但笔者偷懒,直接把npm安装取消掉了,使用script
方式引入到html页面中,直接只使用默认语言。如果有大佬知道着怎么配置使得momentjs打包时只打包需要的语言,请务必留下大佬的解决方案。
六、总结
本文仅简单的记录了一些常用的功能,如果还需要更详细或者本文未列出的使用方法,请到momentjs
的官网进行详细的阅读文档。官网文档:http://momentjs.cn/docs。