小編給大家分享一下Vue怎么使用Dayjs計算常用日期,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
在使用vue開發項目時,前端常常需要計算一些日期時間,如:
計算周月截止日期
計算XX天前/后的日期
將時間戳轉換為日期(YYYY-MM-DD)
計算月天數
日期轉時間戳
推薦一個輕量的處理時間和日期的 JavaScript 庫:dayjs
使用這個插件計算常用日期十分方便
1、在項目中安裝dayjs,命令為:npm install dayjs --save
2、在main.js中,添加如下2句代碼
import dayjs from 'dayjs'; Vue.prototype.dayjs = dayjs;

3、在頁面需要使用的地方,直接使用
當前日期或時間戳轉換,format后面就跟著想要格式化的內容,**dayjs( ) **括號中不放任何參數,默認為當前日期,也可以放一個時間戳,直接轉換
(注意:使用Element組件的日期選擇器,其value-format屬性要求:
| 組件 | Dayjs(format) | Element(value-format) |
|---|---|---|
| 年 | YYYY | yyyy |
| 月 | MM | MM |
| 日 | DD | dd |
| 時 | HH | HH |
| 分 | mm | mm |
| 秒 | ss | ss |
其中年和日的表達略有不同,容易混)
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(參數1,參數2) | add(參數1,參數2) |
| 參數1 | 數字 |
| 參數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. 獲取月天數,使用方法dayInMonth()
this.dayjs().daysInMonth();
this.dayjs("2021-02-09").daysInMonth();
this.dayjs("2021-01").daysInMonth();
6、普通日期轉換為時間戳
this.dayjs().unix()
this.dayjs('2020-10-04').unix()
以上是“Vue怎么使用Dayjs計算常用日期”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。