DateRange 日期范围

用于选择日期范围，通过两个独立的日期选择器来实现，而不是使用原生的范围选择器。

类型定义

interface DateRangeProps {
  type?: 'datetime' | 'date' | 'month' | 'year'
  valueFormat?: string
  rangeSeparator?: string
  props?: Record<string, any>
  startProps?: Record<string, any>
  endProps?: Record<string, any>
}

DateRange 属性

属性名	说明	类型	可选值	默认值
model-value / v-model	绑定值	(Date | null)[]	—	—
type	显示类型	'datetime' | 'date' | 'month' | 'year'	datetime/date/month/year	'date'
value-format	可选，绑定值的格式	string	—	根据 type 自动计算
range-separator	选择范围时的分隔符	string	—	'至'
props	通用属性，应用到两个日期选择器	Record<string, any>	—	—
start-props	开始日期选择器的专属属性	Record<string, any>	—	—
end-props	结束日期选择器的专属属性	Record<string, any>	—	—

DateRange 事件

事件名	说明	回调参数
change	用户确认选定的值时触发	value: (Date | null)[]

DateRange 方法

通过组件内部的 DatePicker 实例提供以下方法：

方法名	说明	参数
focus	使 input 获取焦点	position?: 'start' | 'end'
blur	使 input 失去焦点	position?: 'start' | 'end'

自动调整逻辑

组件内置了智能的日期调整逻辑：

• 当开始日期大于结束日期时，会自动将结束日期调整为开始日期
• 当结束日期小于开始日期时，会自动将开始日期调整为结束日期
• 清空任一日期时，会同时清空另一个日期
• 选择开始日期后会自动聚焦到结束日期选择器

预设格式

根据不同的 type 类型，组件会自动应用相应的格式：

Type	默认格式	宽度
datetime	YYYY-MM-DD HH:mm:ss	450px
date	YYYY-MM-DD	350px
month	YYYY-MM	300px
year	YYYY	220px