JS時間處理插件MomentJS

筆者在作項目的時候，須要對日期和時間進行一些處理和操做，可是每次都用JS自帶的Date對象很不方便，還要寫一堆繁瑣的代碼，後續維護起來也很痛苦。在網上找了一下JS處理日期和時間的插件，發現了MomentJS很好用，學習了一下它的語法，發現十分的簡潔易懂，並且可擴展性很強，調用方法靈活。不少的方法調用形式多樣，支持多種傳參數方式。下面簡單的整理了一下使用方式

構造Moment對象

MomentJS將時間封裝成一個對象，moment對象，這個對象不少種構造方式，能夠支持傳入字符串、數組和對象的形式來構造。

當前系統時間

若是什麼都不傳，就獲取當前的系統時間。

var now = moment()
複製代碼

字符串構造

能夠傳入字符串，首先會檢查字符串的格式是否符合ISO 8601的格式，若是不符合，就調用new Date(string)來構造。

已知格式字符串

moment('2017-01-02');               //年月日
moment('2017-01-02 13');            //年月日 小時
moment('2017-01-02 13:12');         //年月日 小時分鐘
moment('2017-01-02 13:12:52');      //年月日 小時分鐘秒
moment('2017-01-02 13:12:52.123');  //年月日 小時分鐘秒 毫秒
複製代碼

字符串+格式

假如日期的格式不符合ISO 8601的格式，可是你知道輸入的字符串的格式，也能夠經過這種方式解析，解析的語法有如下四種格式：

moment(String, String);
moment(String, String, String);
moment(String, String, Boolean);
moment(String, String, String, Boolean);
複製代碼

第一種已知某個時間的格式，將格式做爲第二個參數傳入

moment('12-25-1995 12/43/53', 'MM-DD-YYYY HH/mm/ss')
複製代碼

格式字母表明的含義以下表

Input	Example	Description
YYYY	2014	4位數年份
YY	14	2位數年份
Q	1..4	季度，將月份設置成季度的第一個月
M MM	1..12	月份
MMM MMMM	Jan..December	月份名稱
D DD	1..31	一個月的第幾天
DDD DDDD	1..365	一年的第幾天
H HH	0..23	24小時制
h hh	1..12	12小時制
m mm	0..59	分鐘
s ss	0..59	秒

第二種，能夠將當地區域的關鍵符做爲第三個參數傳入。

moment('2012 juillet', 'YYYY MMM', 'fr');
moment('2012 July',    'YYYY MMM', 'en');
複製代碼

MomentJS的匹配模式是十分寬鬆的，而且可能會致使一些咱們不想要的行爲。從2.3.0版本開始，咱們能夠在最後傳入一個布爾值來讓Moment使用嚴格模式匹配。嚴格模式要求輸入的字符串和格式要徹底相同。

moment('It is 2012-05-25', 'YYYY-MM-DD').isValid();       // true
moment('It is 2012-05-25', 'YYYY-MM-DD', true).isValid(); // false
moment('2012-05-25',       'YYYY-MM-DD', true).isValid(); // true
複製代碼

字符串+多格式

假如你不知道輸入的字符串確切是用的哪一種格式，可是知道是某些格式中的一種，能夠將多種格式用數組的形式傳入，將會以最早匹配到的格式爲輸出結果。

moment("12-25-1995", ["MM-DD-YYYY", "YYYY-MM-DD"]);
複製代碼

對象

咱們也能夠經過傳入一個對象的形式來建立moment對象，傳入的對象中包括一些時間單位的屬性。

moment({ y    :2010, M     :3, d   :5, h    :15, m      :10, s      :3, ms          :123});
moment({ year :2010, month :3, day :5, hour :15, minute :10, second :3, millisecond :123});
moment({ years:2010, months:3, days:5, hours:15, minutes:10, seconds:3, milliseconds:123});
moment({ years:2010, months:3, date:5, hours:15, minutes:10, seconds:3, milliseconds:123});
複製代碼

上面代碼中的day和date都表示當前月的第幾天。

Date 對象

咱們也能夠傳入JS原生的Date對象來建立moment對象。

var day = new Date(2011, 9, 16);
var dayWrapper = moment(day);
複製代碼

數組

咱們能夠傳入一個數字的數組來建立moment對象，數組中每一個每一個數字表明的含義以下：

