DatePicker 日期选择器

日期/时间选择器组件，支持单个日期、日期时间、日期范围等选择模式，内置快捷选项，可限制可选日期范围。

基础用法

tsx

import { defineComponent, reactive } from 'vue'
import DatePicker from '@/components/DatePicker'

export default defineComponent({
  name: 'DemoDatePickerBasic',
  setup() {
    const model = reactive({
      date: '',
      datetime: '',
      daterange: ['', ''] as [string, string],
      datetimerange: ['', ''] as [string, string],
      month: '',
      year: '',
      limited: ['', ''] as [string, string],
    })

    const section = (title: string) => (
      <div style="font-size:13px; font-weight:600; color:#333; margin-top:4px;">
        {title}
      </div>
    )

    return () => (
      <div class="demo-block">
        <div style="display:flex; flex-direction:column; gap:16px; max-width:420px;">
          {section('选择日期')}
          <DatePicker v-model={model.date} type="date" />

          {section('选择日期时间')}
          <DatePicker v-model={model.datetime} type="datetime" />

          {section('选择日期范围（内置快捷选项）')}
          <DatePicker v-model={model.daterange} type="daterange" />

          {section('选择日期时间范围')}
          <DatePicker v-model={model.datetimerange} type="datetimerange" />

          {section('选择月份')}
          <DatePicker v-model={model.month} type="month" />

          {section('选择年份')}
          <DatePicker v-model={model.year} type="year" />

          {section('日期范围限制（7 天内可选）')}
          <DatePicker
            v-model={model.limited}
            type="daterange"
            minDayOffset={-7}
            maxDayOffset={0}
            placeholder="仅可选 7 天内"
          />

          <div
            style="font-size:13px; color:#666; background:#f5f7fa; padding:12px; border-radius:4px; white-space:pre-wrap; word-break:break-all; line-height:1.6;"
          >
            当前值：{JSON.stringify(model, null, 2)}
          </div>
        </div>
      </div>
    )
  },
})

Props

属性名	类型	默认值	说明
modelValue	`any`	—	绑定值（支持 `v-model`）
type	`'date' \| 'datetime' \| 'daterange' \| 'datetimerange' \| 'month' \| 'year' \| 'week' \| 'dates' \| 'months' \| 'years'`	`'date'`	选择器类型
valueFormat	`string`	—	值输出格式（如 `YYYY-MM-DD`），优先于全局配置
displayFormat	`string`	`'YYYY-MM-DD'`	显示格式，优先于全局配置
placeholder	`any`	—	占位文本
disabled	`boolean`	`false`	是否禁用
clearable	`boolean`	`true`	是否显示清除按钮
editable	`boolean`	`true`	文本框是否可输入
size	`'large' \| 'default' \| 'small'`	—	输入框尺寸
autoPadTime	`boolean`	`true`	`daterange` 时自动补齐时间：start → `00:00:00`，end → `23:59:59`
showShortcuts	`boolean`	`true`	是否显示内置快捷选项（仅 `daterange` / `datetimerange` 有效）
shortcuts	`Array`	—	自定义快捷选项，传了则完全覆盖内置
minDayOffset	`number`	—	相对今天的天数下限。`0` = 今天之前不可选，`-7` = 7 天前起可选。不填不限制
maxDayOffset	`number`	—	相对今天的天数上限。`10` = 10 天内可选。不填不限制
props	`object`	—	额外透传给 `ElDatePicker` 的属性

类型说明

类型	说明	默认值格式
`date`	选择日期	`YYYY-MM-DD`
`datetime`	选择日期和时间	`YYYY-MM-DD HH:mm:ss`
`daterange`	选择日期范围	`YYYY-MM-DD HH:mm:ss`（受 `autoPadTime` 影响）
`datetimerange`	选择日期时间范围	`YYYY-MM-DD HH:mm:ss`
`month`	选择月份	`YYYY-MM`
`year`	选择年份	`YYYY`
`week`	选择周	`YYYY-MM-DD`
`dates`	选择多个日期	`YYYY-MM-DD`
`months`	选择多个月份	`YYYY-MM`
`years`	选择多个年份	`YYYY`

内置快捷选项

当 type 为 daterange 或 datetimerange 且 showShortcuts 为 true 时，内置以下快捷选项：

今天 — 当日
最近 3 天 — 从两天前到今天
本周 — 从周初到今天
最近 7 天 — 六天前到今天
最近 15 天 — 14 天前到今天
最近 30 天 — 29 天前到今天

可通过 shortcuts 属性自定义完全覆盖，或设置 showShortcuts={false} 隐藏。

全局配置

app.use(yoyooUi, {
  datePicker: {
    valueFormat: 'YYYY-MM-DD',    // 绑定值格式
    displayFormat: 'YYYY-MM-DD',  // 显示格式
  },
  time: {
    iso: false,  // 是否使用 ISO 时间格式
  },
})

在 DataForm 配置中使用 props 传递以上属性。

DatePicker 日期选择器 ​

基础用法 ​

Props ​

类型说明 ​

内置快捷选项 ​