Preview Updated 2026-05-10

Time range picker

Two TimePickers paired up to select a "start – end" time range.

Basic usage

v-model / value is [string, string] | null; each entry is HH:mm or HH:mm:ss (when showSeconds is on).

背景

–

已选：09:00 – 18:00

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

const range = ref<TimeRangeValue>(['09:00', '18:00']);
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
    <CfTimeRangePicker v-model="range" clearable />
    <span style="font-size: 12px; color: var(--fg-3);">
      已选：<code>{{ range ? `${range[0] ?? '?'} – ${range[1] ?? '?'}` : '(无)' }}</code>
    </span>
  </div>
</template>

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

const range = ref<TimeRangeValue>(['09:00', '18:00']);
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
    <CfTimeRangePicker v-model="range" clearable />
    <span style="font-size: 12px; color: var(--fg-3);">
      已选：<code>{{ range ? `${range[0] ?? '?'} – ${range[1] ?? '?'}` : '(无)' }}</code>
    </span>
  </div>
</template>

<CfTimeRangePicker value={range} onChange={setRange} clearable />

<CfTimeRangePicker value={range} onChange={setRange} clearable />

API

Prop	Type	Default	Description
`value` / `modelValue`	`[string \| null, string \| null] \| null`	`—`	Controlled range value
`defaultValue`	`[string \| null, string \| null] \| null`	`null`	Uncontrolled initial value
`placeholder`	`[string, string]`	`['Start time', 'End time']`	Placeholders for both ends
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Trigger size
`disabled`	`boolean`	`false`	Disable the whole group
`clearable`	`boolean`	`false`	Show clear button
`showSeconds`	`boolean`	`false`	Show seconds column
`separator`	`string`	`'–'`	Separator between values

Events: onChange(value) fires whenever either end changes.