Monent.js：強大的日期處理類庫

Node.js Vue · 發表 2018-11-01 20:10:00

摘要： 1.1 介紹 Moment.js 是一個優秀的JavaScript 日期處理類庫. 如果沒有Moment.js之類的日期處理庫，我們如果需要獲得格式化後的日期.往往需要通過 new Date().getMonth() ...之類方法進行拼接, 或者使用JQ封...

1.1 介紹

Moment.js 是一個優秀的JavaScript 日期處理類庫.

如果沒有Moment.js之類的日期處理庫，我們如果需要獲得格式化後的日期.往往需要通過 new Date().getMonth() ...之類方法進行拼接, 或者使用JQ封裝的函式. 但現在但SPA頁面不怎麼使用JQ.所以掌握靠譜的 Moment.js 還是很有必要的

舉個小小例子：

請聽題: 通過原生js和moment.js分別獲取 moment().format('MMMM Do YYYY, h:mm:ss) 格式的時間

const js_date = new Date();
const moment_date = moment();
console.log('js new Date()==========>', `${js_date.getFullYear()}-${js_date.getMonth() + 1}-${js_date.getDate()} ${js_date.getHours()}:${js_date.getMinutes()}:${js_date.getSeconds()}`)
console.log('moment moment() ==========>', moment_date.format('YYYY-MM-DD HH:mm:ss'))

輸出結果:

js new Date() ==========> 2018-11-1 18:0:59moment moment() ==========> 2018-11-01 18:00:59

momentjs 優勢之處顯而易見

1.2 安裝

環境	安裝方式	引入例子	描述
Node.js	npm install moment -D	1⃣️	通常用在 `react` 、 `vue` 等單頁面專案
瀏覽器	可官網單獨下載js,也可以通過 `npm install moment` ,然後引入裡面的js	2⃣️️	一般直接在html檔案裡使用

1⃣️ Node.js(React、Vue):

//匯入
import moment from 'moment'//ES6
const moment = require('moment')//AMD規範

//使用
let nowTime = moment()//當前時間
...

2⃣️ 瀏覽器(.html): 本文的案例均採用這種方式

//匯入
<script src="xxx/moment.js" ></script> //js檔案既可以自己去官網首頁下載,也可以通過npm install moment獲得

const moment = moment();//當前時間

二、API大全

2.1 解析時間格式

解析時間格式意思就是當傳入某個時間字串的時候, moment.js 可以解析出 YYYY-MM-DD 之類的格式

語法：

moment(時間內容-String)

例子：

var analysisMoment = moment("1995-12-25");
console.log(analysisMoment)

輸出的部分結果:

_d: Mon Dec 25 1995 00:00:00 GMT+0800 (CST) {}
_f: "YYYY-MM-DD"
_i: "1995-12-25"
_isAMomentObject: true
_isUTC: false
_isValid: true

甚至還可以解析出 [1995, 12, 25]

2.2 轉換時間格式

這個功能是我們經常會用到的.也是文章最開始舉例使用的方法.

語法：

moment(內容-String).format(格式-String)

const dateString = '2018-11-01'
const transformFormat = moment(dateString).format('YYYY MM DD')
console.log('transformFormat =========>', transformFormat)

只要 Y、M、D、H、m、s... 寫對了,無論轉換成什麼格式都可以！

momemt('20181101').format('YY年MM月DD日')

//輸出 18年11月01日

2.3 建立/調整日期

建立日期例子:

moment({ y: 2018, Month: 11, day: 01, hour:15, minute:10 });

修改日期例子:

語法:

moment().seconds() === new Date().getSeconds();

同理還有:

毫秒： millsecond(Number)
分鐘： minute(Number)
星期： day(Number|String
年： year(Number)

...

例子 :

console.log('修改月份為二月=========>', moment().month('Feb').format('YYYY MM DD') )

console.log('修改當前時間的小時為九點:下班=========>', moment().seconds(30).format('YYYY MM DD HH:mm'))