Preview Updated 2026-05-10

Date range picker

Side-by-side two-month panel; two clicks confirm the range. Supports hover preview, min/max/disabledDate, and last 7/30/90 day presets.

Basic usage

v-model binds a [start, end] tuple where each element is a 'YYYY-MM-DD' string or null. The first click sets the start; hovering over the target day previews a highlight, and a second click confirms the end. If the second click is earlier than the first, they are swapped automatically.

背景

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(ref<DateRangeValue>(['2026-05-01', '2026-05-12']));
  return (
    <>
      <CfDateRangePicker value={value} onChange={setValue} clearable />
    </>
  );
}

Bounds and quick presets

minDate / maxDate work like in DatePicker; disabledDate is also supported. The panel includes built-in “last 7 / 30 / 90 days” shortcut buttons at the bottom — clicking one applies the range and closes the panel.

背景

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(ref<DateRangeValue>([null, null]));
  return (
    <>
      <CfDateRangePicker
      value={value}
      minDate="2026-01-01"
      maxDate="2026-12-31"
      clearable
      placeholder={['Start', 'End']}
      onChange={(v) => setValue(v)}
      />
    </>
  );
}

Three trigger variants

variant controls the trigger input’s visual style — outline (default, with border), filled (solid), or ghost (transparent, border on hover).

背景

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(ref<DateRangeValue>(['2026-05-01', '2026-05-07']));
  const [b, setB] = useState(ref<DateRangeValue>(['2026-05-01', '2026-05-07']));
  const [c, setC] = useState(ref<DateRangeValue>(['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" />
    </>
  );
}

Custom placeholder and separator

placeholder is a [startPlaceholder, endPlaceholder] tuple. separator controls the connector word between start and end (default “to”).

背景

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 = ref<DateRangeValue>([null, null]);
  const b = ref<DateRangeValue>([null, null]);
  return (
    <>
      <CfDateRangePicker value={a} placeholder={['Start date', 'End date']} separator="to" />
      <CfDateRangePicker value={b} placeholder={['Start', 'End']} separator="—" />
    </>
  );
}

API

Prop	Type	Default	Description
`modelValue` (Vue) / `value` (React)	`[string \| null, string \| null]`	`[null, null]`	Start/end date tuple
`format`	`string`	`'YYYY-MM-DD'`	Display format
`placeholder`	`[string, string]`	`['Start date', 'End date']`	Start/end placeholders
`separator`	`string`	`'to'`	Connector word between start and end
`variant`	`'outline' \| 'filled' \| 'ghost'`	`'outline'`	Trigger visual variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size
`disabled`	`boolean`	`false`	Disabled
`clearable`	`boolean`	`false`	Show clear button
`error`	`boolean`	`false`	Error state
`minDate` / `maxDate`	`DateLike`	`—`	Selectable range
`disabledDate`	`(date: Date) => boolean`	`—`	Custom disable rule
`weekStartsOn`	`0 \| 1`	`1`	0 = Sunday-first, 1 = Monday-first

Events: update:modelValue / change(start, end) (React: onChange(value, start, end)).