---
title: 时间选择
slug: 时间选择
category: 组件
figma_node_id: 1:20
figma_page_name: ＞时间选择
aliases: [TimePicker, 时间选择器, 时分选择, 小时选择]
last_extracted: 2026-05-19
status: ok
---

# 时间选择

> 用于选择时 / 时分两种颗粒度的时间输入组件。由触发器（时间选择框）和下拉列表（小时列表 / 时-分双列列表）组合而成，覆盖默认 / 悬浮 / 已选 / 已选悬停四种状态。支持时颗粒度（仅小时）与时分颗粒度（小时 + 分钟双列）两种使用方式。

## 类型与号型

页面分四大章节（来自 Figma 章节标题）：

| 章节 | 内容 |
|---|---|
| 时间选择框 | 触发器形态 |
| 下拉列表 | 下拉列表-小时 / 下拉列表-时、分 |
| 组合以及交互 | 触发器 + 下拉的完整交互 |
| 标注 | 设计标注 / 规格 |

### 颗粒度

- **时颗粒度**：仅选择小时（component `时间选择控件/小时` = `33:4273`）
- **时分颗粒度**：选择小时 + 分钟（component `下拉列表/时-分` = `35:12080`）

### 来源 Component

| componentId | 名称 |
|---|---|
| `33:4273` | 时间选择控件/小时 |
| `35:12080` | 下拉列表/时-分 |
| `35:12107` | 下拉列表/小时 |

> 支持时、时分使用不同颗粒度的选择。

## 尺寸规格

桌面端规范画板：1280 × 3923px。

| 规格 | 数值 | 来源 |
|---|---|---|
| 时间选择控件触发器 | 160 × 32px | `layout_T3HTZ0 等所有 INSTANCE 33:4273` |
| 下拉列表-小时（单列） | 160 × 328px / 70 × 328px（窄变体） | `layout_IQIWJ6` / `layout_WF7JC1` |
| 下拉列表-时·分（双列） | 158 × 373px / 99 × 373px（窄变体） | `layout_Y4VK9W` / `layout_WW14LU` |
| 选项行高度 | 32px | `layout_NA12O6 等` |
| 圆角 | 4px | `borderRadius: 4px` |
| 弹窗投影 | `0px 2px 20px 0px rgba(17, 20, 26, 0.16)` | 全局 `弹窗投影` token |
| 章节大标题 | 24px Semibold | `style_9JJGTQ`，色 `#1C1D1F` |
| 列表小标题 | 16px Semibold | `style_6B0QOG` |
| 状态标签 | 12px Regular 18px 行高 | `style_JDY2TA` |
| 适用说明 | 16px Regular | `style_OPUXCR`，色 `#878D99` |

## 状态

时间选择控件 `33:4273` 的状态枚举（来自 Figma 文字标签）：

| 状态 | 含义 |
|---|---|
| 默认状态 | 未聚焦、未选中的常态 |
| 悬浮状态 | 鼠标悬停 |
| 已选状态 | 已选中某时间，触发器显示已选值 |
| 已选悬停状态 | 已选中后再次悬停 |
| 悬浮状态&点击状态 | 同时态（鼠标悬停且按下） |

下拉列表两种形态：

- 下拉列表-小时：单列滚动 24 项
- 下拉列表-时、分：双列（小时列 + 分钟列）

## 颜色与 token

| 用途 | hex | token / 说明 |
|---|---|---|
| 容器底色 | `#FFFFFF` = `fill_TM3G16` | 触发器 / 弹层底色 |
| 章节大标题文字 | `#1C1D1F` = `fill_ABHDNN` | 24px Semibold |
| 主文字色 | `#11141A` = `fill_YBM9Q8` | 已选项、状态标签 |
| 副文字 / 说明 | `#878D99` = `fill_JBTH4U` = `C-Coolgray60` | 16px Regular 适用说明 |
| 浅灰底（标注区） | `#F7F8FA` = `fill_AEDEPA` = `C-Coolgray20` | 标注区底色 |
| 警示色 / 标注线 | `#FF0015` = `fill_FBIR66`（opacity 0.16） | 设计标注矩形 |
| 弹窗投影 | `0px 2px 20px 0px rgba(17,20,26,0.16)` | 全局 `弹窗投影` token |
| 渐变 Union 装饰 | `linear-gradient(-64deg, rgba(51,119,255,0) 0%, rgba(51,119,255,0.06) 100%)` | 设计说明区背景 |

