基本定义

构成元素

1. 标签：指示用户，组件的含义
2. 选择/输入框：用户可以手动输入日期和触发下拉日历
3. 日期图标：图标表示选择框属性
4. 日历：可以选择日期的组件
5. 月和年的组件：允许用户浏览过去和未来的时间范围
6. 上个年/下个年切换：允许用户一次向前或向后移动一年
7. 上个月/下个月切换：允许用户一次向前或向后移动一个月
8. 天：一个月中的天数

类型

日期选择器

1. 天
2. 今天
3. 禁用
4. 选中
5. 悬停

日期范围选择器

特定日期选择器

特定日期段选择器

尺寸

日期选择器有三种尺寸：小 (24px)、中 (32px) 和大 (40px) 日历下拉框尺寸：240x264px

相关组件对比

组件模式

时间选择器

在要求用户输入特定时间时使用。

用法

1. 什么时候用
   • 当用户知道日期时，通常会使用简单的日期输入或者是选择日期
   • 当用户知道大致日期而不是确切日期
2. 什么时候不用
   • 当用户想要选择时间，或者时间范围请选择时间选择器

行为

出现方式

点击对应的文本字段，下拉出现

生命周期

选择完毕自动收起/点击下拉框以外的位置

容器的规则

日历本身将始终保持固定宽度且不可调整。它应始终与其对应的文本字段的左边缘对齐

跨端的变化

• Pad 时间选择器从右侧弹出
• Phone

日期选择器

1.出现方式：抽屉弹层出现日历

2.上个年、下个年切换：仅切换年

3.上个月、下个月切换：手指上下滑动，切换月份

日期范围选择器

1.取消、确定：点击取消/确定收起时间范围选择器

特定日期选择器/特定日期范围选择器

1.特定日期：特定日期选择方式在上方，超出左滑

相关资源

组件负责人

1. 前端:杨小英
2. 设计:李帆

同类组件

日志

版本号

• 版本号 新增了 XXX 内容 解决了 XXX 问题 删除了 XXX 内容

检查清单