TimePicker 时间选择器

底部弹层式时间滚轮选择器，对齐 TDesign 时间场景，支持时分、时分秒、范围限制与步长设置

底部弹层式时间滚轮选择器，支持时分、时分秒、范围限制与步长设置

演示

9:41

代码示例

<!-- 时分秒选择器 -->
  <re-cell class="demo-second-cell" title="选择时间" :note="secondText" :arrow="true" @click="openSecondPicker" />
  <re-time-picker class="demo-second-picker" title="选择时间" mode="second" :value="secondValue" :visible="secondVisible" @update:visible="secondVisible = $event" @confirm="onSecondConfirm" />

<!-- 时分选择器 -->
  <re-cell class="demo-minute-cell" title="选择时间" :note="minuteText" :arrow="true" @click="openMinutePicker" />
  <re-time-picker class="demo-minute-picker" title="选择时间" mode="minute" start="2026-07-03 08:30:00" :value="minuteValue" :visible="minuteVisible" @update:visible="minuteVisible = $event" @confirm="onMinuteConfirm" />

<!-- 5 分钟步长 -->
  <re-cell class="demo-step-cell" title="选择时间" :note="stepText" :arrow="true" @click="openStepPicker" />
  <re-time-picker class="demo-step-picker" title="选择时间" mode="second" :steps="stepConfig" :value="stepValue" :visible="stepVisible" @update:visible="stepVisible = $event" @confirm="onStepConfirm" />

<!-- 范围限制 -->
  <re-cell class="demo-range-cell" title="营业时间" :note="rangeText" :arrow="true" @click="openRangePicker" />
  <re-time-picker class="demo-range-picker" title="营业时间" mode="minute" start="09:30:00" end="18:00:00" :value="rangeValue" :visible="rangeVisible" @update:visible="rangeVisible = $event" @confirm="onRangeConfirm" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-time-picker />。

API

TimePicker Props

名称	类型	默认值	描述	必传
value	`string \| number`	''	当前值	N
visible	`boolean`	false	-	N
title	`string`	'选择时间'	标题	N
mode	`string`	'second'	-	N
start	`string \| number`	''	-	N
end	`string \| number`	''	-	N
format	`string`	''	-	N
header	`boolean`	true	-	N
cancelBtn	`string`	'取消'	-	N
confirmBtn	`string`	'确定'	-	N
steps	`TimeSteps`	{} as TimeSteps	-	N
closeOnOverlayClick	`boolean`	true	-	N
showOverlay	`boolean`	true	-	N
zIndex	`number`	11500	层级	N
itemHeight	`number`	40	-	N
visibleItemCount	`number`	5	-	N
customStyle	`string`	''	自定义样式	N

TimePicker Events

名称	参数	描述
pick	value: string	-
change	value: string	值变化时触发
confirm	value: string	确认时触发
cancel	-	取消时触发
close	trigger: TriggerSource	关闭时触发
update:visible	value: boolean	显隐变化时触发

TimePicker Slots

名称	描述
-	-

Textarea 多行文本框

多行文本输入，支持自适应高度、字数统计和最大长度限制

TimeSelect 时间选择

时间段选择器，左侧选择日期，右侧选择可用时间段

内容锚点

演示
代码示例
引入
API