下面在 Vue 3 + Element Plus 项目里选择日期范围，并转换成含起点、不含终点的时间区间。这样不用拼 23:59:59，也不会漏掉最后一秒中的毫秒数据。

保存为一个 Vue 单文件组件，项目需已安装并注册 Element Plus：

<template>
  <el-date-picker v-model="range" type="daterange"
    start-placeholder="开始日期" end-placeholder="结束日期"
    :shortcuts="shortcuts" />
  <el-button @click="preview">查看查询参数</el-button>
  <pre>{{ result }}</pre>
</template>


<script setup>
import { ref } from 'vue'


function recentDays(days) {
  const end = new Date()
  end.setHours(0, 0, 0, 0)
  const start = new Date(end)
  start.setDate(start.getDate() - days + 1)
  return [start, end]
}
const range = ref(recentDays(7))
const result = ref('')
const shortcuts = [
  { text: '今天', value: () => recentDays(1) },
  { text: '最近七天（含今天）', value: () => recentDays(7) },
  { text: '最近三十天（含今天）', value: () => recentDays(30) },
]
function preview() {
  if (!range.value || range.value.length !== 2) {
    result.value = '请先选择日期范围'
    return
  }
  const start = new Date(range.value[0])
  start.setHours(0, 0, 0, 0)
  const endExclusive = new Date(range.value[1])
  endExclusive.setHours(0, 0, 0, 0)
  endExclusive.setDate(endExclusive.getDate() + 1)
  result.value = JSON.stringify({
    start: start.toISOString(),
    endExclusive: endExclusive.toISOString(),
  }, null, 2)
}
</script>

默认选中值来自 ref(recentDays(7))。default-value 控制初次打开的面板日期，不会替你填入 v-model。这里未设置 value-format，所以绑定值是 Date，而不是格式化字符串。

示例按浏览器本地时区解释日期，再把时间点转换为 UTC ISO 字符串；后端查询使用 时间 >= start AND 时间 < endExclusive。如果业务固定 Asia/Shanghai 而使用者在其他时区，改由后端按业务时区解释日期，不能直接套用本地午夜。

“最近七天含今天”从今天减六天开始。“最近一个月”与“三十天”不是同一规则，日期 setMonth 还会受到月末溢出的影响，先确定产品需要哪一种。

参考：Element Plus 日期选择器。