【JS】你需要了解的时间工具《momentjs》

本文对momentjs的使用方法和踩坑做了详细的讲解。

【JS】你需要了解的时间工具《momentjs》

by img MicroAnswer Create at:Dec 11, 2019 1:22:38 PM 

Tags: date time moment 时间 格式化时间

本文对momentjs的使用方法和踩坑做了详细的讲解。


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)
DD:一位天数,DD:2位天数。DDD: 在一年中的第几天,DDDD:在一年中的第几天
X时间戳(秒)这是精确到秒到,实际上它是一个小数,小数点后面也就是毫秒,小数点前面就是精确到秒
x时间戳(毫秒)一个整数,精确到毫秒的时间戳
d星期里的天ddd:简写描述型的星期几(Sun),dddd:详细描述型的星期几(Sunday)
e星期里的天e:一位纯数字,ee:2位纯数字
H24小时制的小时H:一位纯数字,HH:2位
h12小时制的小时h: 一位, hh:2位
a12小时制时指定上下午a:小写(am,pm),A:大写(AM,PM)
m分钟m:一位,mm:两位
ss:一位,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年
// ...

支持的单位可以是下面的:

单位简写含义
yearsy
quartersQ
monthsM
weeksw
daysd
hoursh小时
minutesm分钟
secondss
millisecondsms毫秒

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

Full text complete, Reproduction please indicate the source. Help you? Not as good as one:
Comment(Comments need to be logged in. You are not logged in.)
You need to log in before you can comment.

Comments (0 Comments)