> 关联 token 见 [色彩](../基础/色彩.md)。

## 间距与排布

- 设计说明区左内边距：160px
- 下拉列表的最大高度：373px（双列）/ 328px（单列）
- 弹窗与时间控件之间存在「弹窗与时间控件间距」（设计标注，参见示例）
- 最长宽度不限制，根据 U 布局内容定（与 [日期选择](日期选择.md) 一致）
- 双列时分布局：158px / 双列均 79px

### 宽度规则

> 最短宽度 / 预置时间最短宽度 / 宽度最大跟随输入框 / 最长宽度不限制，根据 U 布局内容定。

- 最短宽度：保证基本可读
- 预置时间最短宽度：预置选项至少容纳「14:30」类时间
- 宽度最大跟随输入框：弹层宽度上限 = 触发器输入框宽度
- 最长宽度不限制：极端长内容根据 U 布局自适应

## 文案规则

- 触发器 placeholder：业务定义（如「请选择时间」）
- 选项格式：24 小时制（如 `00`、`01`、…、`23`）或带分钟（如 `14:30`）
- 状态标签直接展示语义词：默认 / 悬浮 / 已选 / 已选悬停

## 交互行为

- **触发器点击**：弹出对应颗粒度的下拉列表（时 = 单列；时分 = 双列）
- **小时 hover**：行高亮，鼠标点击切换 `已选状态`
- **时分双列**：左列选小时，右列选分钟，两列独立滚动
- **已选状态**：触发器显示已选值；下拉关闭
- **再次打开**：定位到已选行，方便复选
- **弹窗投影**：所有下拉列表均带 `0px 2px 20px 0px rgba(17,20,26,0.16)` 阴影，强化层级
- **弹层位置**：在触发器下方，默认下拉；空间不足时自动上拉（参见 [下拉选择](下拉选择.md) §位置）

## 示例

![时间选择框-触发器全状态](../图片/组件/时间选择/chu-fa-qi-quanstate.png)
![时间选择框-默认](../图片/组件/时间选择/chu-fa-qi-default.png)
![时间选择框-悬浮](../图片/组件/时间选择/chu-fa-qi-hover.png)
![时间选择框-已选](../图片/组件/时间选择/chu-fa-qi-yi-xuan.png)
![时间选择框-已选悬停](../图片/组件/时间选择/chu-fa-qi-yi-xuan-xuan-ting.png)
![下拉列表-小时](../图片/组件/时间选择/dropdownlist-xiao-shi.png)
![下拉列表-时·分](../图片/组件/时间选择/dropdownlist-shi-fen.png)
![组合交互-触发器加下拉](../图片/组件/时间选择/zu-he-jiao-hu.png)
![规则标注-宽度规则](../图片/组件/时间选择/kuan-durulebiao-zhu.png)
![规则标注-弹窗与时间控件间距](../图片/组件/时间选择/kuan-durulebiao-zhu.png)

## 设计考量 / 原文摘录

> 支持时、时分使用不同颗粒度的选择。
> 最长宽度不限制，根据 U 布局内容定。
> 弹窗与时间控件间距（设计标注）。

- **与日期选择共享触发器形态**：用户在同一表单里看到日期选择和时间选择，认知一致
- **双列时分**：两列独立滚动，比单一列表「14:30、14:45…」更紧凑、覆盖更密
- **弹层位置自适应**：根据屏幕剩余空间在上下方向切换，与下拉选择保持一致

## 不推荐用法

- 用文本输入框让用户手动输入时分（容错率低、需要复杂校验）
- 时颗粒度场景使用时分双列（多余的分钟列让用户困惑）
- 弹层不带投影（与背景融为一体，层级不清）
- 触发器尺寸偏离 160×32px（与同表单其他控件无法对齐）
- 选项使用 12 小时制不显示 AM/PM（业务语义不完整）

## 关联

- 触发器形态参考 [下拉选择](下拉选择.md)
- 日期颗粒度选择见 [日期选择](日期选择.md)
- 弹窗 / 浮层规范见 [浮层](浮层.md)、[弹窗](弹窗.md)
- 表单内时间字段排布见 [表单](表单.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
