基于Vue3實現(xiàn)一個日期計算器的操作方案
更新時間：2026年01月27日 09:59:48 作者：滕青山
該文章主要介紹了在線日期計算器工具的開發(fā)過程,包括核心功能設(shè)計、實現(xiàn)細節(jié)、狀態(tài)管理和日期處理技巧,工具提供了日期間隔計算、日期加減計算、年齡計算和工作日計算等功能,需要的朋友可以參考下
在線工具網(wǎng)址：https://see-tool.com/date-calculator
工具截圖：
一、核心功能設(shè)計
日期計算器包含四個獨立模塊:
- 日期間隔計算: 計算兩個日期之間的天數(shù)、周數(shù)、月數(shù)、年數(shù)
- 日期加減計算: 在基準日期上加減指定時間單位
- 年齡計算: 精確計算年齡(年/月/日)
- 工作日計算: 統(tǒng)計工作日、周末天數(shù)
二、日期間隔計算實現(xiàn)
2.1 核心計算邏輯
const dateDiff = computed(() => {
if (!startDate.value || !endDate.value) {
return { days: 0, weeks: 0, months: 0, years: 0 }
}
const start = new Date(startDate.value)
const end = new Date(endDate.value)
// 確保開始日期小于結(jié)束日期(自動排序)
const [earlierDate, laterDate] = start <= end ? [start, end] : [end, start]
let diffTime = laterDate.getTime() - earlierDate.getTime()
// 如果包含結(jié)束日期,增加一天
if (includeEndDate.value) {
diffTime += 24 * 60 * 60 * 1000
}
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
// 計算精確的月數(shù)差異
let months = (laterDate.getFullYear() - earlierDate.getFullYear()) * 12
months += laterDate.getMonth() - earlierDate.getMonth()
// 如果日期不足一個月,減去一個月
if (laterDate.getDate() < earlierDate.getDate()) {
months--
}
// 計算年數(shù)
const years = Math.floor(months / 12)
return {
days: diffDays,
weeks: Math.floor(diffDays / 7),
months: Math.max(0, months),
years: Math.max(0, years)
}
})
關(guān)鍵點:
- 自動排序: 無論用戶輸入順序,自動識別較早和較晚的日期
- 包含結(jié)束日期: 可選項,影響天數(shù)計算(+1天)
- 精確月數(shù): 考慮日期不足一個月的情況
- 負數(shù)保護: 使用
Math.max(0, value)防止負數(shù)
2.2 輔助工具函數(shù)
// 交換開始和結(jié)束日期
const swapDates = () => {
const temp = startDate.value
startDate.value = endDate.value
endDate.value = temp
}
// 設(shè)置結(jié)束日期為今天
const setToday = (type) => {
if (!process.client) return
const today = new Date().toISOString().split('T')[0]
if (type === 'diff') {
endDate.value = today
}
}
三、日期加減計算實現(xiàn)
3.1 核心計算邏輯
const calculatedDate = computed(() => {
if (!baseDate.value) {
return ''
}
if (!amount.value || amount.value === 0) {
return baseDate.value
}
const base = new Date(baseDate.value)
// 根據(jù)操作類型確定正負
const value = operation.value === 'add' ? parseInt(amount.value) : -parseInt(amount.value)
switch (unit.value) {
case 'days':
base.setDate(base.getDate() + value)
break
case 'weeks':
base.setDate(base.getDate() + (value * 7))
break
case 'months':
base.setMonth(base.getMonth() + value)
break
case 'years':
base.setFullYear(base.getFullYear() + value)
break
}
return base.toISOString().split('T')[0]
})
關(guān)鍵點:
- 操作符處理: 減法通過負數(shù)實現(xiàn),統(tǒng)一使用加法邏輯
- 原生 Date API: 利用
setDate/setMonth/setFullYear自動處理溢出 - 格式化輸出:
toISOString().split('T')[0]獲取 YYYY-MM-DD 格式
3.2 獲取星期幾
const getWeekday = (dateStr) => {
if (!dateStr) return ''
const weekdays = tm('dateCalculator.weekdays')
if (!weekdays || !Array.isArray(weekdays)) return ''
const date = new Date(dateStr)
return weekdays[date.getDay()] || ''
}
說明:
getDay()返回 0-6,其中 0 代表周日- 從國際化配置中讀取星期名稱數(shù)組
四、年齡計算實現(xiàn)
4.1 精確年齡計算
const age = computed(() => {
if (!birthDate.value || !ageCalculateDate.value) {
return { years: 0, months: 0, days: 0, totalDays: 0 }
}
const birth = new Date(birthDate.value)
const calculate = new Date(ageCalculateDate.value)
// 如果出生日期晚于計算日期,返回0
if (birth > calculate) {
return { years: 0, months: 0, days: 0, totalDays: 0 }
}
// 計算精確年齡
let years = calculate.getFullYear() - birth.getFullYear()
let months = calculate.getMonth() - birth.getMonth()
let days = calculate.getDate() - birth.getDate()
// 調(diào)整天數(shù)
if (days < 0) {
months--
// 獲取上個月的天數(shù)
const lastMonth = new Date(calculate.getFullYear(), calculate.getMonth(), 0)
days += lastMonth.getDate()
}
// 調(diào)整月數(shù)
if (months < 0) {
years--
months += 12
}
// 計算總天數(shù)
const totalDays = Math.floor((calculate.getTime() - birth.getTime()) / (1000 * 60 * 60 * 24))
return {
years: Math.max(0, years),
months: Math.max(0, months),
days: Math.max(0, days),
totalDays: Math.max(0, totalDays)
}
})
關(guān)鍵點:
- 逐級調(diào)整: 先調(diào)整天數(shù),再調(diào)整月數(shù),最后得到年數(shù)
- 借位邏輯: 天數(shù)不足時從月份借位,月份不足時從年份借位
- 上月天數(shù): 使用
new Date(year, month, 0)獲取上月最后一天 - 總天數(shù): 單獨計算,用于顯示"已活xx天"
4.2 派生數(shù)據(jù)計算
// 模板中使用 Math.floor(age.totalDays / 30.44) // 總月數(shù)(平均每月30.44天) Math.floor(age.totalDays / 7) // 總周數(shù) age.totalDays // 總天數(shù)
五、工作日計算實現(xiàn)
5.1 核心計算邏輯
const workDays = computed(() => {
if (!workStartDate.value || !workEndDate.value) {
return { total: 0, weekdays: 0, weekends: 0 }
}
const start = new Date(workStartDate.value)
const end = new Date(workEndDate.value)
// 確保開始日期不大于結(jié)束日期
if (start > end) {
return { total: 0, weekdays: 0, weekends: 0 }
}
let weekdays = 0
let weekends = 0
const current = new Date(start)
// 包含開始和結(jié)束日期
while (current <= end) {
const dayOfWeek = current.getDay()
if (dayOfWeek === 0 || dayOfWeek === 6) { // 周日=0, 周六=6
weekends++
} else {
weekdays++
}
current.setDate(current.getDate() + 1)
}
return {
total: weekdays + weekends,
weekdays: excludeWeekends.value ? weekdays : weekdays + weekends,
weekends
}
})
關(guān)鍵點:
- 逐日遍歷: 從開始日期循環(huán)到結(jié)束日期,逐日判斷
- 星期判斷:
getDay()返回 0(周日) 或 6(周六) 為周末 - 可選排除: 根據(jù)
excludeWeekends決定是否排除周末 - 包含邊界: 包含開始和結(jié)束日期
六、狀態(tài)管理
6.1 響應式狀態(tài)定義
// Tab 切換
const activeTab = ref('difference')
// 日期間隔計算
const startDate = ref('')
const endDate = ref('')
const includeEndDate = ref(false)
// 日期加減計算
const baseDate = ref('')
const operation = ref('add') // 'add' | 'subtract'
const amount = ref(0)
const unit = ref('days') // 'days' | 'weeks' | 'months' | 'years'
// 工作日計算
const workStartDate = ref('')
const workEndDate = ref('')
const excludeWeekends = ref(true)
// 年齡計算
const birthDate = ref('')
const ageCalculateDate = ref('')
6.2 初始化默認值
onMounted(() => {
if (!process.client) return
const today = new Date().toISOString().split('T')[0]
startDate.value = today
endDate.value = today
baseDate.value = today
workStartDate.value = today
workEndDate.value = today
birthDate.value = '' // 不設(shè)置默認出生日期
ageCalculateDate.value = today
})
說明:
- 使用
process.client判斷避免 SSR 問題 - 出生日期不設(shè)默認值,避免誤導用戶
七、日期處理技巧
7.1 Date 對象的自動溢出處理
// JavaScript 的 Date 會自動處理溢出
const date = new Date('2024-01-31')
date.setMonth(date.getMonth() + 1) // 自動變?yōu)?2024-03-02(2月沒有31日)
7.2 獲取上月最后一天
// 將日期設(shè)為0,會自動回退到上月最后一天 const lastDayOfLastMonth = new Date(year, month, 0)
7.3 日期格式化
// ISO 格式轉(zhuǎn) YYYY-MM-DD
const dateStr = new Date().toISOString().split('T')[0]
八、核心算法總結(jié)
日期間隔計算: 時間戳相減 → 轉(zhuǎn)換為天數(shù) 年月日逐級計算 → 處理借位 日期加減計算: 原生 Date API → 自動處理溢出 年齡計算: 年月日分別相減 → 逐級調(diào)整借位 工作日計算: 逐日遍歷 → 判斷星期幾 → 統(tǒng)計分類
核心原則:
- 利用原生 API: Date 對象的自動溢出處理
- 邊界處理: 防止負數(shù)、空值、非法日期
- 精確計算: 考慮月份天數(shù)差異、閏年等特殊情況
- 用戶友好: 自動排序、可選配置、實時計算
以上就是基于Vue3實現(xiàn)一個日期計算器的操作方案的詳細內(nèi)容，更多關(guān)于Vue3日期計算器的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue如何使用cookie、localStorage和sessionStorage進行儲存數(shù)據(jù)
這篇文章主要介紹了vue如何使用cookie、localStorage和sessionStorage進行儲存數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue中的循環(huán)遍歷對象、數(shù)組和字符串，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
文件上傳是我們在開發(fā)Web應用時經(jīng)常遇到的功能之一,為了提升用戶體驗,我們可以利用HTML5的拖放API來實現(xiàn)拖拽文件上傳的功能,本文將介紹如何在Vue3中實現(xiàn)這一功能,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2023-12-12
本文主要介紹了vue項目運行時出現(xiàn)It works的問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要為大家介紹了vue使用反向代理解決跨域問題方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
本文介紹了使用scp2庫將構(gòu)建后的文件上傳到生產(chǎn)或測試環(huán)境的方案,包括安裝scp2、編寫環(huán)境腳本、忽略腳本、添加npm腳本命令及執(zhí)行步驟,該方法簡便但不夠安全,適合快速部署2025-11-11
這篇文章主要給大家介紹了關(guān)于Vue中ref和$refs使用方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了vue如何通過src引用assets中的圖片，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
最近需要做一個el-table的表格,表頭需要顯示提示信息,本文主要介紹了ElementUI中el-table表格組件如何自定義表頭,具有一定的參考價值,感興趣的可以了解一下2023-09-09
這篇文章主要給大家介紹了關(guān)于vue3標簽中的ref屬性詳解及如何使用$refs獲取元素的相關(guān)資料,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-11-11