ChuFix UI v0.11.0
开发预览 更新于 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
src/App.vue 
<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>
import { useState } from 'react';
import { CfDateRangePicker } from '@chufix-design/react';

export default function Demo() {
  const [value, setValue] = useState(['2026-05-01', '2026-05-12']);
  const [value, setValue] = useState(['2026-05-01', '2026-05-12']);
  return (
    <>
      <CfDateRangePicker value={value} onChange={setValue} clearable />
    </>
  );
}
import { useState } from 'react';
import { CfDateRangePicker } from '@chufix-design/react';

export default function Demo() {
  const [value, setValue] = useState(['2026-05-01', '2026-05-12']);
  const [value, setValue] = useState(['2026-05-01', '2026-05-12']);
  return (
    <>
      <CfDateRangePicker value={value} onChange={setValue} clearable />
    </>
  );
}

范围限制 + 快捷预设

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

背景 视口
src/App.vue 
<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>
import { useState } from 'react';
import { CfDateRangePicker } from '@chufix-design/react';

export default function Demo() {
  const [value, setValue] = useState<DateRangeValue>([null, null]);
  return (
    <>
      <CfDateRangePicker value={value} onChange={setValue} min-date="2026-01-01" max-date="2026-12-31" clearable placeholder={['起始', '结束']} />
    </>
  );
}
import { useState } from 'react';
import { CfDateRangePicker } from '@chufix-design/react';

export default function Demo() {
  const [value, setValue] = useState<DateRangeValue>([null, null]);
  return (
    <>
      <CfDateRangePicker value={value} onChange={setValue} min-date="2026-01-01" max-date="2026-12-31" clearable placeholder={['起始', '结束']} />
    </>
  );
}

三种触发器 variant

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

背景 视口
src/App.vue 
<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>
import { useState } from 'react';
import { CfDateRangePicker } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState(['2026-05-01', '2026-05-07']);
  const [a, setA] = useState(['2026-05-01', '2026-05-07']);
  const [b, setB] = useState(['2026-05-01', '2026-05-07']);
  const [b, setB] = useState(['2026-05-01', '2026-05-07']);
  const [c, setC] = useState(['2026-05-01', '2026-05-07']);
  const [c, setC] = useState(['2026-05-01', '2026-05-07']);
  return (
    <>
      <CfDateRangePicker value={a} onChange={setA} variant="outline" />
      <CfDateRangePicker value={b} onChange={setB} variant="filled" />
      <CfDateRangePicker value={c} onChange={setC} variant="ghost" />
    </>
  );
}
import { useState } from 'react';
import { CfDateRangePicker } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState(['2026-05-01', '2026-05-07']);
  const [a, setA] = useState(['2026-05-01', '2026-05-07']);
  const [b, setB] = useState(['2026-05-01', '2026-05-07']);
  const [b, setB] = useState(['2026-05-01', '2026-05-07']);
  const [c, setC] = useState(['2026-05-01', '2026-05-07']);
  const [c, setC] = useState(['2026-05-01', '2026-05-07']);
  return (
    <>
      <CfDateRangePicker value={a} onChange={setA} variant="outline" />
      <CfDateRangePicker value={b} onChange={setB} variant="filled" />
      <CfDateRangePicker value={c} onChange={setC} variant="ghost" />
    </>
  );
}

三档尺寸

size 与 Input / Button / DatePicker 保持一致 —— sm / md / lg。

背景 视口
src/App.vue 
<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-09']);
const b = ref<DateRangeValue>(['2026-05-01', '2026-05-09']);
const c = ref<DateRangeValue>(['2026-05-01', '2026-05-09']);
</script>
<template>
  <div class="demo-row">
    <CfDateRangePicker v-model="a" size="sm" clearable />
    <CfDateRangePicker v-model="b" size="md" clearable />
    <CfDateRangePicker v-model="c" size="lg" clearable />
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { CfDateRangePicker } from '@chufix-design/vue';

