Vue3使用dayjs以及dayjs日期工具類詳解
更新時間：2024年03月18日 09:15:09 作者：誰不想飛舞青春
這篇文章主要介紹了Vue3使用dayjs以及dayjs日期工具類,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
說明
這里記錄下在Vue3里面使用dayjs插件，以及將它在全局使用，并且將dayjs封裝成自己需要的日期工具類。
留待以后需要時直接使用。
安裝dayjs命令
npm install dayjs --save
在main.js里面全局導(dǎo)入
import { createApp } from 'vue'
import './style.css'
//引入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//引入dayjs日期插件
import dayjs from "dayjs"
import App from './App.vue'
const app = createApp(App)
//使用element-plus
app.use(ElementPlus)
//全局使用dayjs
app.config.globalProperties.$dayjs=dayjs
app.mount('#app')
在vue模版中使用dayjs語法
如下：
//使用dayjs將當前時間轉(zhuǎn)換為指定樣式
this.$dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
瀏覽器結(jié)果如下：
dayjs日期工具類
在dateUtil.js里面局部使用dayjs，并將它封裝為自己的日期工具類。
//日期工具類
//局部導(dǎo)入dayjs
import dayjs from 'dayjs'
/**
* 校檢日期格式是否為YYYY-MM-DD這種格式
* @param date
* @returns {boolean}
*/
export function isValidDate(date) {
return dayjs(date,"YYYY-MM-DD",true).isValid()
}
/**
* 校檢日期格式是否為YYYY-MM-DD HH:mm:ss這種格式
* @param date
* @returns {boolean}
*/
export function isValidDateTime(date) {
return dayjs(date,"YYYY-MM-DD HH:mm:ss",true).isValid()
}
/**
* 獲取當前日期年月日,時間格式為YYYY-MM-DD
* @returns {string}
*/
export function getCurrentDate() {
return dayjs(new Date()).format("YYYY-MM-DD")
}
/**
* 獲取當前日期年月日時分秒,時間格式為YYYY-MM-DD HH:mm:ss(24小時制,如果hh為小寫表示為12小時制)
* @returns {string}
*/
export function getCurrentDateTime() {
return dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
}
/**
* 將傳過來的日期轉(zhuǎn)換為YYYY-MM-DD這種格式
* @param date:為傳過來的日期
* @returns {string}
*/
export function getConvertDate(date) {
return dayjs(date).format("YYYY-MM-DD")
}
/**
* 將傳過來的日期轉(zhuǎn)換為YYYY-MM-DD HH:mm:ss這種格式
* @param date:為傳過來的日期
* @returns {string}
*/
export function getConvertDateTime(date) {
return dayjs(date).format("YYYY-MM-DD HH:mm:ss")
}
/**
* 將傳過來的日期加X日期且時間格式為YYYY-MM-DD這種格式,如:getXAfterDate('2023-11-11',1,'day'),結(jié)果為2023-11-12
* @param date:為傳過來的日期
* @param num:在當前日期加num,類型為int
* @param dateType:為要加的日期類型,有如下類型:'minute','hour','day','week','month','year'這六種類型
* @returns {string}
*/
export function getXAfterDate(date,num,dateType) {
return dayjs(date).add(num,dateType).format("YYYY-MM-DD")
}
/**
* 將傳過來的日期加X日期且時間格式為YYYY-MM-DD HH:mm:ss這種格式,如:getXAfterDateTime('2023-11-11 10:23:45',1,'day'),結(jié)果為2023-11-12 10:23:45
* @param date:為傳過來的日期
* @param num:在當前日期加num,類型為int
* @param dateType:為要加的日期類型,有如下類型:'minute','hour','day','week','month','year'這六種類型
* @returns {string}
*/
export function getXAfterDateTime(date,num,dateType) {
return dayjs(date).add(num,dateType).format("YYYY-MM-DD HH:mm:ss")
}
/**
* 將傳過來的日期減去X日期且時間格式為YYYY-MM-DD這種格式,如:getXBeforeDate('2023-11-11',1,'day'),結(jié)果為2023-11-10
* @param date:為傳過來的日期
* @param num:在當前日期加num,類型為int
* @param dateType:為要加的日期類型,有如下類型:'minute','hour','day','week','month','year'這六種類型
* @returns {string}
*/
export function getXBeforeDate(date,num,dateType) {
return dayjs(date).subtract(num,dateType).format("YYYY-MM-DD")
}
/**
* 將傳過來的日期減去X日期且時間格式為YYYY-MM-DD HH:mm:ss這種格式,如:getXBeforeDateTime('2023-11-11 10:23:45',1,'day'),結(jié)果為2023-11-10 10:23:45
* @param date:為傳過來的日期
* @param num:在當前日期加day,類型為int
* @param dateType:為要加的日期類型,有如下類型:'minute','hour','day','week','month','year'這六種類型
* @returns {string}
*/
export function getXBeforeDateTime(date,num,dateType) {
return dayjs(date).subtract(num,dateType).format("YYYY-MM-DD HH:mm:ss")
}
/**
* 計算2個日期之間的差值
* @param startDate:開始日期
* @param endDate:結(jié)束日期,結(jié)束日期要比開始日期大
* @param dateType:日期類型,有如下類型:'minute','hour','day','week','month','year'這六種類型
* @returns {number}
*/
export function getDateDiff(startDate,endDate,dateType) {
return dayjs(endDate).diff(dayjs(startDate),dateType)
}
/**
* 判斷date1是否在date2之前,比如:date1:2023-01-01 13:30:23,date2:2022-12-01 13:30:23,結(jié)果為false
* @param date1
* @param date2
* @returns {boolean}
*/
export function isBefore(date1,date2) {
return dayjs(date1).isBefore(dayjs(date2))
}
/**
* 判斷date1是否在date2之后,比如:date1:2023-01-01 13:30:23,date2:2022-12-01 13:30:23,結(jié)果為true
* @param date1
* @param date2
* @returns {boolean}
*/
export function isAfter(date1,date2) {
return dayjs(date1).isAfter(dayjs(date2))
}
/**
* 判斷date1是否與date2相同,比如:date1:2023-01-01 13:30:23,date2:2022-12-01 13:30:23,結(jié)果為false
* @param date1
* @param date2
* @returns {boolean}
*/
export function isSame(date1,date2) {
return dayjs(date1).isSame(dayjs(date2))
}
/**
* 判斷date1是否等于或者在date2之前,比如:date1:2023-01-01 13:30:23,date2:2022-12-01 13:30:23,結(jié)果為false
* @param date1
* @param date2
* @returns {boolean}
*/
export function isSameOrBefore(date1,date2) {
return dayjs(date1).isSameOrBefore(dayjs(date2))
}
/**
* 判斷date1是否等于或者在date2之后,比如:date1:2023-01-01 13:30:23,date2:2022-12-01 13:30:23,結(jié)果為true
* @param date1
* @param date2
* @returns {boolean}
*/
export function isSameOrAfter(date1,date2) {
return dayjs(date1).isSameOrAfter(dayjs(date2))
}
/**
* 判斷betweenDate日期是否在startDate開始日期和endDate結(jié)束日期之間
* @param startDate:開始日期
* @param betweenDate:中間日期
* @param endDate:結(jié)束日期要比開始日期大
* @returns {boolean}
*/
export function isBetween(startDate,betweenDate,endDate) {
return dayjs(startDate).isBetween(betweenDate, dayjs(endDate))
}
/**
* 將傳過來的日期轉(zhuǎn)為當年的1月1號或者當月的1號或者當周的周一
* @param date:傳過來日期
* @param dateType,日期類型,為:year,month,week這3種
* @returns {string}
*/
export function getEarlyDaysDate(date,dateType) {
return dayjs(date).startOf(dateType).format("YYYY-MM-DD")
}
/**
* 將傳過來的日期轉(zhuǎn)為當年的12月31號或者當月的最后一天或者當周的周日
* @param date:傳過來日期
* @param dateType,日期類型,為:year,month,week這3種
* @returns {string}
*/
export function getLastDaysDate(date,dateType) {
return dayjs(date).endOf(dateType).format("YYYY-MM-DD")
}
/**
* 獲取2個日期之間的所有日期,包括開始日期和結(jié)束日期,如:getIntermediateDate('2023-12-01','2023-12-15',1,'day'))
* @param startDate:開始日期
* @param endDate:結(jié)束日期要大于開始日期
* @param num:在開始日期上加num,int類型,如果dateType為day,num為1那么就是在開始日期上加一天
* @param dateType,日期類型,類型如下:'minute','hour','day','week','month','year'這六種類型
* @returns {*[]}
*/
export function getIntermediateDate(startDate,endDate,num,dateType) {
//聲明一個數(shù)組用來存放所有日期,默認把開始日期放進數(shù)組里面,不然少一個開始日期數(shù)據(jù)
let daysArray=[startDate]
//判斷startDate是否在endDate之前
while (isBefore(startDate,endDate)){
//如果開始日期在結(jié)束日期之前,那么就將開始日期加num,并重新賦值給開始日期,不然會死循環(huán)
startDate = getXAfterDate(startDate,num,dateType)
//將計算后的日期放進數(shù)組里面
daysArray.push(startDate)
}
return daysArray
}
這里隨便在工具類里面找?guī)讉€方法使用：
瀏覽器結(jié)果如下：
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue生產(chǎn)環(huán)境調(diào)試的方法步驟
開發(fā)環(huán)境下Vue會提供很多警告來幫你對付常見的錯誤與陷阱,而在生產(chǎn)環(huán)境下,這些警告語句卻沒有用,反而會增加應(yīng)用的體積,下面這篇文章主要給大家介紹了關(guān)于Vue生產(chǎn)環(huán)境調(diào)試的方法步驟,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了如何使用 vue-cli 創(chuàng)建模板項目，幫助大家更好的理解和學(xué)習(xí)vue框架的知識，感興趣的朋友可以了解下2020-11-11
vue+vant-UI框架實現(xiàn)購物車的復(fù)選框全選和反選功能
這篇文章主要介紹了vue+vant-UI框架實現(xiàn)購物車的復(fù)選框全選和反選功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了vue 組件基礎(chǔ)知識的相關(guān)資料，幫助大家更好的理解和使用vue的組件，感興趣的朋友可以了解下2021-11-11
Vue使用xlsx插件導(dǎo)出excel文件的詳細指南
第三方庫xlsx提供了強大的功能來處理Excel文件,它可以簡化導(dǎo)出Excel文件這個過程,下面小編就來為大家詳細講講Vue如何通過xlsx導(dǎo)出excel,需要的小伙伴可以了解下2025-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)選項卡小案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
VUE對Storage的過期時間設(shè)置,及增刪改查方式
這篇文章主要介紹了VUE對Storage的過期時間設(shè)置,及增刪改查方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了解決vue3項目中el-menu不兼容SSR問題,需要的朋友可以參考下2023-12-12
本文主要介紹了vue中給路徑起別名的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
uniapp-ios開發(fā)之App端與webview端相互通信的方法以及注意事項
在uni-app與Webview之間進行數(shù)據(jù)交互是非常常見的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp-ios開發(fā)之App端與webview端相互通信的方法以及注意事項的相關(guān)資料,需要的朋友可以參考下2024-07-07