// [年, 月, 日, 時, 分, 秒, 毫秒]
moment([2010, 1, 14, 15, 25, 50, 125]);
//2010年2月14日15時25分50秒125毫秒
複製代碼

須要注意的是：數組中的月、時、分、秒、毫秒都是從0開始的，而年和日都是從1開始的。

取值and賦值

MomentJS使用能夠重載的get和set方法，跟咱們之前在jQuery中的形式很類似。咱們能夠調用這些方法不傳參數做來獲取，傳入參數做來設置。

自帶函數

獲取或者設置毫秒，設置的範圍0到999

moment().millisecond(Number);
moment().millisecond(); // Number
moment().milliseconds(Number);
moment().milliseconds(); // Number
複製代碼

獲取或者設置秒，設置的範圍0到59

moment().second(Number);
moment().second(); // Number
moment().seconds(Number);
moment().seconds(); // Number
複製代碼

獲取或者設置分鐘，設置的範圍0到59

moment().minute(Number);
moment().minute(); // Number
moment().minutes(Number);
moment().minutes(); // Number
複製代碼

獲取或者設置小時，設置的範圍0到23

moment().hour(Number);
moment().hour(); // Number
moment().hours(Number);
moment().hours(); // Number
複製代碼

獲取或者設置日期，設置的範圍1到31

moment().date(Number);
moment().date(); // Number
moment().dates(Number);
moment().dates(); // Number
複製代碼

獲取或者設置星期，設置的範圍0（週日）到6（週六）

moment().day(Number|String);
moment().day(); // Number
moment().days(Number|String);
moment().days(); // Number
複製代碼

獲取或者設置一年中的天數，設置的範圍1到366

moment().dayOfYear(Number);
moment().dayOfYear(); // Number
複製代碼

獲取或者設置一年中的周

moment().week(Number);
moment().week(); // Number
moment().weeks(Number);
moment().weeks(); // Number
複製代碼

獲取或者設置一年中的月份，設置的範圍0到11

moment().month(Number|String);
moment().month(); // Number
moment().months(Number|String);
moment().months(); // Number
複製代碼

獲取或者設置季度，設置的範圍1到4

moment().quarter(); // Number
moment().quarter(Number);
複製代碼

獲取或者設置年，設置的範圍-270000到270000

moment().year(Number);
moment().year(); // Number
moment().years(Number);
moment().years(); // Number
複製代碼

取值and賦值函數

除了上面的這麼多函數外，MomentJS還有一個用來統一取值和賦值的函數，get和set。

moment().get('year');
moment().get('month');  // 0 to 11
moment().get('date');
moment().get('hour');
moment().get('minute');
moment().get('second');
moment().get('millisecond');
複製代碼

set函數接收單位做爲第一個參數，單位的值做爲第二個參數。若是要設置多個值的話，也能夠經過傳入一個對象。

moment().set('year', 2013);
moment().set('month', 3); //四月
moment().set('date', 1);
moment().set('hour', 13);
moment().set('minute', 20);
moment().set('second', 30);
moment().set('millisecond', 123);

moment().set({'year': 2013, 'month': 3});
複製代碼

max/min函數

max函數能夠返回給定的moment對象中最大的實例，也就是最靠近將來的實例。

var a = moment('2017-12-01');
var b = moment('2017-12-06');
moment.max(a, b);  // b
複製代碼

min函數能夠返回給定的moment對象中最小的實例，也就是最靠近過去的實例。

var a = moment('2017-12-01');
var b = moment('2017-12-06');
moment.min(a, b);  // a
複製代碼

操做

有時候，咱們須要對時間進行一系列的操做，最多見的就是加減計算。MomentJS提供了不少方法給咱們來進行調用。 　　MomentJS使用的模式跟jQuery類似，都是使用的函數的鏈式調用，可讓咱們將操做鏈式執行下去，代碼以下所示：

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

add加法

add函數讓咱們把Moment對象的時間日後退，它的語法以下：

moment().add(Number, String);
moment().add(Duration);
moment().add(Object);
複製代碼

咱們能夠傳入想要的增長的時間數量和時間單位，好比要日後推遲7天：

moment().add(7, 'days');
複製代碼

固然，add函數也容許咱們提供時間單位的縮寫：

moment().add(7, 'd');
複製代碼

時間單位	縮寫
years	y
quarters	Q
months	M
weeks	W
days	d
hours	h
minutes	m
seconds	s
milliseconds	ms

若是想要同時增長不一樣時間單位，能夠以對象的形式傳入：

