ChuFix UI v0.11.0
开发预览 更新于 2026-05-10

TimePicker 时间选择器

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

基础用法

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

背景 视口
时（HH:mm）
含秒（HH:mm:ss）
已选：09:30 / (无)
src/App.vue 
<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>
import { useState } from 'react';
import { CfTimePicker } from '@chufix-design/react';

export default function Demo() {
  const [t1, setT1] = useState('09:30');
  const [t1, setT1] = useState('09:30');
  const [t2, setT2] = useState(null);
  const [t2, setT2] = useState(null);
  return (
    <>
      <CfTimePicker value={t1} onChange={setT1} clearable />
      <CfTimePicker value={t2} onChange={setT2} showSeconds clearable />
    </>
  );
}
import { useState } from 'react';
import { CfTimePicker } from '@chufix-design/react';

export default function Demo() {
  const [t1, setT1] = useState('09:30');
  const [t1, setT1] = useState('09:30');
  const [t2, setT2] = useState(null);
  const [t2, setT2] = useState(null);
  return (
    <>
      <CfTimePicker value={t1} onChange={setT1} clearable />
      <CfTimePicker value={t2} onChange={setT2} showSeconds clearable />
    </>
  );
}

三档尺寸

size 与 Input、DatePicker 保持一致 —— sm 紧凑（表格内嵌选择常用）/ md 默认 / lg 强调。

背景 视口
src/App.vue 
<script setup lang="ts">
import { ref } from 'vue';
import { CfTimePicker } from '@chufix-design/vue';

const a = ref<string | null>('09:30');
const b = ref<string | null>('09:30');
const c = ref<string | null>('09:30');
</script>
<template>
  <div class="demo-row">
    <CfTimePicker v-model="a" size="sm" clearable />
    <CfTimePicker v-model="b" size="md" clearable />
    <CfTimePicker v-model="c" size="lg" clearable />
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { CfTimePicker } from '@chufix-design/vue';

const a = ref<string | null>('09:30');
const b = ref<string | null>('09:30');
const c = ref<string | null>('09:30');
</script>
<template>
  <div class="demo-row">
    <CfTimePicker v-model="a" size="sm" clearable />
    <CfTimePicker v-model="b" size="md" clearable />
    <CfTimePicker v-model="c" size="lg" clearable />
  </div>
</template>
import { useState } from 'react';
import { CfTimePicker } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState('09:30');
  const [a, setA] = useState('09:30');
  const [b, setB] = useState('09:30');
  const [b, setB] = useState('09:30');
  const [c, setC] = useState('09:30');
  const [c, setC] = useState('09:30');
  return (
    <>
      <CfTimePicker value={a} onChange={setA} size="sm" />
      <CfTimePicker value={b} onChange={setB} size="md" />
      <CfTimePicker value={c} onChange={setC} size="lg" />
    </>
  );
}
import { useState } from 'react';
import { CfTimePicker } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState('09:30');
  const [a, setA] = useState('09:30');
  const [b, setB] = useState('09:30');
  const [b, setB] = useState('09:30');
  const [c, setC] = useState('09:30');
  const [c, setC] = useState('09:30');
  return (
    <>
      <CfTimePicker value={a} onChange={setA} size="sm" />
      <CfTimePicker value={b} onChange={setB} size="md" />
      <CfTimePicker value={c} onChange={setC} size="lg" />
    </>
  );
}

禁用状态

disabled 让触发器变灰且不响应点击；已选中的值仍然展示。

背景 视口
src/App.vue 
<script setup lang="ts">
import { ref } from 'vue';
import { CfTimePicker } from '@chufix-design/vue';

const a = ref<string | null>('14:30');
const b = ref<string | null>(null);
</script>
<template>
  <div class="demo-row">
    <CfTimePicker v-model="a" disabled />
    <CfTimePicker v-model="b" placeholder="无值" disabled />
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { CfTimePicker } from '@chufix-design/vue';

const a = ref<string | null>('14:30');
const b = ref<string | null>(null);
</script>
<template>
  <div class="demo-row">
    <CfTimePicker v-model="a" disabled />
    <CfTimePicker v-model="b" placeholder="无值" disabled />
  </div>
