Monent.js:強大的日期處理類庫
一、介紹及安裝
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:59
moment moment() ==========> 2018-11-01 18:00:59
momentjs
優勢之處顯而易見
1.2 安裝
環境 | 安裝方式 | 引入例子 | 描述 |
---|---|---|---|
Node.js | npm install moment -D | 1⃣️ | 通常用在react 、vue 等單頁面專案 |
瀏覽器 | 可官網單獨下載js,也可以通過npm install moment |
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'))
輸出結果:
修改當前時間的月份為二月 =========> 2018 02 01
修改當前時間的小時為九點:下班 =========> 2018 11 01 20:05