时间选择器是移动端场景下用于选择日期、时间或同时选择二者的输入类组件，属于级联选择器在日期选择场景的垂直化应用，其选项关联交互逻辑与级联选择器同源，复杂度相对更低。
1️⃣动图效果
元件库目前共提供三类时间选择器，分别为独立日期选择样式、独立时分选择样式，以及日期+时分的复合选择样式，可匹配不同业务场景的需求。
🔹日期选择器：供用户选择年、月、日组合完成日期输入的组件。结合实际业务落地经验，元件库内置了两种初始默认值方案：当前年份1月1日，以及系统当前年月日，可直接按需调用。
🔹时分选择器：供用户选择小时、分钟组合完成时间输入的组件。同样适配高频使用场景，初始默认值支持设置为0时0分，或系统当前时分。
🔹日期+时分选择器：供用户选择完整年月日时分信息的复合组件，为上述两类组件的功能整合，默认值同样提供两种方案：当前年份1月1日0时0分，以及系统当前完整年月日时分。
由于日期+时分选择器整合了独立日期、独立时分选择器的全部功能特性，能够覆盖时间选择器的所有使用场景，因此本文将以该复合组件为讲解示例，完整介绍时间选择器的使用方法与制作逻辑。
2️⃣使用方法
- 进入【元件库->输入组件->时间选择器】目录，选择匹配业务需求的时间选择器组件，直接拖拽至原型画布即可使用。
- 统一页面内的蒙层与弹框样式，具体规范可参考【3.弹框与蒙层】章节说明。
- 自定义调整起止年份范围。年、月、日、时、分5个时间单位中，仅年份的可选范围为非固定项。若需自定义年份区间，可找到组件内的“年份列表”中继器，直接修改中继器表格内的年份数据即可生效。
3️⃣制作方法
🔹制作思路
前文已说明，时间选择器是级联选择器在时间选择场景的专项应用，其组件结构、数据组织逻辑、基础交互事件均与级联选择器完全一致，因此本文不再重复赘述通用部分，仅重点讲解时间选择器特有的年、月、日、时、分多选项间的关联交互实现方法。若对级联选择器的基础组件结构、数据组织方式、通用交互事件不熟悉，可先回顾往期两篇教程：【13.基础选择器】与【14.级联选择器】。
本文将以默认值为系统当前年月日时分的完整日期+时间选择器为例，详细拆解5个时间选项之间的交互逻辑实现思路。
5个时间选项列表的默认值定位逻辑。常规级联选择器的选项列表默认初始选中第一项，但默认值为当前时间的时间选择器中，各时间选项的初始选中项需要根据弹框触发时的系统时间动态计算。借助Axure自带的时间函数，可快速获取当前时间对应的年、月、日、时、分数值；通过计算该数值与对应选项列表首项的差值，即可得出当前时间对应选项的索引值，以及该选项移动至列表居中选中位的偏移距离，最终实现5个时间选项列表默认选中位置的自动校准。
选项间的联动交互逻辑。年、月、日、时、分5个时间单位中，仅年、月、日三者存在闰年、大小月场景下的联动关系，其余场景下各选项均可独立滑动，互不干扰。当用户选中2月时，若调整年份选项，需要根据闰年判定规则同步更新日期的可选范围：闰年时日期上限为29天，非闰年时为28天；大小月的联动逻辑仅与月份、日期选项相关，与年份无关，当选中的月份在大小月之间切换时，需要实时同步调整日期的可选范围。
🔹组件结构
时间选择器的组件结构与级联选择器完全一致，具体可参考【14.级联选择器】章节的相关说明，本文不再重复展开。
🔹交互逻辑
1. 时间选择器加载交互事件
在选择器的加载交互事件中，需要统一完成5个时间选项列表的变量初始化工作。由于完整交互代码篇幅较长，此处仅截取展示年份选项列表的变量初始化内容作为示例。
各时间选项列表的变量初始化逻辑基本一致，可参照年份选项的配置规则类推。唯一需要注意的是“选项列表顶点位置”变量的计算公式，每个选项列表的该变量都需要结合当前时间动态计算，具体规则如下：
年份选项
本示例中，年份选项列表的首个选项值为1931年。
月份选项
日选项
时选项
分选项
2. 年份选项拖放交互事件
红框外的交互动作与“基础选择器”的处理逻辑完全一致，可直接复用，重点关注红框内的联动交互动作即可。
实现日期范围动态调整的最优方案为：在月份选项列表的中继器表格中预先填入大月的31天全量数据，后续通过中继器的过滤器功能动态控制展示的行数，即可快速适配大小月、闰年月的不同天数要求。
闰年判定规则为：年份能被4整除即为闰年。通过该规则判定选中年份的闰年属性后，给日选项列表的中继器添加对应的数据行数限制（28行或29行），即可实现闰年、非闰年场景下日期可选范围的动态控制。
3. 月份选项拖放交互事件
月份选项拖放交互事件的前半段逻辑（选项列表跟随移动、变量动态计算、位置校正定位）与年份选项完全一致，此处省略展示，仅呈现大小月与闰年2月的特殊处理逻辑。
该部分处理逻辑与年份选项的联动逻辑同源，均通过给日选项列表的中继器添加不同行数的过滤器限制，实现日期可选范围的动态调整。
4. 其余选项拖放交互事件
除年份、月份外，其余时间选项的拖放交互均为此类选择器组件的标准逻辑，如下图所示，需要实现三个核心动作：选项列表跟随鼠标移动、实时计算选项列表动态变量、滑动结束后自动校正选项列表的选中档位。
5. 确定按钮点击交互事件
最后一处需要自定义调整的节点为确定按钮的点击交互事件，需重点处理选中时间回填至输入框的格式规范，具体配置如下：
4️⃣要点总结
🔹时间选择器是级联选择器在时间选择场景的垂直应用，其基础结构与通用交互逻辑与级联选择器完全一致，核心差异仅在于年、月、日选项之间的联动交互规则。
🔹年、月、日的联动交互核心是适配大小月与闰年的日期范围变化。推荐实现方案为：在日选项列表的中继器中预先填入31天的全量数据，后续通过中继器的过滤功能动态限制展示的行数，即可高效实现不同月份、不同年份下的日期范围正确展示。
