Components

DatePicker 日期选择

适用于备份、事件和任务记录的单日期与日期范围筛选,采用稳定的 YYYY-MM-DD 值。

日期范围筛选

范围选择器内置快捷范围;日期禁用和边界由调用方以本地日期键控制。

日期:2026-10-04 · 范围:2026-09-28 → 2026-10-04

<script setup lang="ts">
import { ref } from 'vue'
const date = ref('2026-10-04')
const range = ref({ start: '2026-09-28', end: '2026-10-04' })
</script>

<template>
  <DatePicker v-model="date" label="执行日期" min="2026-01-01" />
  <DateRangePicker v-model="range" label="事件时间范围" :presets="presets" />
</template>

API 参考

属性类型默认值说明
v-modelstring—DatePicker 绑定 YYYY-MM-DD 本地日期键。
v-model{ start: string; end: string }—DateRangePicker 绑定起止日期键。
min / maxstring—可选的 YYYY-MM-DD 可选日期边界。
disabled-datesstring[] | (date) => boolean—禁用指定日期或自定义禁用规则。
presets{ label, value }[][]DateRangePicker 中的快捷日期范围。