const a = ref<DateRangeValue>(['2026-05-01', '2026-05-09']);
const b = ref<DateRangeValue>(['2026-05-01', '2026-05-09']);
const c = ref<DateRangeValue>(['2026-05-01', '2026-05-09']);
</script>
<template>
  <div class="demo-row">
    <CfDateRangePicker v-model="a" size="sm" clearable />
    <CfDateRangePicker v-model="b" size="md" clearable />
    <CfDateRangePicker v-model="c" size="lg" clearable />
  </div>
</template>
import { useState } from 'react';
import { CfDateRangePicker } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState(['2026-05-01', '2026-05-09']);
  const [a, setA] = useState(['2026-05-01', '2026-05-09']);
  const [b, setB] = useState(['2026-05-01', '2026-05-09']);
  const [b, setB] = useState(['2026-05-01', '2026-05-09']);
  const [c, setC] = useState(['2026-05-01', '2026-05-09']);
  const [c, setC] = useState(['2026-05-01', '2026-05-09']);
  return (
    <>
      <CfDateRangePicker value={a} onChange={setA} size="sm" />
      <CfDateRangePicker value={b} onChange={setB} size="md" />
      <CfDateRangePicker value={c} onChange={setC} size="lg" />
    </>
  );
}
import { useState } from 'react';
import { CfDateRangePicker } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState(['2026-05-01', '2026-05-09']);
  const [a, setA] = useState(['2026-05-01', '2026-05-09']);
  const [b, setB] = useState(['2026-05-01', '2026-05-09']);
  const [b, setB] = useState(['2026-05-01', '2026-05-09']);
  const [c, setC] = useState(['2026-05-01', '2026-05-09']);
  const [c, setC] = useState(['2026-05-01', '2026-05-09']);
  return (
    <>
      <CfDateRangePicker value={a} onChange={setA} size="sm" />
      <CfDateRangePicker value={b} onChange={setB} size="md" />
      <CfDateRangePicker value={c} onChange={setC} size="lg" />
    </>
  );
}

自定义占位 / 分隔符

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

背景 视口
src/App.vue 
<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>
import { CfDateRangePicker } from '@chufix-design/react';

export default function Demo() {
  const a = [null, null];
  const b = [null, null];
  return (
    <>
      <CfDateRangePicker value={a} placeholder={['起始日期', '结束日期']} separator="至" />
      <CfDateRangePicker value={b} placeholder={['Start', 'End']} separator="—" />
    </>
  );
}
import { CfDateRangePicker } from '@chufix-design/react';

export default function Demo() {
  const a = [null, null];
  const b = [null, null];
  return (
    <>
      <CfDateRangePicker value={a} placeholder={['起始日期', '结束日期']} separator="至" />
      <CfDateRangePicker value={b} placeholder={['Start', 'End']} separator="—" />
    </>
  );
}

API

Props

属性类型默认值说明
modelValue (Vue) / value (React)[string | null, string | null][null, null]起止日期数组
formatstring'YYYY-MM-DD'显示格式
placeholder[string, string]['开始日期', '结束日期']起止占位
separatorstring'至'起止之间的连接词
variant'outline' | 'filled' | 'ghost''outline'触发器视觉模式
size'sm' | 'md' | 'lg''md'尺寸
disabledbooleanfalse禁用
clearablebooleanfalse显示清除按钮
errorbooleanfalse错误态
minDate / maxDateDateLike—可选范围
disabledDate(date: Date) => boolean—自定义禁用规则
weekStartsOn0 | 110 = 周日开头，1 = 周一开头
namestring—透传给隐式表单字段，用于原生表单提交
idstring—触发器的 id，便于外部 <label for> 关联

Events

Vue 事件React 回调载荷类型说明
update:modelValueonChange（第一参数）[string | null, string | null]起止 ISO 字符串数组
changeonChange（第二、三参数）(start: Date | null, end: Date | null)同步触发；分别提供两端 Date 对象

React 端 onChange(value, start, end) 一次性提供三参 —— ISO 数组 + 起止 Date。

反馈与讨论

DateRangePicker 日期范围 的讨论

0
0 / 600
正在加载评论...