DateRangePicker 日期范围
双月并列展示，点击两次确认范围；支持 hover 预览、min/max/disabledDate、近 7 / 30 / 90 天预设。
基础用法
v-model 绑定 [start, end] 二元组，每一项是 'YYYY-MM-DD' 字符串或 null。第一次点击设定起点，鼠标移动到目标日期会高亮预览，再点一次确认终点。如果第二次点击早于第一次，自动调换顺序。
背景
2026-05-01 / 2026-05-12<script setup lang="ts">
import { ref } from 'vue';
import { CfDateRangePicker, type DateRangeValue } from '@chufix-design/vue';
const value = ref<DateRangeValue>(['2026-05-01', '2026-05-12']);
</script>
<template>
<div style="display:flex; gap: 12px; align-items: center; flex-wrap: wrap;">
<CfDateRangePicker v-model="value" clearable />
<code style="font-size: 12px;">{{ value.join(' / ') || '(无)' }}</code>
</div>
</template><script setup>
import { ref } from 'vue';
import { CfDateRangePicker } from '@chufix-design/vue';
const value = ref<DateRangeValue>(['2026-05-01', '2026-05-12']);
</script>
<template>
<div style="display:flex; gap: 12px; align-items: center; flex-wrap: wrap;">
<CfDateRangePicker v-model="value" clearable />
<code style="font-size: 12px;">{{ value.join(' / ') || '(无)' }}</code>
</div>
</template><CfDateRangePicker value={value} onChange={setValue} clearable /><CfDateRangePicker value={value} onChange={setValue} clearable />范围限制 + 快捷预设
minDate / maxDate 同 DatePicker；disabledDate 也支持。面板底部内置「近 7 / 30 / 90 天」三个快捷按钮，点击后立即应用并关闭。
背景
<script setup lang="ts">
import { ref } from 'vue';
import { CfDateRangePicker, type DateRangeValue } from '@chufix-design/vue';
const value = ref<DateRangeValue>([null, null]);
</script>
<template>
<CfDateRangePicker
v-model="value"
min-date="2026-01-01"
max-date="2026-12-31"
clearable
:placeholder="['起始', '结束']"
/>
</template><script setup>
import { ref } from 'vue';
import { CfDateRangePicker } from '@chufix-design/vue';
const value = ref<DateRangeValue>([null, null]);
</script>
<template>
<CfDateRangePicker
v-model="value"
min-date="2026-01-01"
max-date="2026-12-31"
clearable
:placeholder="['起始', '结束']"
/>
</template><CfDateRangePicker
value={value}
minDate="2026-01-01"
maxDate="2026-12-31"
clearable
placeholder={['起始', '结束']}
onChange={(v) => setValue(v)}
/><CfDateRangePicker
value={value}
minDate="2026-01-01"
maxDate="2026-12-31"
clearable
placeholder={['起始', '结束']}
onChange={(v) => setValue(v)}
/>三种触发器 variant
variant 控制触发输入框的视觉模式 — outline（默认，带描边）/ filled（实底）/ ghost（透明，悬停描边）。
背景
<script setup lang="ts">
import { ref } from 'vue';
import { CfDateRangePicker, type DateRangeValue } from '@chufix-design/vue';
const a = ref<DateRangeValue>(['2026-05-01', '2026-05-07']);
const b = ref<DateRangeValue>(['2026-05-01', '2026-05-07']);
const c = ref<DateRangeValue>(['2026-05-01', '2026-05-07']);
</script>
<template>
<div class="demo-stack">
<CfDateRangePicker v-model="a" variant="outline" />
<CfDateRangePicker v-model="b" variant="filled" />
<CfDateRangePicker v-model="c" variant="ghost" />
</div>
</template><script setup>
import { ref } from 'vue';
import { CfDateRangePicker } from '@chufix-design/vue';
const a = ref<DateRangeValue>(['2026-05-01', '2026-05-07']);
const b = ref<DateRangeValue>(['2026-05-01', '2026-05-07']);
const c = ref<DateRangeValue>(['2026-05-01', '2026-05-07']);
</script>
<template>
<div class="demo-stack">
<CfDateRangePicker v-model="a" variant="outline" />
<CfDateRangePicker v-model="b" variant="filled" />
<CfDateRangePicker v-model="c" variant="ghost" />
</div>
</template><CfDateRangePicker value={a} onChange={setA} variant="outline" />
<CfDateRangePicker value={b} onChange={setB} variant="filled" />
<CfDateRangePicker value={c} onChange={setC} 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 控制起止之间的连接词（默认「至」）。
背景
<script setup lang="ts">
import { ref } from 'vue';
import { CfDateRangePicker, type DateRangeValue } from '@chufix-design/vue';
const a = ref<DateRangeValue>([null, null]);
const b = ref<DateRangeValue>([null, null]);
</script>
<template>
<div class="demo-stack">
<CfDateRangePicker v-model="a" :placeholder="['起始日期', '结束日期']" separator="至" />
<CfDateRangePicker v-model="b" :placeholder="['Start', 'End']" separator="—" />
</div>
</template><script setup>
import { ref } from 'vue';
import { CfDateRangePicker } from '@chufix-design/vue';
const a = ref<DateRangeValue>([null, null]);
const b = ref<DateRangeValue>([null, null]);
</script>
<template>
<div class="demo-stack">
<CfDateRangePicker v-model="a" :placeholder="['起始日期', '结束日期']" separator="至" />
<CfDateRangePicker v-model="b" :placeholder="['Start', 'End']" separator="—" />
</div>
</template><CfDateRangePicker value={a} placeholder={['起始日期', '结束日期']} separator="至" />
<CfDateRangePicker value={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)）。
反馈与讨论
DateRangePicker 日期范围 的讨论