moment().add(7, 'days').add(1, 'months');
moment().add({days:7,months:1});
複製代碼

須要注意的是，若是原始日期的天數比新增後的日期的月份的總天數還要多，就變爲該月的最後一天：

// 01-31
moment([2010, 0, 31]);                  

// 02-28 
moment([2010, 0, 31]).add(1, 'months'); 
//2月份沒有31號，自動變爲最後一天，即28號
複製代碼

subtract減法

subtract函數的用法和add類似，不一樣的是把時間往前推。

moment().subtract(Number, String);
moment().subtract(Duration);
moment().subtract(Object);
複製代碼

startOf開始時間

startOf函數將Moment對象的時間設置爲傳入單位的開始時間。

moment()                    //當前時間2017-12-09
moment().startOf('year');   //今年年初2017-01-01
moment().startOf('month');  //這個月開始2017-12-01
moment().startOf('quarter');//這個季度開始2017-10-01
moment().startOf('week');   //這周開始2017-12-03（週日爲開始）
moment().startOf('isoWeek');//這周開始2017-12-04（根據ISO 8601，週一爲開始）
moment().startOf('day');    //今天的開始時間2017-12-09 00:00:00:000
moment().startOf('hour');   //今天當前小時開始2017-12-09 13:00:00:000
moment().startOf('minute'); //今天當前分鐘開始2017-12-09 13:14:00:000
moment().startOf('second'); //今天當前秒鐘開始2017-12-09 13:14:15:000
複製代碼

endOf結束時間

endOf函數將Moment對象的時間設置爲傳入單位的結束時間。使用方式和startOf類似。

moment().endOf(String);
複製代碼

顯示

當咱們解析和操做完Moment對象後，咱們就須要對最後的結果進行展現。

format格式化

format函數接收token字符串，而且將token替換成對應的值。

moment().format();                                // "2014-09-08T08:02:17-05:00" (ISO 8601)
moment().format("dddd, MMMM Do YYYY, h:mm:ss a"); // "Sunday, February 14th 2010, 3:25:50 pm"
moment().format("ddd, hA");                       // "Sun, 3PM"
複製代碼

對應的關係以下表：

-	Token	輸入
月	M	1 2 .. 11 12
	Mo	1st 2nd ... 11th 12th
	MM	01 02 ... 11 12
	MMM	Jan Feb ... Nov Dec
	MMMM	January February ... November December
季度	Q	1 2 3 4
月份中的天	D	1 2 ... 30 31
	Do	1st 2nd ... 30th 31st
	DD	01 02 ... 30 31
年份中的天	DDD	1 2 ... 365 366
	DDDo	st 2nd ... 365th 366th
	DDDD	001 002 ... 365 366
星期中的天	d	0 1 ... 5 6
	do	0th 1st ... 5th 6th
	dd	Su Mo ... Fr Sa
	ddd	Sun Mon ... Fri Sat
	dddd	Sunday Monday ... Friday Saturday
年中的星期	w	1 2 ... 52 53
	wo	1st 2nd ... 52nd 53rd
	ww	01 02 ... 52 53
年	YY	70 71 ... 29 30
	YYYY	1970 1971 ... 2029 2030
AM/PM	A	AM PM
	a	am pm
小時	H	0 1 ... 22 23
	HH	00 01 ... 22 23
	h	1 2 ... 11 12
	hh	01 02 ... 11 12
分鐘	m	0 1 ... 58 59
	mm	00 01 ... 58 59
秒	s	0 1 ... 58 59
	ss	00 01 ... 58 59
毫秒	ms	000 001 ... 998 999

diff時差

語法

moment().diff(Moment|String|Number|Date|Array);
moment().diff(Moment|String|Number|Date|Array, String);
moment().diff(Moment|String|Number|Date|Array, String, Boolean);
複製代碼

diff函數能夠幫咱們獲取到兩個Moment對象的時間差，默認的單位是毫秒。

var a = moment([2017, 12, 29]);
var b = moment([2017, 12, 28]);
a.diff(b) // 86400000
複製代碼

除了獲得毫秒爲單位，diff函數還支持獲取其餘的時間單位，將其做爲第二個參數傳入：

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

支持的測量單位有years、months、weeks、days、hours、minutes、seconds和milliseconds。默認返回的數值會向下取捨，去掉小數。假如想要精確一點，獲得小數類型的數值，第三個參數傳入一個true。

