關(guān)于moment.js的常用方法及使用說(shuō)明
vue項(xiàng)目中,需要把 moment.js 掛載到全局上(即vue的原型鏈上),訪(fǎng)問(wèn)時(shí)直接使用 this.moment() ;
vue項(xiàng)目中不掛載到全局,單文件(單組件)使用:
==>> import moment from "moment"; 然后直接使用 moment()
1. 初始化日期 / 時(shí)間
初始化日期:
moment().format('YYYY-MM-DD');
初始化日期時(shí)間:
moment().format('YYYY-MM-DD?HH:mm:ss');
2. 格式化日期 / 時(shí)間
格式化日期:
moment(value).format('YYYY-MM-DD');
格式化日期時(shí)間:
moment(value).format('YYYY-MM-DD?HH:mm:ss');
3. 加/減 ==>>
操作之前必須使用 this.moment(日期變量) ;將要操作的日期轉(zhuǎn)為 moment.js 可以處理的日期時(shí)間格式
加法:
this.moment().add(1, 'months').format('YYYY-MM-DD');? ?
==>> 當(dāng)前日期加一個(gè)月并輸出格式為 'YYYY-MM-DD'
加法:
this.moment(startDate).add(2, 'days').format('YYYY-MM-DD')? ? ?
==>> 指定日期(startDate)加2天并輸出格式為 'YYYY-MM-DD'
減法:
this.moment().subtract(7, 'days');?
==>> 當(dāng)前時(shí)間減去7天
加法:
this.moment(startDate).subtract(2, 'days').format('YYYY-MM-DD')? ? ?
==>> 指定日期(startDate)加減去2天并輸出格式為 'YYYY-MM-DD'
4. 獲取某年某月的第一天或最后一天
獲取某年某月的第一天:startOf('month')、startOf('year')
moment(日期).startOf('month').format("YYYY-MM-DD")//日期可以是 年月的格式 也可以是年月日的格式 moment(日期).startOf('year').format("YYYY-MM-DD")
獲取某年某月的最后一天:endOf('month')、endOf('year')
moment(日期).endOf('month').format("YYYY-MM-DD")//日期可以是 年月的格式 也可以是年月日的格式 moment(日期).endOf('year').format("YYYY-MM-DD")
5. 獲取星期幾
獲取星期幾: this.moment().day() 或 this.moment(startDate).day() ==>> 當(dāng)前日期/指定日期 是星期幾(星期日為 0、星期六為 6)
6. 獲取毫秒數(shù)
獲取毫秒數(shù):this.moment().valueOf() 或 this.moment(startDate).valueOf()
==>> 在獲取指定時(shí)間的毫秒數(shù)時(shí),必須要有日期。即startDate包括日期時(shí)間
7. 獲取時(shí)間差(以毫秒計(jì)算)
兩個(gè)日期/時(shí)間的時(shí)差:
this.moment(endTime).diff(this.moment(startTime),'days' )
==>> 開(kāi)始時(shí)間和結(jié)束時(shí)間的時(shí)間差,以“天”為單位;endTime和startTime都是毫秒數(shù)
this.moment(endTime).diff(this.moment(startTime), 'minutes')
==>> 開(kāi)始時(shí)間和結(jié)束時(shí)間的時(shí)間差,以“分鐘”為單位
==>> 注意:計(jì)算時(shí)間差時(shí),可以以 “years”、“days”、“hours”、“minutes” 以及 "seconds" 為單位輸出!
8. 兩個(gè)具體的日期之差(天數(shù),也可以是年)
9. 獲取時(shí)、分、秒
原理:利用字符串的 split 方法拆分時(shí)分秒,然后分別用moment的 hour、minute 和 second 方法;帶有日期的可以用 .valueof() 方法。
const fixStart = '08:00:00' const getHour = this.moment().hour(Number(fixStart.split(':')[0])); const getMinute = this.moment().minute(Number(fixStart.split(':')[1])); const getSecond = this.moment().second(Number(fixStart.split(':')[2])); // 描述為0,直接寫(xiě)出second(0) const getHour_Minute_Second = this.moment().hour(Number(fixStart.split(':')[0])).minute(Number(fixStart.split(':')[1])).second(0); console.log('=====輸出',getHour,getMinute,getSecond,getHour_Minute_Second);
得到的結(jié)果都是moment.js 自身的時(shí)間格式。可以用 format 轉(zhuǎn)換為自己想要的格式,也可以用 diff 方法做時(shí)間差的計(jì)算
10. 將毫秒數(shù)轉(zhuǎn)為時(shí)分秒
注意:毫秒轉(zhuǎn)為其他單位時(shí),達(dá)到你想要轉(zhuǎn)的單位時(shí),為1,超過(guò)時(shí)不管,不足時(shí)為0;
如4800000(80分鐘)
- 轉(zhuǎn)為天:0
- 轉(zhuǎn)為小時(shí):1
- 轉(zhuǎn)為分鐘:20
- 轉(zhuǎn)為秒:0
const msTime = 4800000; //80分鐘 moment.duration(msTime).hours(); //轉(zhuǎn)為小時(shí),值為1 moment.duration(msTime).minutes(); //轉(zhuǎn)為分鐘,值為20 moment.duration(msTime).seconds(); //轉(zhuǎn)為秒,值為0
轉(zhuǎn)為其他單位:
moment.duration(msTime, 'seconds'); //轉(zhuǎn)為秒 moment.duration(msTime, 'minutes'); //轉(zhuǎn)為分 moment.duration(msTime, 'hours'); //轉(zhuǎn)為小時(shí) moment.duration(msTime, 'days'); //轉(zhuǎn)為天 moment.duration(msTime, 'weeks'); //轉(zhuǎn)為周 moment.duration(msTime, 'months'); //轉(zhuǎn)為月 moment.duration(msTime, 'years'); //轉(zhuǎn)為年
對(duì)應(yīng)的顯示格式:
11. 判斷一個(gè)日期是否在兩個(gè)日期之間 isBetween
語(yǔ)法:
this.moment().isBetween(moment-like, moment-like, String, String);
a. 不包含起始這兩個(gè)日期(只有兩個(gè)參數(shù)) ==>> 中文網(wǎng)只有兩個(gè)參數(shù)
this.moment('2010-10-20').isBetween('2010-10-19', '2010-10-25'); // true this.moment('2010-10-19').isBetween('2010-10-19', '2010-10-25'); // false this.moment('2010-10-25').isBetween('2010-10-19', '2010-10-25'); // false
b. 自定義是否包含起始日期(四個(gè)參數(shù),主要是第四個(gè)參數(shù)) ==>> 英文網(wǎng)才有四個(gè)參數(shù)
第三個(gè)參數(shù),固定為null;
第四個(gè)參數(shù),字符串,( ) 表示不包含,[ ] 表示包含。右括號(hào)制開(kāi)始日期,右括號(hào)控制結(jié)束日期
this.moment('2016-10-30').isBetween('2016-10-30', '2016-12-30', null, '()'); //false this.moment('2016-10-30').isBetween('2016-10-30', '2016-12-30', null, '[)'); //true this.moment('2016-10-30').isBetween('2016-01-01', '2016-10-30', null, '()'); //false this.moment('2016-10-30').isBetween('2016-01-01', '2016-10-30', null, '(]'); //true this.moment('2016-10-30').isBetween('2016-10-30', '2016-10-30', null, '[]'); //true
12. 判斷一個(gè)日期是否在另外一個(gè)日期 前 isBefore
語(yǔ)法: this.moment( end ).isBefore( start ) moment文檔
a. 默認(rèn)比較日期
注意:兩個(gè)日期相同是,結(jié)果也是 false
moment('2022-04-20').isBefore('2022-04-25'); // true => 第一個(gè)日期在第二個(gè)日期前 moment('2022-04-28').isBefore('2022-04-25'); // false => 第一個(gè)日期不在第二個(gè)日期前 moment('2022-04-25').isBefore('2022-04-25'); // false => 兩個(gè)日期相同
b. 第二個(gè)參數(shù)用于確定精度,因此可以指定檢查年份、月份、日期
moment('2010-10-20').isBefore('2010-12-31', 'year'); // false moment('2010-10-20').isBefore('2011-01-01', 'year'); // true
總結(jié)
文章僅為本人學(xué)習(xí)過(guò)程的一個(gè)記錄,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
淺談js數(shù)據(jù)類(lèi)型判斷與數(shù)組判斷
下面小編就為大家?guī)?lái)一篇淺談js數(shù)據(jù)類(lèi)型判斷與數(shù)組判斷。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08用函數(shù)式編程技術(shù)編寫(xiě)優(yōu)美的 JavaScript
用函數(shù)式編程技術(shù)編寫(xiě)優(yōu)美的 JavaScript...2006-11-11TypeScript實(shí)現(xiàn)單鏈表的示例代碼
鏈表是一種物理存儲(chǔ)單元上非連續(xù)、非順序的存儲(chǔ)結(jié)構(gòu),本文主要介紹了TypeScript實(shí)現(xiàn)單鏈表的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08js實(shí)現(xiàn)模擬計(jì)算器退格鍵刪除文字效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)模擬計(jì)算器退格鍵刪除文字效果的方法,涉及javascript字符串截取操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05JavaScript中實(shí)現(xiàn)sprintf、printf函數(shù)
這篇文章主要介紹了JavaScript中實(shí)現(xiàn)sprintf、printf函數(shù),這兩個(gè)函數(shù)在大多數(shù)編程語(yǔ)言中都有,但JS中卻沒(méi)有,本文介紹在js中實(shí)現(xiàn)這兩個(gè)函數(shù)功能,需要的朋友可以參考下2015-01-01淺談Javascript中的函數(shù)、this以及原型
下面小編就為大家?guī)?lái)一篇淺談Javascript中的函數(shù)、this以及原型。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10小程序webView實(shí)現(xiàn)小程序內(nèi)嵌H5頁(yè)面的全過(guò)程
在微信小程序中內(nèi)嵌H5頁(yè)面是一種常見(jiàn)的需求,因?yàn)镠5頁(yè)面具有靈活性和跨平臺(tái)性,可以彌補(bǔ)小程序原生代碼的不足,這篇文章主要給大家介紹了關(guān)于小程序webView實(shí)現(xiàn)小程序內(nèi)嵌H5頁(yè)面的相關(guān)資料,需要的朋友可以參考下2024-07-07