开发预览更新于 2026-05-10

TimeRangePicker 时间范围

两个 TimePicker 组合，选择「开始 – 结束」时间区间。

基础用法

v-model / value 是 [string, string] | null，每一项是 HH:mm 或 HH:mm:ss（开启 showSeconds）。

背景

–

已选：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>

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

API

属性	类型	默认值	说明
`value` / `modelValue`	`[string \| null, string \| null] \| null`	`—`	受控范围值
`defaultValue`	`[string \| null, string \| null] \| null`	`null`	非受控初始值
`placeholder`	`[string, string]`	`['开始时间', '结束时间']`	两端占位
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	触发器尺寸
`disabled`	`boolean`	`false`	整组禁用
`clearable`	`boolean`	`false`	显示清除按钮
`showSeconds`	`boolean`	`false`	显示秒列
`separator`	`string`	`'–'`	中间分隔符

事件：onChange(value) 当任一端变化时触发。