Preview Updated 2026-05-10

Date picker

Input + month-grid panel — day/month/year views, date bounds, quick presets, ISO week numbers, keyboard navigation.

Basic usage

v-model binds a 'YYYY-MM-DD' string. Clicking the trigger opens the month panel; clicking a day cell selects it and closes the panel. Clicking the month name jumps to the month view; clicking the year jumps to the year view.

背景

2026-05-09

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfDatePicker } from '@chufix-design/vue';

const value = ref<string | null>('2026-05-09');
</script>
<template>
  <div style="display: flex; gap: 12px; align-items: center;">
    <CfDatePicker v-model="value" clearable />
    <code style="font-size: 12px;">{{ value ?? '(无)' }}</code>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfDatePicker } from '@chufix-design/vue';

const value = ref<string | null>('2026-05-09');
</script>
<template>
  <div style="display: flex; gap: 12px; align-items: center;">
    <CfDatePicker v-model="value" clearable />
    <code style="font-size: 12px;">{{ value ?? '(无)' }}</code>
  </div>
</template>

import { useState } from 'react';
import { CfDatePicker } from '@chufix-design/react';

export default function Demo() {
const [value, setValue] = useState<string | null>('2026-05-09');
return <CfDatePicker value={value} clearable onChange={(v) => setValue(v)} />;
}

import { useState } from 'react';
import { CfDatePicker } from '@chufix-design/react';

export default function Demo() {
const [value, setValue] = useState<string | null>('2026-05-09');
return <CfDatePicker value={value} clearable onChange={(v) => setValue(v)} />;
}

Bounds and disabledDate

minDate / maxDate constrain the selectable range. disabledDate is a (date: Date) => boolean callback; dates that return true are struck through and cannot be clicked.

背景

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfDatePicker } from '@chufix-design/vue';

const value = ref<string | null>(null);

function noWeekends(d: Date) {
  const day = d.getDay();
  return day === 0 || day === 6;
}
</script>
<template>
  <CfDatePicker
    v-model="value"
    placeholder="工作日，2026 全年"
    min-date="2026-01-01"
    max-date="2026-12-31"
    :disabled-date="noWeekends"
    clearable
  />
</template>

<script setup>
import { ref } from 'vue';
import { CfDatePicker } from '@chufix-design/vue';

const value = ref<string | null>(null);

function noWeekends(d) {
  const day = d.getDay();
  return day === 0 || day === 6;
}
</script>
<template>
  <CfDatePicker
    v-model="value"
    placeholder="工作日，2026 全年"
    min-date="2026-01-01"
    max-date="2026-12-31"
    :disabled-date="noWeekends"
    clearable
  />
</template>

import { useState } from 'react';
import { CfDatePicker } from '@chufix-design/react';

const noWeekends = (d: Date) => d.getDay() === 0 || d.getDay() === 6;

export default function Demo() {
const [value, setValue] = useState<string | null>(null);
return (
  <CfDatePicker
    value={value}
    minDate="2026-01-01"
    maxDate="2026-12-31"
    disabledDate={noWeekends}
    clearable
    onChange={(v) => setValue(v)}
  />
);
}

import { useState } from 'react';
import { CfDatePicker } from '@chufix-design/react';

const noWeekends = (d) => d.getDay() === 0 || d.getDay() === 6;

export default function Demo() {
const [value, setValue] = useState<string | null>(null);
return (
  <CfDatePicker
    value={value}
    minDate="2026-01-01"
    maxDate="2026-12-31"
    disabledDate={noWeekends}
    clearable
    onChange={(v) => setValue(v)}
  />
);
}

Display format

format controls how the date is rendered in the trigger (it does not affect the v-model storage format, which is always 'YYYY-MM-DD'). Supported tokens: YYYY YY MM M DD D.

背景

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfDatePicker } from '@chufix-design/vue';

const a = ref<string | null>('2026-05-09');
const b = ref<string | null>('2026-05-09');
const c = ref<string | null>('2026-05-09');
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 8px; max-width: 320px;">
    <CfDatePicker v-model="a" format="YYYY-MM-DD" />
    <CfDatePicker v-model="b" format="YYYY 年 M 月 D 日" />
    <CfDatePicker v-model="c" format="DD/MM/YYYY" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfDatePicker } from '@chufix-design/vue';

const a = ref<string | null>('2026-05-09');
const b = ref<string | null>('2026-05-09');
const c = ref<string | null>('2026-05-09');
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 8px; max-width: 320px;">
    <CfDatePicker v-model="a" format="YYYY-MM-DD" />
    <CfDatePicker v-model="b" format="YYYY 年 M 月 D 日" />
    <CfDatePicker v-model="c" format="DD/MM/YYYY" />
  </div>
