DatePicker 日期选择器

用于选择或输入日期，支持日期、日期范围等模式。

基础用法

使用 v-model 绑定日期值，通过 type 属性切换选择模式。

—

<template>
  <ZcDatePicker v-model="date1" placeholder="选择日期" />
  <ZcDatePicker v-model="date2" type="daterange" />
</template>

快捷选项

通过 shortcuts 属性配置快捷选择项。

—

<template>
  <ZcDatePicker v-model="date" type="daterange" :shortcuts="shortcuts" />
</template>

<script setup>
const shortcuts = [
  { text: '最近一周', value: () => [new Date(Date.now() - 7 * 24 * 3600 * 1000), new Date()] },
  { text: '最近一个月', value: () => [new Date(Date.now() - 30 * 24 * 3600 * 1000), new Date()] },
  { text: '最近三个月', value: () => [new Date(Date.now() - 90 * 24 * 3600 * 1000), new Date()] },
]
</script>

日期格式与禁用

通过 format 自定义显示格式，disabled 禁用选择器。

<template>
  <ZcDatePicker v-model="date1" format="YYYY/MM/DD" placeholder="自定义格式" />
  <ZcDatePicker v-model="date2" disabled placeholder="禁用状态" />
</template>

DatePicker API

Props

参数	说明	类型	默认值
modelValue	绑定值	Date | [Date, Date] | string	—
type	选择器类型	date | daterange	date
placeholder	占位文本	string	请选择日期
startPlaceholder	范围选择时开始日期的占位文本	string	开始日期
endPlaceholder	范围选择时结束日期的占位文本	string	结束日期
size	选择器尺寸	large | medium | small	medium
disabled	是否禁用	boolean	false
clearable	是否可清空	boolean	false
format	日期显示格式	string	YYYY-MM-DD
shortcuts	快捷选项列表	DatePickerShortcut[]	—
disabledDate	禁用日期判断函数	(date: Date) => boolean	—

Events

事件名	说明	回调参数
update:modelValue	绑定值更新时触发	(value: Date | [Date, Date] | string)
change	日期选择变化时触发	(value: Date | [Date, Date])
focus	获取焦点时触发	(event: FocusEvent)
blur	失去焦点时触发	(event: FocusEvent)

DatePickerShortcut 类型

interface DatePickerShortcut {
  text: string
  value: (() => Date | [Date, Date]) | Date | [Date, Date]
}