---
title: 日期选择
slug: 日期选择
category: 组件
figma_node_id: 1:19
figma_page_name: ＞日期选择
aliases: [DatePicker, Calendar, 日期选择器, 日历, 年月选择, 日期范围]
last_extracted: 2026-05-19
status: ok
---

# 日期选择

> 用于选择具体日期 / 日期范围 / 年月颗粒度的输入组件。支持移动端轮播式选择器、桌面端日期选择框 + 下拉日期面板两条产品形态，覆盖年月日 / 年月 / 月日多种颗粒度，可叠加顶部日期回显与底部「今天 / 时间设置」快捷区。

## 类型与号型

### 形态分类（来自 Figma 章节大标题）

| 形态 | 说明 |
|---|---|
| 日期选择框 | 表单内的触发器（trigger） |
| 下拉日期选择器 | 点击触发器后弹出的日期选择面板 |
| 组合以及交互 | 多控件组合的选择流程 |
| 标注 | 设计标注 / 规格 |

### 颗粒度

- 年月日选择器
- 年月选择器（默认选中当前年份，月份不选择）
- 月日选择器

### 来源 Component 引用

页面引用了以下子组件（来自 metadata.components）：

| componentId | 名称 |
|---|---|
| `33:4300` | 下拉日期/选择1 |
| `33:4374` | 下拉日期/选择2 |
| `33:4382` | 下拉日期/选择3 |
| `33:4404` | 下拉日期选择年月 |
| `35:10294` | 移动端选择器/日时分 |

## 尺寸规格

桌面端规范画板：1280 × 7016px。移动端面板：375 × 812px。

| 规格 | 数值 | 来源 |
|---|---|---|
| 移动端轮播面板 | 375 × 812px | `layout_NT22BI / MLMHPB / E705FM` |
| 桌面端弹窗面板（年月日） | 375 × 336px | `layout_FMG0AM` |
| 触发器圆角 | 4px | `borderRadius: 4px` |
| 章节大标题 | 24px Semibold | `style_8S63UG`，色 `#1C1D1F` |
| 说明文字 | Regular | 色 `#878D99` |
| 弹窗投影 | `0px 2px 20px 0px rgba(17, 20, 26, 0.16)` | 全局 `弹窗投影` token |
| 最长宽度 | 不限制，根据 U 布局内容定 | 设计标注 |

## 状态

- 默认（默认状态）
- 已选（已选状态，含日期回显）
- 触发器：默认 / Hover / 激活展开 / 禁用 / 加载（详见 [下拉选择](下拉选择.md)）
- 移动端选择器：滚轮滚动态、当前选中行高亮

### 排版规则（来自 Figma 标注文字）

| 布局 | 适用 |
|---|---|
| 内容区 1/4 居中 | 时分 / 单字段窄面板 |
| 内容区 1/2 居中 | 标准日期选择 |
| 内容区 1/3 居中 | 三段（年/月/日）等宽分布 |

> 日期宽度为内容区 2/4 居中，时分维度分别时内容区 1/4 居中。

## 颜色与 token

| 用途 | hex | token / 说明 |
|---|---|---|
| 面板 / 容器底色 | `#FFFFFF` | 默认底色 |
| 章节大标题文字 | `#1C1D1F` | 24px Semibold |
| 主文字色 | `#11141A` | 已选 / 高亮 |
| 副文字 / 占位 | `#878D99` = `C-Coolgray60` | 说明文字 |
| 已选范围背景 / 浅灰底 | `#F7F8FA` = `C-Coolgray20` | 选中日期区间淡背景 |
| 强调（已选高亮） | `#5C6473` 类深灰 / 主色（视具体子组件而定） | 已选日期主色 |
| 警示色 / 错误 | `#FF0015` ≈ `Red60` | 不可选日期 / 错误标注 |
| 弹窗投影 | `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
- 桌面端弹窗面板与触发器之间存在「弹窗与时间控件间距」（设计标注，具体数值见示例图）
- 移动端日时分轮播：日 / 时 / 分三段，每段在内容区 1/4 居中
- 桌面端日期范围选择：起止两面板并列，起止之间用连接线视觉表达范围

## 文案规则

- 触发器 placeholder：`时间选择` / `日期选择` / `选择时间` 等中文短词
- 顶部可配置【日期选择结果】区域，点击可手动编辑日期
- 底部可配置【今天】区域，点击快速选择今日日期
- 底部可配置【时间设置】区域，下拉选择具体时间

## 交互行为

- **点击触发器**：弹出对应颗粒度的日期面板
- **滚轮 / 轮播**（移动端）：日 / 月 / 时 / 分各列独立滚动，居中行为选中值
- **范围选择**：依次点击起止日期，区间内日期变浅灰底 `#F7F8FA`
- **快捷区**：
  - 顶部「日期选择结果」可编辑：点击切回手动输入态
  - 底部「今天」：一键跳到当前日期
  - 底部「时间设置」：下拉具体时分秒
- **不同颗粒度切换**：年月日 / 年月 / 月日可通过组件实例切换
- **校验**：禁用不可选日期（如「截止时间不能早于起始时间」，详见 [表单](表单.md) 字段约束）

## 示例

![移动端-日期选择面板](../图片/组件/日期选择/mobiledate-picker.png)
![移动端-时间选择面板](../图片/组件/日期选择/mobiledate-picker.png)
![桌面端-日期选择框触发器](../图片/组件/日期选择/desktopdate-pickerkuang.png)
![桌面端-下拉日期选择器](../图片/组件/日期选择/desktopdate-pickerkuang.png)
![年月日选择器默认状态](../图片/组件/日期选择/desktopdate-pickerkuang.png)
![年月选择器默认状态](../图片/组件/日期选择/desktopdate-pickerkuang.png)
![下拉日期范围选择器](../图片/组件/日期选择/desktopdate-pickerkuang.png)
![日期范围回显态](../图片/组件/日期选择/desktopdate-pickerkuang.png)
![组合交互-顶部回显编辑](../图片/组件/日期选择/desktopdate-pickerkuang.png)
![组合交互-今天快捷](../图片/组件/日期选择/desktopdate-pickerkuang.png)
![组合交互-时间设置下拉](../图片/组件/日期选择/desktopdate-pickerkuang.png)

## 设计考量 / 原文摘录

> 支持月、日等不同颗粒度的日期选择。
> 年月选择器默认状态默认选中当前年份，月份不选择。
> 顶部可配置【日期选择结果】区域，点击可手动编辑日期。
> 底部可配置【今天】区域，点击快速选择今日日期。
> 底部可配置【时间设置】区域，下拉选择具体时间。
> 最长宽度不限制，根据 U 布局内容定。

- **三种颗粒度的统一壳**：年月日 / 年月 / 月日共享同一弹窗框架，仅列数不同，降低用户学习成本
- **顶部 + 底部双快捷**：高频操作（今天、时间设置、手动编辑）外露成按钮，避免重复滑动
- **半透明范围底色**：用 `#F7F8FA` 弱表达区间，不抢已选日期的视觉焦点

## 不推荐用法

- 仅需选年 / 选月时使用年月日全颗粒度面板（拖动距离大、效率低）
- 在表单中直接放下拉日期面板，不通过触发器（占用空间过大）
- 范围选择不显示起止之间的视觉连接（用户难以确认范围）
- 禁用日期不给视觉反馈（颜色不变 + 不可点击会让用户以为是 bug）
- 移动端弹出桌面端式的日期面板（轮播交互更适合触屏）

## 关联

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