</template>

import { useState } from 'react';
import { CfDatePicker } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState(ref<string | null>('2026-05-09'));
  const [b, setB] = useState(ref<string | null>('2026-05-09'));
  const [c, setC] = useState(ref<string | null>('2026-05-09'));
  return (
    <>
      <CfDatePicker value={a} format="YYYY-MM-DD" onChange={(v) => setA(v)} />
      <CfDatePicker value={b} format="YYYY 年 M 月 D 日" onChange={(v) => setB(v)} />
      <CfDatePicker value={c} format="DD/MM/YYYY" onChange={(v) => setC(v)} />
    </>
  );
}

Quick presets

presets accepts an array of { label, value }. The panel renders these as a left-side column. value may be a fixed Date / ISO string, or a function that returns one (re-evaluated on each click — perfect for relative dates like “Today” / “7 days ago”).

背景

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfDatePicker, type DatePickerPreset } from '@chufix-design/vue';

const value = ref<string | null>(null);

const presets: DatePickerPreset[] = [
  { label: '今天', value: () => new Date() },
  {
    label: '昨天',
    value: () => {
      const d = new Date();
      d.setDate(d.getDate() - 1);
      return d;
    },
  },
  {
    label: '7 天前',
    value: () => {
      const d = new Date();
      d.setDate(d.getDate() - 7);
      return d;
    },
  },
  {
    label: '本月 1 号',
    value: () => {
      const d = new Date();
      return new Date(d.getFullYear(), d.getMonth(), 1);
    },
  },
  {
    label: '上月 1 号',
    value: () => {
      const d = new Date();
      return new Date(d.getFullYear(), d.getMonth() - 1, 1);
    },
  },
];
</script>
<template>
  <CfDatePicker v-model="value" clearable :presets="presets" />
</template>

<script setup>
import { ref } from 'vue';
import { CfDatePicker } from '@chufix-design/vue';

const value = ref<string | null>(null);

const presets= [
  { label: '今天', value: () => new Date() },
  {
    label: '昨天',
    value: () => {
      const d = new Date();
      d.setDate(d.getDate() - 1);
      return d;
    },
  },
  {
    label: '7 天前',
    value: () => {
      const d = new Date();
      d.setDate(d.getDate() - 7);
      return d;
    },
  },
  {
    label: '本月 1 号',
    value: () => {
      const d = new Date();
      return new Date(d.getFullYear(), d.getMonth(), 1);
    },
  },
  {
    label: '上月 1 号',
    value: () => {
      const d = new Date();
      return new Date(d.getFullYear(), d.getMonth() - 1, 1);
    },
  },
];
</script>
<template>
  <CfDatePicker v-model="value" clearable :presets="presets" />
</template>

ISO week numbers

show-week-number adds a leading column of ISO 8601 week numbers (Monday-based) to the date grid.

背景

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfDatePicker } from '@chufix-design/vue';

const value = ref<string | null>(null);
</script>
<template>
  <CfDatePicker v-model="value" clearable show-week-number />
</template>

<script setup>
import { ref } from 'vue';
import { CfDatePicker } from '@chufix-design/vue';

const value = ref<string | null>(null);
</script>
<template>
  <CfDatePicker v-model="value" clearable show-week-number />
</template>

When the panel is open:

Key	Action
`← / → / ↑ / ↓`	Move focus across the grid
`PageUp` / `PageDown`	Previous / next month
`Home` / `End`	Jump to start / end of month
`Enter`	Pick the focused day
`Esc`	Close the panel

API

Prop	Type	Default	Description
`modelValue` (Vue) / `value` (React)	`Date \| string \| number \| null`	`null`	Current date; accepts ISO / timestamp / Date as input
`format`	`string`	`'YYYY-MM-DD'`	Trigger display format
`placeholder`	`string`	`'Select a date'`	Placeholder text
`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
`view`	`'day' \| 'month' \| 'year'`	`'day'`	Initial open view
`showWeekNumber`	`boolean`	`false`	Add ISO week-number column before the day grid
`presets`	`DatePickerPreset[]`	—	Quick-pick buttons: `{ label, value: Date \| string \| () => ... }`

Events: update:modelValue / change (React: onChange(value, date), the second argument is Date \| null).

Date picker

Basic usage

Bounds and disabledDate

Display format

Quick presets

ISO week numbers

Keyboard navigation

API

Date picker · Discussion