使用Moment.js处理日期

目录

各个浏览器对 Date.parse 的实现不一致,如果需要解析日期字符串,最好使用独立的 js 库。
Moment.js 就是一个解析、验证、操控和显示日期的js库。
项目主页://momentjs.com/
Github主页:https://github.com/moment/moment/

安装

Node.js

npm install moment
var moment = require('moment');
moment().format();

ES6

npm install moment

在使用 Moment.js 的模块中导入 moment。

import moment from 'moment';
moment().format();

下面只介绍最简单的用法,详细用法请参考官方文档。

解析

当前时刻

直接调用,返回表示当前时间的 Moment 对象。等同于 {js}moment(new Date()){/js}

moment();

解析字符串

moment(String);

先按匹配 ISO 8601,如果没有合适的格式,再使用 {js}new Date(string){/js} 创建日期。

moment("2016-11-25")

 
可以调用{js}isValid{/js}方法检测日期是否有效。

>moment("not a valid date").isValid()
false

解析提供格式的字符串

moment(String, String);

为了实现精确解析,推荐使用该方法。

moment("2016-11-25T13:41:00 +0000", "YYYY-MM-DDTHH:mm:ss Z")
格式字段如下: 年月日  
<th>
  Example
</th>

<th>
  Description
</th>
<td>
  <code>2014</code>
</td>

<td>
  4 or 2 digit year
</td>
<td>
  <code>14</code>
</td>

<td>
  2 digit year
</td>
<td>
  <code>-25</code>
</td>

<td>
  Year with any number of digits and sign
</td>
<td>
  <code>1..4</code>
</td>

<td>
  Quarter of year. Sets month to first month in quarter.
</td>
<td>
  <code>1..12</code>
</td>

<td>
  Month number
</td>
<td>
  <code>Jan..December</code>
</td>

<td>
  Month name in locale set by <code>moment.locale()</code>
</td>
<td>
  <code>1..31</code>
</td>

<td>
  Day of month
</td>
<td>
  <code>1st..31st</code>
</td>

<td>
  Day of month with ordinal
</td>
<td>
  <code>1..365</code>
</td>

<td>
  Day of year
</td>
<td>
  <code>1410715640.579</code>
</td>

<td>
  Unix timestamp
</td>
<td>
  <code>1410715640579</code>
</td>

<td>
  Unix ms timestamp
</td>
Input
YYYY
YY
Y
Q
M MM
MMM MMMM
D DD
Do
DDD DDDD
X
x

<th>
  Example
</th>

<th>
  Description
</th>
<td>
  <code>2014</code>
</td>

<td>
  Locale 4 digit week year
</td>
<td>
  <code>14</code>
</td>

<td>
  Locale 2 digit week year
</td>
<td>
  <code>1..53</code>
</td>

<td>
  Locale week of year
</td>
<td>
  <code>0..6</code>
</td>

<td>
  Locale day of week
</td>
<td>
  <code>Mon...Sunday</code>
</td>

<td>
  Day name in locale set by <code>moment.locale()</code>
</td>
<td>
  <code>2014</code>
</td>

<td>
  ISO 4 digit week year
</td>
<td>
  <code>14</code>
</td>

<td>
  ISO 2 digit week year
</td>
<td>
  <code>1..53</code>
</td>

<td>
  ISO week of year
</td>
<td>
  <code>1..7</code>
</td>

<td>
  ISO day of week
</td>
Input
gggg
gg
w ww
e
ddd dddd
GGGG
GG
W WW
E

时分秒及时区

<th>
  Example
</th>

<th>
  Description
</th>
<td>
  <code>0..23</code>
</td>

<td>
  24 hour time
</td>
<td>
  <code>1..12</code>
</td>

<td>
  12 hour time used with <code>a A</code>.
</td>
<td>
  <code>am pm</code>
</td>

<td>
  Post or ante meridiem (Note the one character <code>a p</code> are also considered valid)
</td>
<td>
  <code>0..59</code>
</td>

<td>
  Minutes
</td>
<td>
  <code>0..59</code>
</td>

<td>
  Seconds
</td>
<td>
  <code>0..999</code>
</td>

<td>
  Fractional seconds
</td>
<td>
  <code>+12:00</code>
</td>

<td>
  Offset from UTC as <code>+-HH:mm</code>, <code>+-HHmm</code>, or <code>Z</code>
</td>
Input
H HH
h hh
a A
m mm
s ss
S SS SSS
Z ZZ

 

显示

使用本地格式显示或者指定格式

moment.format()
moment.format(String)

解析字符串的格式同样适用,并且format还提供其他格式选项。详情请参看官方文档。

w.format()
"2016-11-25T21:41:00+08:00"
w.format("YYYY-MM-DD HH:mm:ss")
"2016-11-25 21:41:00"

时间做差

Moment.js 可以直接显示时间做差的结果。

>moment().fromNow();
"a few seconds ago"
>moment('2016-11-25 13:00:00').fromNow()
"an hour ago"

详细显示如下表所示:
 

<th>
  Key
</th>

<th>
  Sample Output
</th>
<td>
  s
</td>

<td>
  a few seconds ago
</td>
<td>
  m
</td>

<td>
  a minute ago
</td>
<td>
  mm
</td>

<td>
  2 minutes ago &#8230; 45 minutes ago
</td>
<td>
  h
</td>

<td>
  an hour ago
</td>
<td>
  hh
</td>

<td>
  2 hours ago &#8230; 22 hours ago
</td>
<td>
  d
</td>

<td>
  a day ago
</td>
<td>
  dd
</td>

<td>
  2 days ago &#8230; 25 days ago
</td>
<td>
  M
</td>

<td>
  a month ago
</td>
<td>
  MM
</td>

<td>
  2 months ago &#8230; 11 months ago
</td>
<td>
  y
</td>

<td>
  a year ago
</td>
<td>
  yy
</td>

<td>
  2 years ago &#8230; 20 years ago
</td>
Range
0 to 45 seconds
45 to 90 seconds
90 seconds to 45 minutes
45 to 90 minutes
90 minutes to 22 hours
22 to 36 hours
36 hours to 25 days
25 to 45 days
45 to 345 days
345 to 545 days (1.5 years)
546 days+

计算两个时间点的时间差。

moment('2016-11-25 13:00:00').from(moment('2016-11-25 13:10:00'))
"10 minutes ago"

反向做差

moment('2016-11-25 13:00:00').to(moment('2016-11-25 13:10:00'))
"in 10 minutes"

操控

实现对日期的操控,比如一周前的时间:

moment().format()
"2016-11-25T14:41:13+08:00"
moment().subtract(1,'weeks').format()
"2016-11-18T14:41:26+08:00"

支持链式调用

moment().add(7, 'days').subtract(1, 'months').year(2009).hours(0).minutes(0).seconds(0);

详细请参看文档。

本地化

提供大量国际化文件,方便切换。例如设为简体中文:

>moment.locale('zh-cn');
"zh-cn"
>moment('2016-11-25 13:00:00').from(moment('2016-11-25 13:10:00'))
"10 分钟前"

使用本地化功能,需要加载对应的本地化脚本,例如简体中文的脚本是 {code}locale/zh-cn.js{/code}

参考

Moment.js 官方文档