Vue如何使用Dayjs計(jì)算常用日期詳解
在使用vue開(kāi)發(fā)項(xiàng)目時(shí)，前端常常需要計(jì)算一些日期時(shí)間，如：
- 計(jì)算周月截止日期
- 計(jì)算XX天前/后的日期
- 將時(shí)間戳轉(zhuǎn)換為日期（YYYY-MM-DD）
- 計(jì)算月天數(shù)
- 日期轉(zhuǎn)時(shí)間戳
推薦一個(gè)輕量的處理時(shí)間和日期的 JavaScript 庫(kù)：dayjs
使用這個(gè)插件計(jì)算常用日期十分方便
1、在項(xiàng)目中安裝dayjs，命令為：npm install dayjs --save
2、在main.js中，添加如下2句代碼
import dayjs from 'dayjs'; Vue.prototype.dayjs = dayjs;
3、在頁(yè)面需要使用的地方，直接使用
當(dāng)前日期或時(shí)間戳轉(zhuǎn)換，format后面就跟著想要格式化的內(nèi)容，**dayjs( ) **括號(hào)中不放任何參數(shù)，默認(rèn)為當(dāng)前日期，也可以放一個(gè)時(shí)間戳，直接轉(zhuǎn)換
（注意：使用Element組件的日期選擇器，其value-format屬性要求：
| 組件 | Dayjs（format） | Element（value-format） |
|---|---|---|
| 年 | YYYY | yyyy |
| 月 | MM | MM |
| 日 | DD | dd |
| 時(shí) | HH | HH |
| 分 | mm | mm |
| 秒 | ss | ss |
其中年和日的表達(dá)略有不同，容易混）
this.dayjs().format("YYYY-MM-DD")
this.dayjs().format("YYYY-MM-DD HH:mm")
this.dayjs(1614787200000).format("YYYY-MM-DD HH:mm:ss")
2.計(jì)算某周/某月/某年的起始截止日期，所使用到的方法為startOf()，endOf()，括號(hào)中可以是"week" 、 “month”、 “year”
(ps:加format是為了更加直觀)
this.dayjs().startOf("week");
this.dayjs().endOf("week").format("YYYY-MM-DD");
this.dayjs().startOf("month").format("YYYY-MM-DD");
this.dayjs("2021-02-09").endOf("month").format("YYYY-MM-DD");
計(jì)算日期，如幾天前、幾天后日期，
| 前(減) | 后（加） |
|---|---|
| subtract（參數(shù)1，參數(shù)2） | add（參數(shù)1，參數(shù)2） |
| 參數(shù)1 | 數(shù)字 |
| 參數(shù)2 | 單位（“week” 、 “month”、 “year”） |
this.dayjs().subtract(3,'day').format("YYYY-MM-DD")
this.dayjs().subtract(3,'month').format("YYYY-MM-DD")
this.dayjs().add(12,'day').format("YYYY-MM-DD")
this.dayjs('2021-03-12').add(45,'day').format("YYYY-MM-DD")
5. 獲取月天數(shù)，使用方法dayInMonth()
this.dayjs().daysInMonth();
this.dayjs("2021-02-09").daysInMonth();
this.dayjs("2021-01").daysInMonth();
6、普通日期轉(zhuǎn)換為時(shí)間戳
this.dayjs().unix()
this.dayjs('2020-10-04').unix()
總結(jié)
到此這篇關(guān)于Vue如何使用Dayjs計(jì)算常用日期的文章就介紹到這了,更多相關(guān)Vue計(jì)算常用日期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)多條折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue項(xiàng)目實(shí)現(xiàn)自定義滑塊過(guò)渡效果
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)自定義滑塊過(guò)渡效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
element-ui多文件上傳的實(shí)現(xiàn)示例
這篇文章主要介紹了element-ui多文件上傳的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
詳解vue-cli 腳手架項(xiàng)目-package.json
本篇文章主要介紹了詳解vue-cli 腳手架項(xiàng)目-package.json，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要為大家介紹了Vue冷門技巧遞歸組件實(shí)踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要給大家介紹了關(guān)于Vue組件通信的四種方式，分別是父子組件通信、非父子組件的eventBus通信、利用localStorage或者sessionStorage以及利用Vuex等方法，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-02-02
vue打包靜態(tài)資源后顯示空白及static文件路徑報(bào)錯(cuò)的解決
這篇文章主要介紹了vue打包靜態(tài)資源后顯示空白及static文件路徑報(bào)錯(cuò)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
使用axios請(qǐng)求接口,幾種content-type的區(qū)別詳解
今天小編就為大家分享一篇使用axios請(qǐng)求接口,幾種content-type的區(qū)別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Vue在chrome44偶現(xiàn)點(diǎn)擊子元素事件無(wú)法冒泡的解決方法
這篇文章主要給大家介紹了關(guān)于Vue在chrome44偶現(xiàn)點(diǎn)擊子元素事件無(wú)法冒泡的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue keep-alive 動(dòng)態(tài)刪除組件緩存的例子
今天小編就為大家分享一篇vue keep-alive 動(dòng)態(tài)刪除組件緩存的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11