Vue如何使用Dayjs計算常用日期詳解
在使用vue開發(fā)項目時，前端常常需要計算一些日期時間，如：
- 計算周月截止日期
- 計算XX天前/后的日期
- 將時間戳轉(zhuǎn)換為日期（YYYY-MM-DD）
- 計算月天數(shù)
- 日期轉(zhuǎn)時間戳
推薦一個輕量的處理時間和日期的 JavaScript 庫：dayjs
使用這個插件計算常用日期十分方便
1、在項目中安裝dayjs，命令為：npm install dayjs --save
2、在main.js中，添加如下2句代碼
import dayjs from 'dayjs'; Vue.prototype.dayjs = dayjs;
3、在頁面需要使用的地方，直接使用
當(dāng)前日期或時間戳轉(zhuǎn)換，format后面就跟著想要格式化的內(nèi)容，**dayjs( ) **括號中不放任何參數(shù)，默認(rèn)為當(dāng)前日期，也可以放一個時間戳，直接轉(zhuǎn)換
（注意：使用Element組件的日期選擇器，其value-format屬性要求：
| 組件 | Dayjs（format） | Element（value-format） |
|---|---|---|
| 年 | YYYY | yyyy |
| 月 | MM | MM |
| 日 | DD | dd |
| 時 | 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.計算某周/某月/某年的起始截止日期，所使用到的方法為startOf()，endOf()，括號中可以是"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");
計算日期，如幾天前、幾天后日期，
| 前(減) | 后（加） |
|---|---|
| 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)換為時間戳
this.dayjs().unix()
this.dayjs('2020-10-04').unix()
總結(jié)
到此這篇關(guān)于Vue如何使用Dayjs計算常用日期的文章就介紹到這了,更多相關(guān)Vue計算常用日期內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue如何解決每次發(fā)版都要強(qiáng)刷清除瀏覽器緩存問題
這篇文章主要介紹了Vue如何解決每次發(fā)版都要強(qiáng)刷清除瀏覽器緩存問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue中的數(shù)據(jù)格式化filters、formatter方式
這篇文章主要介紹了vue中的數(shù)據(jù)格式化filters、formatter方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
安裝nvm?node版本管理器的操作方法(vue2.x遷移vue3.x)
這篇文章主要介紹了安裝nvm?node版本管理器(vue2.x遷移vue3.x)的操作方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了在vue里使用codemirror遇到問題，本文給大家記錄下來了,需要的朋友可以參考下2018-11-11
今天小編就為大家分享一篇Vue.js點擊切換按鈕改變內(nèi)容的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了在vue.js中，使用echarts組件，創(chuàng)建一個餅圖，并且獲取餅圖的數(shù)據(jù)和屬性，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12
Vue.js實現(xiàn)大轉(zhuǎn)盤抽獎總結(jié)及實現(xiàn)思路
這篇文章主要介紹了 Vue.js實現(xiàn)大轉(zhuǎn)盤抽獎總結(jié)及實現(xiàn)思路，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
本篇文章主要介紹了利用VUE框架，實現(xiàn)列表分頁功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-01-01
在 Vue 3 中設(shè)置 `@` 指向根目錄的幾種常見方法匯總
在 Vue 3 項目開發(fā)中,為了方便管理和引用文件路徑,設(shè)置 @ 指向根目錄是一項常見的需求,下面給大家分享在Vue3中設(shè)置 `@` 指向根目錄的方法匯總,感興趣的朋友一起看看吧2024-06-06
虛擬DOM是一種用JavaScript對象來描述真實DOM的技術(shù),通過diff算法實現(xiàn)高效的DOM更新,提高頁面性能,Vue通過render函數(shù)和VNode實現(xiàn)虛擬DOM,結(jié)合diff算法減少DOM操作,提升用戶體驗2024-12-12