跳到主要内容
前端术语库

UI 组件 · 表单输入

时间选择器

Time Picker

也叫：时间选择框、时间输入框、时分选择、TimePicker、Time Input、Time Select

选一个具体时刻（几点几分）的输入控件，点开后在「时 / 分」几列里滚动选择，或者从一列按固定间隔排好的时刻里挑。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

在「预约会议室」表单里做一个开始时间选择器：输入框宽 120px、高 36px，右侧带时钟图标，占位文字「选择时间」，也可以直接输入 14:30。点击后在输入框下方弹出面板，分「时」「分」两列，各自可以滚动，小时只显示 08~20，分钟按 15 分钟一档（00、15、30、45）；选中项用深色背景，已被预约的时段置灰不可点。面板底部放「此刻」和「确定」两个按钮，按 Esc 或点面板外面关闭。再做一个结束时间，结束时间早于开始时间时标红，提示「结束时间要晚于开始时间」。

发给

01判断

你的内容是这样吗？

对照两列，确认时间选择器是不是你要找的。

符合这些情况，用时间选择器

  • 需要用户填一个具体时刻，例如会议开始时间、提醒时间、每天的推送时间
  • 设置营业时间、值班时间这类「从几点到几点」的时间段
  • 预约类场景，只能在固定间隔（整点、半点）的时刻里挑

是这些情况，换成别的

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    分钟列从 00 一直列到 59，用户要在 60 个数字里一格格滚，还容易选出 14:07 这种没人要的时间

  2. 02

    已经约满或不营业的时段照样能选，提交以后才报错

  3. 03

    选时间段时结束时间可以早于开始时间，也没有任何提示

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由带时钟图标的输入框和弹出的时间面板组成；面板里是「时 / 分（/ 秒）」几列滚动列表，或者一列按固定间隔排列的时刻，底部可带「此刻」和「确定」按钮。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一个带小时钟图标的输入框，里面是 14:30 这样的时刻
  2. 2点开后下方弹出并排的两三列数字，分别是时、分、秒，选中的一行高亮
  3. 3有时是一列按间隔排好的时刻（09:00、09:30、10:00），其中几项置灰

04解释

详细解释

时间选择器用来填「几点几分」：会议开始时间、营业时间、提醒时间、预约时段。常见样子是一个带时钟图标的输入框，点开后弹出两三列可以滚动的数字（时、分，有时还有秒或上午 / 下午），选好后回填成 14:30 这样的格式，也可以直接在框里敲数字。另一种写法是只列出一列按 15 分钟或 30 分钟排好的固定时刻，适合只能约整点、半点的场景。

它和 日期选择器 是一对：日期选择器选哪一天，时间选择器选这一天里的哪个时刻。两个都要选时（例如「9 月 18 日 14:30」），可以用带时间的日期选择器，也可以并排放一个日期框和一个时间框。它也不是 下拉选择：下拉选择从几个写死的选项里挑，时间选择器的选项是按规律生成的时刻，还能手动输入。

用之前先想清楚精度和范围：大多数场景精确到分钟、按 5 或 15 分钟一档就够了，不要让用户在 0~59 分里一格格滚。营业时间外、已被占用的时段要置灰不可选；选时间段（开始—结束）时，结束时间不能早于开始时间。24 小时制还是 12 小时制跟随地区和语言，跨时区的产品要写明是哪个时区。

开发者信息
术语 ID
component-time-picker
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • input[type="time"]
  • .ant-picker-time-panel
  • .ant-picker-dropdown:has(.ant-picker-time-panel):not(:has(.ant-picker-date-panel))
  • .ant-picker:has(input[placeholder*="时间"])
  • .ant-picker:has(input[placeholder*="time" i])
  • .el-date-editor--time
  • .el-date-editor--timerange
  • .el-date-editor--time-select
  • .el-time-panel
  • .el-time-range-picker
  • [class*="MuiTimeClock-root"]
  • [class*="MuiDigitalClock-root"]
  • [class*="MuiMultiSectionDigitalClock-root"]
  • .arco-timepicker
  • .t-time-picker
  • .t-time-range-picker
  • .t-time-picker__panel
  • .n-time-picker
  • .n-time-picker-panel
  • .van-time-picker
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • time-picker
  • timepicker
  • time-select
  • time-selector
  • time-input
  • time-range-picker
  • time-panel
  • time-spinner
  • clock-picker
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • TimePicker
  • TimeSelect
  • TimeInput
  • TimeRangePicker
  • TimeField
  • DigitalClock
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 含输入控件
优先级
3 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30