vue開(kāi)發(fā)之moment的介紹與使用
在日常開(kāi)發(fā)中,我們常常會(huì)遇到以下幾種場(chǎng)景:
需要對(duì)日期進(jìn)行非標(biāo)準(zhǔn)格式展示,如 :2021年5月11日星期二下午6點(diǎn)42分需要對(duì)日期進(jìn)行處理,如:要取前24小時(shí)的時(shí)間 等在這時(shí)候用js原生的new Date()處理就有些麻煩了,因此我們找到了moment這個(gè)類(lèi)庫(kù)
一、moment是什么?moment 是一個(gè) JavaScript 日期處理類(lèi)庫(kù)。
安裝 moment
如果之前安裝過(guò)就不用再安裝了。
npm install moment -- save
注:以下所有時(shí)間相對(duì)于現(xiàn)在時(shí)間:2021/05/11/18:42 星期二
1.日期格式化:
moment().format(’MMMM Do YYYY, h:mm:ss a’); // 五月 11日 2021, 6:42:31 下午moment().format(’dddd’); // 星期二moment().format('MMM Do YY'); // 5月 11日 21moment().format(’YYYY [escaped] YYYY’); // 2021 escaped 2021moment().format(); //2021-05-11T18:06:42+08:00
2.相對(duì)時(shí)間:
moment('20111031', 'YYYYMMDD').fromNow(); // 2011/10/31號(hào)相對(duì)于現(xiàn)在是: 10 年前moment('20120620', 'YYYYMMDD').fromNow(); // 2012/06/20號(hào)相對(duì)于現(xiàn)在是: 9 年前moment().startOf(’day’).fromNow(); //當(dāng)前日期開(kāi)始即:2021/05/11/00:00:00相對(duì)于現(xiàn)在是: 19 小時(shí)前moment().endOf(’day’).fromNow(); //當(dāng)前日期結(jié)束即:2021/05/11/24:00:00相對(duì)于現(xiàn)在是: 5 小時(shí)內(nèi)moment().startOf(’hour’).fromNow(); //當(dāng)前日期小時(shí)開(kāi)始即:2021/05/11/18:00:00相對(duì)于現(xiàn)在是: 42分鐘前
3.日歷時(shí)間:
moment().subtract(10, ’days’).calendar(); // 當(dāng)前時(shí)間往前推10天的日歷時(shí)間: 2021/05/01moment().subtract(6, ’days’).calendar(); // 當(dāng)前時(shí)間往前推6天: 上星期三18:42moment().subtract(3, ’days’).calendar(); // 當(dāng)前時(shí)間往前推3天: 上星期六18:42moment().subtract(1, ’days’).calendar(); // 當(dāng)前時(shí)間往前推1天: 昨天18:42moment().calendar(); // 今天18:42moment().add(1, ’days’).calendar(); // 當(dāng)前時(shí)間往后推1天: 明天18:42moment().add(3, ’days’).calendar(); // 當(dāng)前時(shí)間往后推3天: 下星期五18:42moment().add(10, ’days’).calendar(); // 當(dāng)前時(shí)間往后推10天: 2021/05/21
4.多語(yǔ)言支持:
moment.locale(); // zh-cnmoment().format(’LT’); // 18:42moment().format(’LTS’); // 18:42:31moment().format(’L’); // 2021/05/11moment().format(’l’); // 2021/5/11moment().format(’LL’); // 2021年5月11日moment().format(’ll’); // 2021年5月11日moment().format(’LLL’); // 2021年5月11日下午6點(diǎn)42分moment().format(’lll’); // 2021年5月11日 18:42moment().format(’LLLL’); // 2021年5月11日星期二下午6點(diǎn)42分moment().format(’llll’); // 2021年5月11日星期二 18:42二、使用步驟(例:默認(rèn)查詢(xún)時(shí)間24小時(shí)之前~當(dāng)前時(shí)間)
1.引入庫(kù)
$ npm install moment --save
2.在main.js中全局引入(也可單獨(dú)在使用的文件中引入,具體看需求)
import moment from 'moment'Vue.prototype.$moment = moment;
3.在需要使用日期的地方使用
HTML中:
<el-date-picker v-model='timeRange'type='datetimerange'range-separator='至'start-placeholder='開(kāi)始日期'end-placeholder='結(jié)束日期'> </el-date-picker>
JS中:
data() { return { timeRange:[], } }, mounted(){let start = this.$moment() .subtract(’1’, ’d’) .format(’YYYY-MM-DD HH:mm:ss’) //當(dāng)前時(shí)間往前推1天(24小時(shí)):2021-05-10 18:42:53let end = this.$moment().format(’YYYY-MM-DD HH:mm:ss’) //當(dāng)前時(shí)間:2021-05-11 18:42:53this.timeRange=[start,end] }, 三、日期格式格式 含義 舉例 備注 yyyy 年 2021 同YYYY M 月 1 不補(bǔ)0 MM 月 01d 日 2 不補(bǔ)0 dd 日 02dddd 星期 星期二H 小時(shí) 3 24小時(shí)制;不補(bǔ)0 HH 小時(shí) 18 24小時(shí)制 h 小時(shí) 3 12小時(shí)制,須和 A 或 a 使用;不補(bǔ)0 hh 小時(shí) 03 12小時(shí)制,須和 A 或 a 使用 m 分鐘 4 不補(bǔ)0 mm 分鐘 04s 秒 5 不補(bǔ)0 ss 秒 05A AM/PM AM 僅 format 可用,大寫(xiě) a am/pm am 僅 format 可用,小寫(xiě)
具體方法以及參數(shù)可詳見(jiàn)moment官方文檔
四、new Date() 相關(guān)日期都寫(xiě)這么多了,那new Date()也一起總結(jié)下吧
let time = new Date(); //獲取當(dāng)前時(shí)間 Tue May 11 2021 18:42:51 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) let year = time.getFullYear(); //獲取年 2021 let month = time.getMonth() + 1; //獲取月 5 let day = time.getDate(); //獲取天 11 let h = time.getHours(); //獲取小時(shí) 18 let m = time.getMinutes(); //獲取分鐘 42 let s = time.getSeconds(); //獲取秒 51 let weekDay = time.getDay(); //獲取星期 2總結(jié)
到此這篇關(guān)于vue開(kāi)發(fā)之moment的介紹與使用的文章就介紹到這了,更多相關(guān)vue moment使用內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. Xml簡(jiǎn)介_(kāi)動(dòng)力節(jié)點(diǎn)Java學(xué)院整理2. phpstudy apache開(kāi)啟ssi使用詳解3. 如何在jsp界面中插入圖片4. jsp文件下載功能實(shí)現(xiàn)代碼5. ASP動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)經(jīng)驗(yàn)分享6. .Net Core和RabbitMQ限制循環(huán)消費(fèi)的方法7. vue3+ts+elementPLus實(shí)現(xiàn)v-preview指令8. jsp實(shí)現(xiàn)登錄驗(yàn)證的過(guò)濾器9. JSP之表單提交get和post的區(qū)別詳解及實(shí)例10. 詳解瀏覽器的緩存機(jī)制
