开发预览更新于 2026-05-10

DateRangePicker 日期范围

双月并列展示，点击两次确认范围；支持 hover 预览、min/max/disabledDate、近 7 / 30 / 90 天预设。

基础用法

v-model 绑定 [start, end] 二元组，每一项是 'YYYY-MM-DD' 字符串或 null。第一次点击设定起点，鼠标移动到目标日期会高亮预览，再点一次确认终点。如果第二次点击早于第一次，自动调换顺序。

2026-05-01 / 2026-05-12

<CfDateRangePicker v-model="value" clearable />

<CfDateRangePicker value={value} onChange={setValue} clearable />

范围限制 + 快捷预设

minDate / maxDate 同 DatePicker；disabledDate 也支持。面板底部内置「近 7 / 30 / 90 天」三个快捷按钮，点击后立即应用并关闭。

<CfDateRangePicker
v-model="value"
min-date="2026-01-01"
max-date="2026-12-31"
clearable
:placeholder="['起始', '结束']"
/>

<CfDateRangePicker
value={value}
minDate="2026-01-01"
maxDate="2026-12-31"
clearable
placeholder={['起始', '结束']}
onChange={(v) => setValue(v)}
/>

三种触发器 variant

variant 控制触发输入框的视觉模式 — outline（默认，带描边）/ filled（实底）/ ghost（透明，悬停描边）。

<CfDateRangePicker v-model="a" variant="outline" />
<CfDateRangePicker v-model="b" variant="filled" />
<CfDateRangePicker v-model="c" variant="ghost" />

<CfDateRangePicker value={a} onChange={setA} variant="outline" />
<CfDateRangePicker value={b} onChange={setB} variant="filled" />
<CfDateRangePicker value={c} onChange={setC} variant="ghost" />

自定义占位 / 分隔符

placeholder 是 [startPlaceholder, endPlaceholder] 二元组，separator 控制起止之间的连接词（默认「至」）。

<CfDateRangePicker v-model="a" :placeholder="['起始日期', '结束日期']" separator="至" />
<CfDateRangePicker v-model="b" :placeholder="['Start', 'End']" separator="—" />

<CfDateRangePicker value={a} placeholder={['起始日期', '结束日期']} separator="至" />
<CfDateRangePicker value={b} placeholder={['Start', 'End']} separator="—" />

API

属性	类型	默认值	说明
`modelValue` (Vue) / `value` (React)	`[string \| null, string \| null]`	`[null, null]`	起止日期数组
`format`	`string`	`'YYYY-MM-DD'`	显示格式
`placeholder`	`[string, string]`	`['开始日期', '结束日期']`	起止占位
`separator`	`string`	`'至'`	起止之间的连接词
`variant`	`'outline' \| 'filled' \| 'ghost'`	`'outline'`	触发器视觉模式
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`disabled`	`boolean`	`false`	禁用
`clearable`	`boolean`	`false`	显示清除按钮
`error`	`boolean`	`false`	错误态
`minDate` / `maxDate`	`DateLike`	`—`	可选范围
`disabledDate`	`(date: Date) => boolean`	`—`	自定义禁用规则
`weekStartsOn`	`0 \| 1`	`1`	0 = 周日开头，1 = 周一开头

事件：update:modelValue / change(start, end)（React 端：onChange(value, start, end)）。