实现 日期差计算器 工具

分类：developer ｜ 标签：日期、天数、工作日、计算 计算两个日期之间的天数差，支持排除周末/节假日的工作日计算

2.1 功能说明

计算两个日期之间的天数差，支持排除周末/节假日的工作日计算

核心能力

• 开始日期
• 结束日期
• 计算方式
• natural
• workday

2.1.1 使用指南

日期差计算器使用指南

计算方式

• 自然日：两个日期之间的日历天数（含起止当天差，结束-开始）。
• 工作日：排除周六、周日的天数。

典型场景

排期、请假天数、项目工期、账期计算。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• diffParts()
• calc()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref, computed } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const start = ref('')
const end = ref('')
const mode = ref('natural')
const error = ref('')

const days = computed(() => {
  error.value = ''
  if (!start.value || !end.value) return null
  const s = new Date(start.value + 'T00:00:00')
  const e = new Date(end.value + 'T00:00:00')
  if (isNaN(s) || isNaN(e)) { error.value = '日期无效'; return null }
  if (e < s) { error.value = '结束日期应不早于开始日期'; return null }
  const diffMs = e - s
  if (mode.value === 'natural') {
    return Math.round(diffMs / 86400000)
  }
  // 工作日：逐日判断
  let count = 0
  const cur = new Date(s)
  while (cur <= e) {
    const dow = cur.getDay()
    if (dow !== 0 && dow !== 6) count++
    cur.setDate(cur.getDate() + 1)
  }
  return count
})

const done = computed(() => days.value !== null)
const weeks = computed(() => (days.value !== null ? (days.value / 7).toFixed(1) : 0))
const years = computed(() => (start.value && end.value ? diffParts().y : 0))
const months = computed(() => (start.value && end.value ? diffParts().m : 0))
const daysInMonth = computed(() => (start.value && end.value ? diffParts().d : 0))

function diffParts() {
  const s = new Date(start.value + 'T00:00:00')
  const e = new Date(end.value + 'T00:00:00')
  let y = e.getFullYear() - s.getFullYear()
  let m = e.getMonth() - s.getMonth()
  let d = e.getDate() - s.getDate()
  if (d < 0) { m--; d += new Date(e.getFullYear(), e.getMonth(), 0).getDate() }
  if (m < 0) { y--; m += 12 }
  return { y, m, d }
}

function calc() {
  void days.value
}

2.3 效果截图

暂未生成该工具的效果截图。

工具访问地址：https://www.i91tools.com/tools/date-difference