</template>
import { useState } from 'react';
import { CfTimePicker } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState('14:30');
  const [a, setA] = useState('14:30');
  const [b, setB] = useState(null);
  const [b, setB] = useState(null);
  return (
    <>
      <CfTimePicker value={a} onChange={setA} disabled />
      <CfTimePicker value={b} onChange={setB} placeholder="无值" disabled />
    </>
  );
}
import { useState } from 'react';
import { CfTimePicker } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState('14:30');
  const [a, setA] = useState('14:30');
  const [b, setB] = useState(null);
  const [b, setB] = useState(null);
  return (
    <>
      <CfTimePicker value={a} onChange={setA} disabled />
      <CfTimePicker value={b} onChange={setB} placeholder="无值" disabled />
    </>
  );
}

与 DatePicker 组合 (日期 + 时间)

TimePicker 不内置”日期 + 时间”二合一控件 —— 推荐做法是两个组件并排，在父组件里把 date 与 time 字符串拼成最终值。

背景 视口
→ 2026-05-09 14:30
src/App.vue 
<script setup lang="ts">
import { computed, ref } from 'vue';
import { CfDatePicker, CfTimePicker } from '@chufix-design/vue';

const date = ref<string | null>('2026-05-09');
const time = ref<string | null>('14:30');

const combined = computed<string>(() => {
  if (!date.value) return '—';
  return `${date.value}${time.value ? ` ${time.value}` : ''}`;
});
</script>
<template>
  <div class="demo-row">
    <CfDatePicker v-model="date" clearable />
    <CfTimePicker v-model="time" show-seconds clearable />
    <span class="adm-out">→ <code>{{ combined }}</code></span>
  </div>
</template>
<style scoped>
.adm-out { color: var(--fg-3); font-size: var(--t-12); align-self: center; }
code { font-family: var(--font-mono); color: var(--fg-2); }
</style>
<script setup>
import { computed, ref } from 'vue';
import { CfDatePicker, CfTimePicker } from '@chufix-design/vue';

const date = ref<string | null>('2026-05-09');
const time = ref<string | null>('14:30');

const combined = computed<string>(() => {
  if (!date.value) return '—';
  return `${date.value}${time.value ? ` ${time.value}` : ''}`;
});
</script>
<template>
  <div class="demo-row">
    <CfDatePicker v-model="date" clearable />
    <CfTimePicker v-model="time" show-seconds clearable />
    <span class="adm-out">→ <code>{{ combined }}</code></span>
  </div>
</template>
<style scoped>
.adm-out { color: var(--fg-3); font-size: var(--t-12); align-self: center; }
code { font-family: var(--font-mono); color: var(--fg-2); }
</style>
import { useState } from 'react';
import { CfDatePicker, CfTimePicker } from '@chufix-design/react';

export default function Demo() {
  const [date, setDate] = useState('2026-05-09');
  const [date, setDate] = useState('2026-05-09');
  const [time, setTime] = useState('14:30');
  const [time, setTime] = useState('14:30');
  const [date, setDate] = useState('2026-05-09');
  const [time, setTime] = useState('14:30');
  const combined = date && `${date}${time ? ' ' + time : ''}`;
  return (
    <>
      <CfDatePicker value={date} onChange={setDate} />
      <CfTimePicker value={time} onChange={setTime} showSeconds />
    </>
  );
}
import { useState } from 'react';
import { CfDatePicker, CfTimePicker } from '@chufix-design/react';

export default function Demo() {
  const [date, setDate] = useState('2026-05-09');
  const [date, setDate] = useState('2026-05-09');
  const [time, setTime] = useState('14:30');
  const [time, setTime] = useState('14:30');
  const [date, setDate] = useState('2026-05-09');
  const [time, setTime] = useState('14:30');
  const combined = date && `${date}${time ? ' ' + time : ''}`;
  return (
    <>
      <CfDatePicker value={date} onChange={setDate} />
      <CfTimePicker value={time} onChange={setTime} showSeconds />
    </>
  );
}

API

Props

属性类型默认值说明
modelValue (Vue) / value (React)string | null—受控值，格式 HH:mm 或 HH:mm:ss
defaultValuestring | nullnull非受控初始值
placeholderstring'请选择时间'未选中时占位文案
size'sm' | 'md' | 'lg''md'触发器尺寸
disabledbooleanfalse禁用
clearablebooleanfalse显示清除按钮
showSecondsbooleanfalse显示秒列，输出格式变为 HH:mm:ss
classNamestring—透传到根元素的额外类名

Events

Vue 事件React 回调载荷类型说明
update:modelValueonChangestring | null时间变化时触发；载荷是 HH:mm 或 HH:mm:ss 字符串，清空时为 null
changeonChangestring | null与 update:modelValue 同步触发，载荷相同

反馈与讨论

TimePicker 时间选择器 的讨论

0
0 / 600
正在加载评论...