var a = moment([2008, 6]);
var b = moment([2007, 0]);
a.diff(b, 'years');       // 1
a.diff(b, 'years', true); // 1.5
複製代碼

daysInMonth獲取當前月份的天數

daysInMonth獲取當前月的總天數

moment("2012-02", "YYYY-MM").daysInMonth() // 29
moment("2012-01", "YYYY-MM").daysInMonth() // 31
複製代碼

toDate轉爲Date對象

將Moment對象轉爲js原生的Date對象

toArray轉爲數組

返回時間數組，和構造Moment對象時傳入的數組表明的含義相同。

moment().toArray(); // [2017, 12, 9, 13, 40, 16, 154];
複製代碼

toObject

將Moment對象轉爲包含年月日時分秒毫秒的對象。

moment().toObject()  // {
                     //     years: 2017
                     //     months: 12
                     //     date: 9,
                     //     hours: 13,
                     //     minutes: 40,
                     //     seconds: 18,
                     //     milliseconds: 600
                     // }
複製代碼

查詢

查詢操做主要用來判斷Moment是否知足某些條件。

isBefore是否以前

moment().isBefore(Moment|String|Number|Date|Array);
moment().isBefore(Moment|String|Number|Date|Array, String);
複製代碼

isBefore判斷一個moment對象是否在某個時間點以前。

moment('2010-10-20').isBefore('2010-10-21'); // true
複製代碼

默認的比較單位是毫秒，可是假如咱們想要限制到其餘的時間單位，咱們能夠將其做爲第二個參數傳入。接受的單位和startOf支持的單位同樣。

console.log(moment('2017-11-03').isBefore('2017-11-06'))
console.log(moment('2017-11-03').isBefore('2017-11-06', 'year'))
console.log(moment('2017-11-03').isBefore('2018-11-06', 'year'))
複製代碼

isSame是否相同

moment().isSame(Moment|String|Number|Date|Array);
moment().isSame(Moment|String|Number|Date|Array, String);
複製代碼

isSame判斷一個moment對象是否和另外一個moment對象相同。

moment('2010-10-20').isSame('2010-10-20'); // true
moment('2010-10-20').isSame('2010-10-21'); // false
複製代碼

一樣的，咱們若是要將比較的單位改成其餘的，也能夠做爲第二個參數傳入。接受的單位和startOf支持的單位同樣。

moment('2010-10-20').isSame('2009-12-31', 'year');  // false
moment('2010-10-20').isSame('2010-01-01', 'year');  // true
複製代碼

當傳入第二個參數時，它會匹配全部相同或者更大的單位。好比傳入了月份，將會比較年和月，傳入了日期，將會比較年月日

// false, 不一樣的年
moment('2010-01-01').isSame('2011-01-01', 'month');

// false, 不一樣的月
moment('2010-01-01').isSame('2010-02-01', 'day');
複製代碼

isAfter是否以後

isBefore判斷一個moment對象是否在某個時間點以後。接受的單位和startOf支持的單位同樣。

moment('2010-10-20').isAfter('2010-10-19'); // true
複製代碼

isBetween是否之間

moment().isBetween(moment-like, moment-like);
moment().isBetween(moment-like, moment-like, String);
//moment-like 表示 Moment|String|Number|Date|Array
複製代碼

判斷一個moment對象是否在兩個其餘時間點之間。

moment('2017-10-20').isBetween('2017-10-19', '2017-10-25'); // true
複製代碼

傳入第二個參數做爲限制的單位。接受的單位和startOf支持的單位同樣。

moment('2010-10-20').isBetween('2010-01-01', '2012-01-01', 'year'); // false
moment('2010-10-20').isBetween('2009-12-31', '2012-01-01', 'year'); // true
複製代碼

isLeapYear是否閏年

是閏年就返回true，不是就返回false。

moment([2000]).isLeapYear() // true
moment([2001]).isLeapYear() // false
moment([2100]).isLeapYear() // false
複製代碼

isMoment 是否Moment對象

判斷是否Moment對象

moment.isMoment() // false
moment.isMoment(new Date()) // false
moment.isMoment(moment()) // true
複製代碼

isDate是否Date對象

判斷是否Date對象

moment.isDate(); // false
moment.isDate(new Date()); // true
moment.isDate(moment()); // false
複製代碼

若是以爲寫得還不錯，請關注個人掘金主頁。更多文章請訪問個人博客地址