<div class="oneLevelTitle"> <h4>1、介紹及安裝</h4> </div>html
<div class="marginTop twoLevelTitle"> <img src="https://img2018.cnblogs.com/blog/1414709/201811/1414709-20181101124606223-819543279.png" /> <h4>1.1 介紹</h4> </div>vue
<b>Moment.js</b>是一個優秀的JavaScript 日期處理類庫.react
若是沒有Moment.js之類的日期處理庫,咱們若是須要得到格式化後的日期.每每須要經過new Date().getMonth()
...之類方法進行拼接, 或者使用JQ封裝的函數. 但如今但SPA頁面不怎麼使用JQ.因此掌握靠譜的Moment.js
仍是頗有必要的npm
舉個小小例子:瀏覽器
請聽題: 經過原生js和moment.js分別獲取
moment().format('YYYY-MM-DD HH: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'))
輸出結果:ui
js new Date() ==========> 2018-11-1 18:0:59 moment moment() ==========> 2018-11-01 18:00:59code
momentjs
優點之處顯而易見orm
<div class="marginTop marginBtm twoLevelTitle"> <img src="https://img2018.cnblogs.com/blog/1414709/201811/1414709-20181101124606223-819543279.png" /> <h4>1.2 安裝</h4> </div>htm
環境 | 安裝方式 | 引入例子 | 描述 |
---|---|---|---|
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(); //當前時間
<div class="oneLevelTitle"> <h4>2、API大全</h4> </div>
<div class="marginTop twoLevelTitle"> <img src="https://img2018.cnblogs.com/blog/1414709/201811/1414709-20181101124606223-819543279.png" /> <h4>2.1 解析時間格式</h4> </div> 解析時間格式意思就是當傳入某個時間字符串的時候, `moment.js`能夠解析出`YYYY-MM-DD`之類的格式
<b>語法:</b>
moment(時間內容-String)
<b>例子:</b>
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]
<div class="marginTop twoLevelTitle"> <img src="https://img2018.cnblogs.com/blog/1414709/201811/1414709-20181101124606223-819543279.png" /> <h4>2.2 轉換時間格式</h4> </div>
這個功能是咱們常常會用到的.也是文章最開始舉例使用的方法.
<b>語法:</b>
moment(內容-String).format(格式-String)
const dateString = '2018-11-01' const transformFormat = moment(dateString).format('YYYY MM DD') console.log('transformFormat =========>', transformFormat)
只要<b>Y、M、D、H、m、s...</b>寫對了,不管轉換成什麼格式均可以!
momemt('20181101').format('YY年MM月DD日') //輸出 18年11月01日
<div class="marginTop twoLevelTitle"> <img src="https://img2018.cnblogs.com/blog/1414709/201811/1414709-20181101124606223-819543279.png" /> <h4>2.3 建立/調整日期</h4> </div>
<b>建立日期例子: </b>
moment({ y: 2018, Month: 11, day: 01, hour:15, minute:10 });
<b>修改日期: </b>
語法:
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
<div class="marginTop twoLevelTitle"> <img src="https://img2018.cnblogs.com/blog/1414709/201811/1414709-20181101124606223-819543279.png" /> <h4>2.3 日期操做方法</h4> </div>
<b>增長/減小日期</b>
語法:
moment().add(Number, String); moment().add(Duration); moment().add(Object);
例子: 在當前時間增長/減小7天
//方式一 (Number, String) console.log('當前時間增長7天:', moment().add(7, 'd').format('YYYY MM DD')) console.log('當前時間減小兩個月', moment().subtract(2, 'months').format('YYYY-MM-DD')) //方式2、三 (二可結合moment.duration()) console.log('當前時間增長2天', moment().add({'day': 2}).format('YYYY-MM-DD')) /***輸出***/ //方式一 當前時間增長7天: 2018-11-08 當前時間減小兩個月 2018-09-01 //方式二 當前時間增長2天 2018-11-03
<div class="marginTop twoLevelTitle"> <img src="https://img2018.cnblogs.com/blog/1414709/201811/1414709-20181101124606223-819543279.png" /> <h4>2.4 日期相關顯示</h4> </div>
<b>時間差顯示</b>
<b>和當前時間比較</b> 語法:
//以當前時間爲基準進行對比 moment().fromNow(Boolean); //以前 moment().toNow(); //以後 //布爾值可省略,如加上則只顯示時間差
例子:
console.log('2008年和今天:', moment([2008, 11, 1]).fromNow()) console.log('2008年和今天相差:', moment([2008, 11, 1]).fromNow(true)) //輸出 2008年和今天: 10 years ago 2008年和今天相差: 10 years
<b>和以前/以後時間比較</b> 語法:
moment().from(Moment|String|Number|Date|Array, Boolean); //以前 moment().to(Moment|String|Number|Date|Array, Boolean); //以後
例子:
//from var a = moment([2007, 0, 28]); var b = moment([2007, 0, 29]); a.from(b); // "a day ago" a.from([2007, 0, 29]); // "a day ago" a.from(new Date(2007, 0, 29)); // "a day ago" a.from("2007-01-29"); // "a day ago"
<div class="marginTop twoLevelTitle"> <img src="https://img2018.cnblogs.com/blog/1414709/201811/1414709-20181101124606223-819543279.png" /> <h4>其餘</h4> </div>
簡寫(key <=> Shorthand)對比表能夠參考: <a href="http://momentjs.cn/docs/#/manipulating/max/" target="_blank">《Momentjs docs》</a>
<a href="http://momentjs.cn/">《Moment.js官網》</a>