Vue3使用dayjs以及dayjs日期工具類詳解

更新時間：2024年03月18日 09:15:09 作者：誰不想飛舞青春

這篇文章主要介紹了Vue3使用dayjs以及dayjs日期工具類,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

說明

這里記錄下在Vue3里面使用dayjs插件，以及將它在全局使用，并且將dayjs封裝成自己需要的日期工具類。

留待以后需要時直接使用。

安裝dayjs命令

npm install dayjs --save

在main.js里面全局導入

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將當前時間轉換為指定樣式
this.$dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")

瀏覽器結果如下：

dayjs日期工具類

在dateUtil.js里面局部使用dayjs，并將它封裝為自己的日期工具類。

//日期工具類
//局部導入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")
}

/**
 * 將傳過來的日期轉換為YYYY-MM-DD這種格式
 * @param date:為傳過來的日期
 * @returns {string}
 */
export function getConvertDate(date) {
  return dayjs(date).format("YYYY-MM-DD")
}

/**
 * 將傳過來的日期轉換為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'),結果為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'),結果為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'),結果為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'),結果為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:結束日期,結束日期要比開始日期大
 * @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,結果為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,結果為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,結果為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,結果為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,結果為true
 * @param date1
 * @param date2
 * @returns {boolean}
 */
export function isSameOrAfter(date1,date2) {
  return dayjs(date1).isSameOrAfter(dayjs(date2))
}

/**
 * 判斷betweenDate日期是否在startDate開始日期和endDate結束日期之間
 * @param startDate:開始日期
 * @param betweenDate:中間日期
 * @param endDate:結束日期要比開始日期大
 * @returns {boolean}
 */
export function isBetween(startDate,betweenDate,endDate) {
  return dayjs(startDate).isBetween(betweenDate, dayjs(endDate))
}

/**
 * 將傳過來的日期轉為當年的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")
}

/**
 * 將傳過來的日期轉為當年的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個日期之間的所有日期,包括開始日期和結束日期,如:getIntermediateDate('2023-12-01','2023-12-15',1,'day'))
 * @param startDate:開始日期
 * @param endDate:結束日期要大于開始日期
 * @param num:在開始日期上加num,int類型,如果dateType為day,num為1那么就是在開始日期上加一天
 * @param dateType,日期類型,類型如下:'minute','hour','day','week','month','year'這六種類型
 * @returns {*[]}
 */
export function getIntermediateDate(startDate,endDate,num,dateType) {
  //聲明一個數組用來存放所有日期,默認把開始日期放進數組里面,不然少一個開始日期數據
  let daysArray=[startDate]
  //判斷startDate是否在endDate之前
  while (isBefore(startDate,endDate)){
    //如果開始日期在結束日期之前,那么就將開始日期加num,并重新賦值給開始日期,不然會死循環(huán)
    startDate = getXAfterDate(startDate,num,dateType)
    //將計算后的日期放進數組里面
    daysArray.push(startDate)
  }
  return daysArray
}

這里隨便在工具類里面找?guī)讉€方法使用：