# 时间选择器 用于选择某一符合要求的、格式化的时间点。 ## 使用规则 Time picker 允许用户选择、输入时间。主要的使用场景包括但不局限于： - 预约日程 - 设定提醒时间 - 时间选择（通用） ## 组成要素 时间选择器主要由**输入框**和**下拉选择器**两部分组成 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/20dc5acd42506f2efb644f70510d0f35_3ZXitqxzvl.png?height=811&lazyload=true&width=2048) 1. **输入框：** 输入框分为大、中、小三种尺寸，主要性质参照输入框组件。输入框的宽度可以根据需求自定义 1. **时间：** 时间为 24 小时制或 12 小时制。24 小时制以 hh:mm 或 hh:mm:ss 的格式展现。例：24 小时制展示 16:30。12 小时制展示 下午 4:30（多语言根据语言习惯配置） 1. **时间 icon(可选)**：时间 icon 作为输入框性质展示，建议展示。若容器尺寸过小可以隐藏 1. **清除键(可选)**：点击后清除已选时间数值 1. **下拉选择器：** 分为两种类型，同时选择时和分，独立选择时和分。宽度可自定义，默认与输入框相同 ## 控件类型 时间选择器主要分为两种类型： - 当下拉选项的时间间隔为**大于等于 15min** 时建议使用**时和分合并选项**的时间选择器 - 当下拉选项的时间间隔为**小于 15min** 时建议使用**时和分独立选项**的时间选择器 ### 同时选择时和分 #### 设计说明 时间间隔为**大于等于 15min** 时使用 - 建议分钟间隔为 15min 或 30min 或 60min。例如 00:00， 00:15， 00:30... 或 00:00， 00:30， 01:00... 或 00:00， 01:00， 02:00 等 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/155d2b4fd79e7cadd53e99f29c93433c_rHw6w8A24M.png?height=821&lazyload=true&width=2048) #### 详细尺寸 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/4a381f90b32a3ef6607343f175d9725c_eHstPJTuXn.png?height=821&lazyload=true&width=2048) ### 独立选择时和分 #### 设计说明 建议时间间隔为**小于 15min** 时使用 - 时的间隔以 1h 为跨度 - 分的间隔建议以 1min 或 5min 为跨度。分针的间距必须能被 60 整除。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/189016ce483d37c8e5a141a75504d88a_Vwte4vEP4h.png?height=822&lazyload=true&width=2048) #### 交互说明 - 下拉选择器展开时，默认选中时间位于下拉选择器的第一项 - 下拉选择器分为时和分两部分，可以分别选择 - 当默认选择为空时，选择时或分的任意一项，将自动选择另一项为“00” - 点击确认或点击选择器外均保存已选项，并收起下拉选择器 #### 详细尺寸 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/72a2a9414819729eab05da0f2b55f10f_uSNBGlqMAZ.png?height=821&lazyload=true&width=2048) ## 通用规则 ### 输入方式 为了方便用户快速的定位时间，时间选择器主要提供两种时间输入方法： 1. **通过输入框输入时间：** - 以 hh:mm 的格式（或其他规定格式）输入时间。若输入的时间非法或在限定时间范围之外，则输入数值无效，时间返回上一有效保存时间 2. **通过下拉选择器输入时间：** - 对于小时和分钟合并的下拉菜单，用户可通过单击选项选择时间 - 对于小时和分钟分离的下拉菜单，用户可以分别单击选择小时和分钟。用户点击选择器外隐藏输入框，保存用户选择的时间 ### 12 小时制 时间选择器默认跟随飞书设置中的时间制度设置，若无法识别时间，则默认设置为 24 小时制。 **时和分合并选项** - 选项展示为 12:15 AM **时和分独立选项** - 选项展示为 AM、12、15 - 新增列选择上午和下午 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/b1dd344e37d3cba083f9490e85a8899a_khzXybOfsq.png?height=802&lazyload=true&width=2048) ### 选择器状态 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/0fc743c76aec1dbd53cb679db9d56c32_TeAlFU3aZp.png?height=740&lazyload=true&width=2560) ### 选择秒（可选） 时间选择器支持选择精确到秒，为可配置项，时间输入格式为 hh:mm:ss ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/05016217cb4b5dc55bb3e72b0bec0971_a1q5MP3Wca.png?height=756&lazyload=true&width=2048) ### 清除（可选） 根据需求，可以配置时间选择器是否支持数值为空。若时间选择器支持时间为空，用户可以清除已选时间。清除选项默认开启。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/23ccef9483414b0c4e4dc2f70323e252_KoZLEfJ3oq.png?height=756&lazyload=true&width=2048) ### 禁用时间（可选） 可根据需求禁用连续时间段。主要情景为：选择现在时间点之后的某一时间，时间提醒、预约等 **禁用时间置灰**：
当时间段禁用时，下拉选择器默认置灰禁用的时间 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/879ecd0627c770a68e1d16ee72e805f8_sW8SvOMaMi.png?height=756&lazyload=true&width=2048)
**支持配置是否显示禁用时间**：
依据场景，组件可以控制是否显示禁用时间 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/34f260d3999b5b272b23fb03cfe0bc5b_cLRRp2TqRL.png?height=756&lazyload=true&width=2048) ### 选择日期 + 时间 时间选择器通常伴随日期选择器同时出现。以下提供两种通用的处理方式： - **分别调用日期选择器组件 和 时间选择器组件** - 在日期、时间需要分开调整时使用，如日历 - 在容器中使用 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/e6293fe088f2588bac9cdaf8a2656974_BeF3oBBkp4.png?height=988&lazyload=true&width=1004) | ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/de08a676ad70f9c4e0a1b294406a4ad8_6ZzakzON8x.png?height=1013&lazyload=true&width=1004) ---|--- - **使用 日期、时间选择器合并组件** - 在日期和时间需要同时调整时使用 - 用户展开面板后可分别选择日期和时间，时间选择器时、分、秒独立选项 - 选择时间/日期会自动填充其他选项 - 关闭面板即保存时间 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/8676765b16921727cca74e920a2a5cd6_TLMn7ObcYx.png?height=958&lazyload=true&width=2048) ### 选择时间跨度 **不单独提供选择时间跨度的组件**，当选择日期 + 时间的跨度时，可分别调用日期和时间选择器。以下为使用示例： **规范默认使用横线做间隔**，可以根据实际场景异化 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/9d37c4a06d8fc38c87ea59971a3a98db_y5uTme3nE5.png?height=368&lazyload=true&width=2048) 根据需要在时间选择器上可以做一些特殊处理： **对于时和分合并选项** - 选择器时间的时间选项可按照输入时间变动 - 第二个时间选择器的开始时间为上一个时间选择器的结束时间 - 第二个时间选择器可以从上一个时间选择器的结束时间开始 count 24 小时 - 第二个时间选择器在下拉选项中展示时间跨度 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/df962389fa6059427bbb287616cbc880_Vs4kga3MO8.png?height=622&lazyload=true&width=2048) **对于时和分独立选项** - 建议禁用上一时间之前的时间。 ### 选择器底部配置项（可选） 建议对 **日期、时间合并的选择器** 进行底部配置。 **确定、取消按钮配置**（默认关闭） 当数据量较大、数据不能实时刷新，需要用户手动确认时可开启。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/979c8f69399cf19d6df21758914cc12e_NmSeHLKh2O.png?height=958&lazyload=true&width=2048) - 点击确认按钮保存输入数值，收起面板 - 点击取消按钮返回至上一输入数值，收起面板 - 点击面板外保存输入数值，收起面板 **“此刻 （Current Time）“ 按钮配置**（默认关闭） 适用于精确到 1 分钟的时间选择器 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/334899bbd9a742650ce6ce537b678a4a_erB7MaVzzi.png?height=950&lazyload=true&width=2048) - 点击此刻定位到此刻时间