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

TimePicker 时间选择器

触发器 + 三列滚动面板的时间选择器，支持时分秒，可配 DatePicker 用于"日期 + 时间"场景。

基础用法

v-model / value 是字符串，格式 HH:mm 或 HH:mm:ss（开启 showSeconds 时）。clearable 显示清除按钮。

背景

时（HH:mm）

含秒（HH:mm:ss）

已选：09:30 / (无)

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

const t1 = ref<string | null>('09:30');
const t2 = ref<string | null>(null);
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">时（HH:mm）</div>
      <CfTimePicker v-model="t1" clearable />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">含秒（HH:mm:ss）</div>
      <CfTimePicker v-model="t2" show-seconds clearable />
    </div>
    <span style="font-size: 12px; color: var(--fg-3);">已选：<code>{{ t1 ?? '(无)' }}</code> / <code>{{ t2 ?? '(无)' }}</code></span>
  </div>
</template>

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

const t1 = ref<string | null>('09:30');
const t2 = ref<string | null>(null);
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap;">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">时（HH:mm）</div>
      <CfTimePicker v-model="t1" clearable />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">含秒（HH:mm:ss）</div>
      <CfTimePicker v-model="t2" show-seconds clearable />
    </div>
    <span style="font-size: 12px; color: var(--fg-3);">已选：<code>{{ t1 ?? '(无)' }}</code> / <code>{{ t2 ?? '(无)' }}</code></span>
  </div>
</template>

<CfTimePicker value={t1} onChange={setT1} clearable />
<CfTimePicker value={t2} onChange={setT2} showSeconds clearable />

<CfTimePicker value={t1} onChange={setT1} clearable />
<CfTimePicker value={t2} onChange={setT2} showSeconds clearable />

API

属性	类型	默认值	说明
`value` / `modelValue`	`string \| null`	`—`	受控值，格式 `HH:mm` 或 `HH:mm:ss`
`defaultValue`	`string \| null`	`null`	非受控初始值
`placeholder`	`string`	`'请选择时间'`	未选中时占位文案
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	触发器尺寸
`disabled`	`boolean`	`false`	禁用
`clearable`	`boolean`	`false`	显示清除按钮
`showSeconds`	`boolean`	`false`	显示秒列，输出格式变为 `HH:mm:ss`

事件：onChange(value) —— 时间变化时触发。