前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载本文围绕 rsuite 的 TimePicker 时间选择器深度讲解如何通过hideMinutes隐藏指定分钟选项配合editable{false}关闭键盘输入实现每 15 分钟一个可选档位的时间步长选择并顺带梳理hideHours/hideSeconds、shouldDisable*系列属性的差异以及该机制在源码中的真实渲染逻辑。读完本文你将掌握如何在时间选择器中限定可选项的颗粒度、如何在隐藏与禁用两种策略之间做取舍以及如何借助format、showMeridiem、responsive等配套属性把时间选择做得更贴合业务。1. 问题背景为什么需要时间步长在很多业务场景里用户并不需要精确到每一分钟或每一秒的时间输入预约系统中时间往往以15 分钟或 30 分钟为档位如 09:00、09:15、09:30考勤、排班系统中时间通常以整点或半小时为单位收银、计费系统中为避免非法输入往往只允许选择固定间隔的时间点。默认情况下rsuite 的 TimePicker 会渲染 0~59 的所有分钟选项用户也可以直接在输入框里键入任意时间。此时就需要借助本文的核心方案——隐藏hide机制把不符合步长的选项从下拉列中过滤掉并关闭键盘输入从入口上杜绝脏数据。该演示示例即来自仓库文档 time-step.md完整代码如下import { TimePicker } from rsuite; const App () ( TimePicker hideMinutes{minute minute % 15 ! 0} editable{false} / / ); ReactDOM.render(App /, document.getElementById(root));这段代码的核心是两行配置hideMinutes{minute minute % 15 ! 0}凡是不能被 15 整除的分钟全部隐藏下拉列表里只会剩下 00、15、30、45 四个档位editable{false}选择器不再渲染为可键入的输入框用户只能通过点选下拉选项来取值避免绕过限制直接键入 09:07 这类时间。2. 三个 hide 系列属性小时、分钟、秒TimePicker 提供了三个同族的隐藏属性类型均为(unit: number, date: Date) boolean详见组件 Props 表 TimePicker Props属性签名作用hideHours(hour: number, date: Date) boolean返回true的小时选项被隐藏hideMinutes(minute: number, date: Date) boolean返回true的分钟选项被隐藏hideSeconds(second: number, date: Date) boolean返回true的秒选项被隐藏回调的第二个参数date是当前面板的日期对象这意味着你可以实现随日期变化的时间策略。例如工作日允许 09:00~18:00周末只允许 10:00~16:00TimePicker hideHours{hour { const day new Date().getDay(); const isWeekend day 0 || day 6; return isWeekend ? hour 10 || hour 16 : hour 9 || hour 18; }} hideMinutes{minute minute % 30 ! 0} /再比如限定秒的取值只能为 0 和 30每半秒档TimePicker formatHH:mm:ss hideSeconds{second second % 30 ! 0} /注意hideSeconds只有在format中包含秒如HH:mm:ss时才会渲染秒列否则秒列不会出现在下拉中。同理12 小时制下小时列的取值范围为 0~1124 小时制为 0~23详见下文源码中的getTimeLimits逻辑。3. hide隐藏与 shouldDisable禁用的区别TimePicker 还有另一组禁用属性shouldDisableHour、shouldDisableMinute、shouldDisableSecond。两者常常被混淆但语义截然不同官方文档在 disabled 示例 中同时展示了两种用法策略属性效果适用场景隐藏hideMinutes等选项不渲染下拉列表里根本不出现限定可选步长、收紧取值集合禁用shouldDisableMinute等选项仍然渲染但置灰且不可点击让用户看得到但选不了提示存在该时间对应的示例代码如下// 禁用选项置灰但仍显示 TimePicker defaultValue{new Date(2017-12-12 09:15:30)} shouldDisableHour{hour hour 8 || hour 18} shouldDisableMinute{minute minute % 15 ! 0} shouldDisableSecond{second second % 30 ! 0} / // 隐藏不符合条件的选项直接不渲染 TimePicker formatHH:mm:ss defaultValue{new Date(2017-12-12 09:15:30)} hideHours{hour hour 8 || hour 18} hideMinutes{minute minute % 15 ! 0} hideSeconds{second second % 30 ! 0} /判断两者哪个更合适主要看产品意图如果希望用户明确9 点到 18 点之外不能选用shouldDisable*展示置灰状态更友好如果希望界面清爽、只呈现合法选项比如固定 15 分钟档位用hide*更合适。注意在TimeDropdown源码中隐藏的判断优先级更高——被隐藏的选项根本不会进入渲染列表详见第 5 节而禁用项仍会渲染并带有cell-disabled样式和aria-disabled语义。4. editable 与 format把可选限定在步长之内hideMinutes只影响下拉列表但默认情况下 TimePicker 是可编辑输入框editable默认true用户依然可能通过键盘直接输入任意时间。因此实现严格的步长限制必须双管齐下TimePicker hideMinutes{minute minute % 15 ! 0} editable{false} /editable{false}根据 Props 表editable默认true关闭后组件不再渲染为可键入的 Input只保留触发按钮与下拉面板用户只能从下拉中选择从而保证最终取值一定落在合法档位上与之配套的format默认HH:mm控制输入框展示格式。例如要显示秒可设为HH:mm:ss要使用 12 小时制可结合showMeridiem设为hh:mm aa见 meridiem 示例。// 24 小时制 TimePicker formatHH:mm / // 12 小时制带 AM/PM TimePicker formathh:mm aa showMeridiem /showMeridiem开启后下拉面板会额外渲染一列 AM/PM 选项源码见第 5 节的renderMeridiemColumn且小时列的取值逻辑会自动换算AM/PM 模式下点击 PM 的小时会在内部加上 12。5. 源码级原理解析TimeDropdown 如何过滤选项理解了用法之后我们深入 TimeDropdown 实现 看看选项过滤与渲染的真实链路。TimePicker 本身在 TimePicker.tsx 中是对DatePicker的轻量封装默认format取 locale 的shortTimeFormat并内置了Now快捷项时间面板则交由Calendar下的TimeDropdown渲染。5.1 列的渲染与 hide 过滤renderColumnTimeDropdown.tsx#L99-L145是核心。关键逻辑如下const { start, end } getTimeLimits(showMeridiem)[type]; const items: React.ReactElement[] []; const hideFunc props[camelCase(hide_${type})]; const disabledFunc props[camelCase(disabled_${type})]; for (let i start; i end; i 1) { if (!hideFunc?.(i, plainDate)) { const disabled disabledFunc?.(i, plainDate); // 渲染 li 选项禁用时带 cell-disabled 样式并取消 onClick } }几点可以确认的实现事实hideFunc/disabledFunc通过camelCase(hide_ type)动态取得因此hideHours、hideMinutes、hideSeconds三个属性共用同一套渲染管线getTimeLimits(showMeridiem)决定遍历范围24 小时制下小时为 0~23开启showMeridiem后小时变为 0~11分钟、秒始终为 0~59只有!hideFunc?.(i, plainDate)为真的选项才会被 push 进列表回调的第二个参数是plainDate{ year, month, day }结构即随日期过滤能力的来源禁用项disabledFunc返回true仍会被渲染但打上cell-disabled类并设置aria-disabled且onClick被移除TimeColumn.tsx 将其放入带自定义滚动条的ScrollView列中。5.2 选中后的时间合成handleClickTimeDropdown.tsx#L50-L70在用户点击某一列时读取当前时钟时间getClockTime({ format, date, showMeridiem })仅替换被点击的单位其余单位保持不变若处于 PM 且点击小时还会自动12换算为 24 小时制内部值最后通过onChangeTime回传给日历上下文。5.3 当前选中项自动滚动TimeDropdown.tsx#L40-L46 使用useEffect在面板打开时调用scrollToTime把当前选中时间滚动到可见区域避免用户每次都要手动滚动长列表——当hideMinutes过滤掉大量选项后这一行为依然生效。6. 从步长出发的完整配置参考结合官方 Props 表见 en-US index 与 zh-CN indexTimePicker 的完整属性如下其中与步长/取值约束直接相关的已在前文展开属性类型默认值描述appearancedefault \| subtle(default)选择器外观blockboolean撑满整行caretAsElementType自定义右侧箭头图标组件cleanableboolean(true)是否允许清除已选值containerHTMLElement \| (() HTMLElement)设置渲染容器defaultOpenboolean默认是否展开defaultValueDate默认值非受控disabledboolean禁用整个组件editableboolean(true)是否渲染为可键盘输入的 Inputformatstring(HH:mm)输入框中的日期格式hideHours(hour, date) boolean隐藏指定小时选项hideMinutes(minute, date) boolean隐藏指定分钟选项hideSeconds(second, date) boolean隐藏指定秒选项labelReactNode触发按钮开头显示的标签loadingboolean(false)是否显示加载中指示器localeDateTimeFormats本地化设置参见仓库 locales 目录 中的DateTimeFormats配置onChange(date: Date) void值变化回调onClean(event) void清除值回调onClose/onOpen() void关闭 / 打开回调onEnter/onEntering/onEntered/onExit/onExiting/onExited() void过渡动画各阶段回调onOk(date, event) void点击确定回调onSelect(date: Date) void选中时间回调onShortcutClick(shortcut, event) void点击快捷项回调openboolean是否展开受控placeholderstring无值时的占位内容placementPlacement(bottomStart)浮层显示位置preventOverflowboolean防止浮层溢出rangesRange[]快捷项配置默认内置NowrenderValue(date, format) string自定义渲染值responsiveboolean(true)超小屏幕上浮层是否显示为全宽 DrawershouldDisableHour/shouldDisableMinute/shouldDisableSecond(unit, date) boolean禁用小时 / 分钟 / 秒showMeridiemboolean12 小时制AM/PMsizelg \| md \| sm \| xs(md)组件尺寸valueDate当前值受控其中ranges的类型定义在 src/DatePicker/types.ts 对应的DateOptionPreset中TimePicker源码 TimePicker.tsx 默认注入了一个label: locale.now, value: () new Date()的现在快捷项。6.1 受控与非受控defaultValue对应非受控用法valueonChange对应受控用法官方 controlled 示例 有完整演示。实现步长选择时通常配合受控或非受控之一即可若需在业务层进一步校验取值可在onChange中做二次判断。6.2 响应式与可访问性响应式默认responsive{true}在超小屏幕上浮层会显示为全宽 Drawer当 TimePicker 已位于 Modal 或 Drawer 内部时建议显式设置responsive{false}以保持定位浮层、避免嵌套遮罩见主文档 Responsive 章节。可访问性TimePicker 默认继承 DateInput 的 ARIA 属性值无效时input上添加aria-invalidtrue设置label后aria-labelledby会同时添加到input与dialog元素组件具备aria-haspopupdialog标识交互式弹层。在下拉面板内每个时间选项都带有roleoption、aria-selected与aria-disabled源码见 TimeDropdown.tsx#L116-L124隐藏与禁用状态均能被读屏器正确感知。7. 组合实战一个15 分钟档位 12 小时制的完整示例把前文知识组合起来实现一个带 AM/PM、分钟固定 15 分钟档、且不可手动输入的预约时间选择器import { TimePicker } from rsuite; const App () ( TimePicker formathh:mm aa showMeridiem hideMinutes{minute minute % 15 ! 0} editable{false} placeholder选择预约时间 onChange{date console.log(selected:, date)} / ); ReactDOM.render(App /, document.getElementById(root));formathh:mm aashowMeridiem12 小时制展示带 AM/PM 列hideMinutes分钟只保留 00 / 15 / 30 / 45editable{false}杜绝键盘输入非档位时间onChange在业务层拿到最终合法时间可直接用于提交。如需更复杂的步长规则例如每 20 分钟、每 30 分钟、或仅在特定日期范围内开放特定档位只需把hideMinutes的回调逻辑替换为对应的取模或日期判断即可其余行为由 TimePicker 内部渲染管线统一处理。8. 小结时间步长的本质是过滤用hideMinutes以及hideHours/hideSeconds把不符合步长的选项从渲染列表中去掉配合editable{false}关闭自由输入即可从数据入口保证取值的规范性隐藏 vs 禁用hide*不渲染选项适合收紧取值集合shouldDisable*渲染但置灰适合传达存在但不可用的信息两者都支持(unit, date)双参数回调可实现随日期变化的动态策略源码层面选项过滤发生在TimeDropdown的renderColumn循环中隐藏优先级高于禁用列范围由getTimeLimits依据 12/24 小时制决定点击合成时间由handleClick完成——理解这条链路后你可以放心定制各类时间粒度需求配套能力format控制展示格式、showMeridiem切换 12 小时制、responsive处理移动端弹层形态、ARIA 属性保障无障碍体验让时间选择既严格又易用。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐rsuite TimeRangePicker 时间步进配置实战用 hideMinutes / hideHours / hideSeconds 实现自定义时间粒度选择rsuite TimeRangePicker 时间步进配置实战用 hideMinutes / hideHours / hideSeconds 实现自定义时间粒前端UI组件ng-zorro-antd TimePicker 步长选项全解析通过 nzHourStep / nzMinuteStep / nzSecondStep 控制时分秒可选间隔ng zorro antd TimePicker 步长选项全解析通过 nzHourStep / nzMinuteStep / nzSecondStep 控制时UI组件前端SukiUI TimePicker 时间选择控件实战指南基于 AvaloniaUI 的时分秒选择与主题定制SukiUI TimePicker 时间选择控件实战指南基于 AvaloniaUI 的时分秒选择与主题定制 TimePicker 是 SukiUI 主题库中用UI组件桌面应用上一篇CANN/opbase日志接口文档下一篇如何快速选对 Mac Mouse Fix 的安装方式两种方式完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载本文围绕 rsuite 的 TimePicker 时间选择器深度讲解如何通过hideMinutes隐藏指定分钟选项配合editable{false}关闭键盘输入实现每 15 分钟一个可选档位的时间步长选择并顺带梳理hideHours/hideSeconds、shouldDisable*系列属性的差异以及该机制在源码中的真实渲染逻辑。读完本文你将掌握如何在时间选择器中限定可选项的颗粒度、如何在隐藏与禁用两种策略之间做取舍以及如何借助format、showMeridiem、responsive等配套属性把时间选择做得更贴合业务。1. 问题背景为什么需要时间步长在很多业务场景里用户并不需要精确到每一分钟或每一秒的时间输入预约系统中时间往往以15 分钟或 30 分钟为档位如 09:00、09:15、09:30考勤、排班系统中时间通常以整点或半小时为单位收银、计费系统中为避免非法输入往往只允许选择固定间隔的时间点。默认情况下rsuite 的 TimePicker 会渲染 0~59 的所有分钟选项用户也可以直接在输入框里键入任意时间。此时就需要借助本文的核心方案——隐藏hide机制把不符合步长的选项从下拉列中过滤掉并关闭键盘输入从入口上杜绝脏数据。该演示示例即来自仓库文档 time-step.md完整代码如下import { TimePicker } from rsuite; const App () ( TimePicker hideMinutes{minute minute % 15 ! 0} editable{false} / / ); ReactDOM.render(App /, document.getElementById(root));这段代码的核心是两行配置hideMinutes{minute minute % 15 ! 0}凡是不能被 15 整除的分钟全部隐藏下拉列表里只会剩下 00、15、30、45 四个档位editable{false}选择器不再渲染为可键入的输入框用户只能通过点选下拉选项来取值避免绕过限制直接键入 09:07 这类时间。2. 三个 hide 系列属性小时、分钟、秒TimePicker 提供了三个同族的隐藏属性类型均为(unit: number, date: Date) boolean详见组件 Props 表 TimePicker Props属性签名作用hideHours(hour: number, date: Date) boolean返回true的小时选项被隐藏hideMinutes(minute: number, date: Date) boolean返回true的分钟选项被隐藏hideSeconds(second: number, date: Date) boolean返回true的秒选项被隐藏回调的第二个参数date是当前面板的日期对象这意味着你可以实现随日期变化的时间策略。例如工作日允许 09:00~18:00周末只允许 10:00~16:00TimePicker hideHours{hour { const day new Date().getDay(); const isWeekend day 0 || day 6; return isWeekend ? hour 10 || hour 16 : hour 9 || hour 18; }} hideMinutes{minute minute % 30 ! 0} /再比如限定秒的取值只能为 0 和 30每半秒档TimePicker formatHH:mm:ss hideSeconds{second second % 30 ! 0} /注意hideSeconds只有在format中包含秒如HH:mm:ss时才会渲染秒列否则秒列不会出现在下拉中。同理12 小时制下小时列的取值范围为 0~1124 小时制为 0~23详见下文源码中的getTimeLimits逻辑。3. hide隐藏与 shouldDisable禁用的区别TimePicker 还有另一组禁用属性shouldDisableHour、shouldDisableMinute、shouldDisableSecond。两者常常被混淆但语义截然不同官方文档在 disabled 示例 中同时展示了两种用法策略属性效果适用场景隐藏hideMinutes等选项不渲染下拉列表里根本不出现限定可选步长、收紧取值集合禁用shouldDisableMinute等选项仍然渲染但置灰且不可点击让用户看得到但选不了提示存在该时间对应的示例代码如下// 禁用选项置灰但仍显示 TimePicker defaultValue{new Date(2017-12-12 09:15:30)} shouldDisableHour{hour hour 8 || hour 18} shouldDisableMinute{minute minute % 15 ! 0} shouldDisableSecond{second second % 30 ! 0} / // 隐藏不符合条件的选项直接不渲染 TimePicker formatHH:mm:ss defaultValue{new Date(2017-12-12 09:15:30)} hideHours{hour hour 8 || hour 18} hideMinutes{minute minute % 15 ! 0} hideSeconds{second second % 30 ! 0} /判断两者哪个更合适主要看产品意图如果希望用户明确9 点到 18 点之外不能选用shouldDisable*展示置灰状态更友好如果希望界面清爽、只呈现合法选项比如固定 15 分钟档位用hide*更合适。注意在TimeDropdown源码中隐藏的判断优先级更高——被隐藏的选项根本不会进入渲染列表详见第 5 节而禁用项仍会渲染并带有cell-disabled样式和aria-disabled语义。4. editable 与 format把可选限定在步长之内hideMinutes只影响下拉列表但默认情况下 TimePicker 是可编辑输入框editable默认true用户依然可能通过键盘直接输入任意时间。因此实现严格的步长限制必须双管齐下TimePicker hideMinutes{minute minute % 15 ! 0} editable{false} /editable{false}根据 Props 表editable默认true关闭后组件不再渲染为可键入的 Input只保留触发按钮与下拉面板用户只能从下拉中选择从而保证最终取值一定落在合法档位上与之配套的format默认HH:mm控制输入框展示格式。例如要显示秒可设为HH:mm:ss要使用 12 小时制可结合showMeridiem设为hh:mm aa见 meridiem 示例。// 24 小时制 TimePicker formatHH:mm / // 12 小时制带 AM/PM TimePicker formathh:mm aa showMeridiem /showMeridiem开启后下拉面板会额外渲染一列 AM/PM 选项源码见第 5 节的renderMeridiemColumn且小时列的取值逻辑会自动换算AM/PM 模式下点击 PM 的小时会在内部加上 12。5. 源码级原理解析TimeDropdown 如何过滤选项理解了用法之后我们深入 TimeDropdown 实现 看看选项过滤与渲染的真实链路。TimePicker 本身在 TimePicker.tsx 中是对DatePicker的轻量封装默认format取 locale 的shortTimeFormat并内置了Now快捷项时间面板则交由Calendar下的TimeDropdown渲染。5.1 列的渲染与 hide 过滤renderColumnTimeDropdown.tsx#L99-L145是核心。关键逻辑如下const { start, end } getTimeLimits(showMeridiem)[type]; const items: React.ReactElement[] []; const hideFunc props[camelCase(hide_${type})]; const disabledFunc props[camelCase(disabled_${type})]; for (let i start; i end; i 1) { if (!hideFunc?.(i, plainDate)) { const disabled disabledFunc?.(i, plainDate); // 渲染 li 选项禁用时带 cell-disabled 样式并取消 onClick } }几点可以确认的实现事实hideFunc/disabledFunc通过camelCase(hide_ type)动态取得因此hideHours、hideMinutes、hideSeconds三个属性共用同一套渲染管线getTimeLimits(showMeridiem)决定遍历范围24 小时制下小时为 0~23开启showMeridiem后小时变为 0~11分钟、秒始终为 0~59只有!hideFunc?.(i, plainDate)为真的选项才会被 push 进列表回调的第二个参数是plainDate{ year, month, day }结构即随日期过滤能力的来源禁用项disabledFunc返回true仍会被渲染但打上cell-disabled类并设置aria-disabled且onClick被移除TimeColumn.tsx 将其放入带自定义滚动条的ScrollView列中。5.2 选中后的时间合成handleClickTimeDropdown.tsx#L50-L70在用户点击某一列时读取当前时钟时间getClockTime({ format, date, showMeridiem })仅替换被点击的单位其余单位保持不变若处于 PM 且点击小时还会自动12换算为 24 小时制内部值最后通过onChangeTime回传给日历上下文。5.3 当前选中项自动滚动TimeDropdown.tsx#L40-L46 使用useEffect在面板打开时调用scrollToTime把当前选中时间滚动到可见区域避免用户每次都要手动滚动长列表——当hideMinutes过滤掉大量选项后这一行为依然生效。6. 从步长出发的完整配置参考结合官方 Props 表见 en-US index 与 zh-CN indexTimePicker 的完整属性如下其中与步长/取值约束直接相关的已在前文展开属性类型默认值描述appearancedefault \| subtle(default)选择器外观blockboolean撑满整行caretAsElementType自定义右侧箭头图标组件cleanableboolean(true)是否允许清除已选值containerHTMLElement \| (() HTMLElement)设置渲染容器defaultOpenboolean默认是否展开defaultValueDate默认值非受控disabledboolean禁用整个组件editableboolean(true)是否渲染为可键盘输入的 Inputformatstring(HH:mm)输入框中的日期格式hideHours(hour, date) boolean隐藏指定小时选项hideMinutes(minute, date) boolean隐藏指定分钟选项hideSeconds(second, date) boolean隐藏指定秒选项labelReactNode触发按钮开头显示的标签loadingboolean(false)是否显示加载中指示器localeDateTimeFormats本地化设置参见仓库 locales 目录 中的DateTimeFormats配置onChange(date: Date) void值变化回调onClean(event) void清除值回调onClose/onOpen() void关闭 / 打开回调onEnter/onEntering/onEntered/onExit/onExiting/onExited() void过渡动画各阶段回调onOk(date, event) void点击确定回调onSelect(date: Date) void选中时间回调onShortcutClick(shortcut, event) void点击快捷项回调openboolean是否展开受控placeholderstring无值时的占位内容placementPlacement(bottomStart)浮层显示位置preventOverflowboolean防止浮层溢出rangesRange[]快捷项配置默认内置NowrenderValue(date, format) string自定义渲染值responsiveboolean(true)超小屏幕上浮层是否显示为全宽 DrawershouldDisableHour/shouldDisableMinute/shouldDisableSecond(unit, date) boolean禁用小时 / 分钟 / 秒showMeridiemboolean12 小时制AM/PMsizelg \| md \| sm \| xs(md)组件尺寸valueDate当前值受控其中ranges的类型定义在 src/DatePicker/types.ts 对应的DateOptionPreset中TimePicker源码 TimePicker.tsx 默认注入了一个label: locale.now, value: () new Date()的现在快捷项。6.1 受控与非受控defaultValue对应非受控用法valueonChange对应受控用法官方 controlled 示例 有完整演示。实现步长选择时通常配合受控或非受控之一即可若需在业务层进一步校验取值可在onChange中做二次判断。6.2 响应式与可访问性响应式默认responsive{true}在超小屏幕上浮层会显示为全宽 Drawer当 TimePicker 已位于 Modal 或 Drawer 内部时建议显式设置responsive{false}以保持定位浮层、避免嵌套遮罩见主文档 Responsive 章节。可访问性TimePicker 默认继承 DateInput 的 ARIA 属性值无效时input上添加aria-invalidtrue设置label后aria-labelledby会同时添加到input与dialog元素组件具备aria-haspopupdialog标识交互式弹层。在下拉面板内每个时间选项都带有roleoption、aria-selected与aria-disabled源码见 TimeDropdown.tsx#L116-L124隐藏与禁用状态均能被读屏器正确感知。7. 组合实战一个15 分钟档位 12 小时制的完整示例把前文知识组合起来实现一个带 AM/PM、分钟固定 15 分钟档、且不可手动输入的预约时间选择器import { TimePicker } from rsuite; const App () ( TimePicker formathh:mm aa showMeridiem hideMinutes{minute minute % 15 ! 0} editable{false} placeholder选择预约时间 onChange{date console.log(selected:, date)} / ); ReactDOM.render(App /, document.getElementById(root));formathh:mm aashowMeridiem12 小时制展示带 AM/PM 列hideMinutes分钟只保留 00 / 15 / 30 / 45editable{false}杜绝键盘输入非档位时间onChange在业务层拿到最终合法时间可直接用于提交。如需更复杂的步长规则例如每 20 分钟、每 30 分钟、或仅在特定日期范围内开放特定档位只需把hideMinutes的回调逻辑替换为对应的取模或日期判断即可其余行为由 TimePicker 内部渲染管线统一处理。8. 小结时间步长的本质是过滤用hideMinutes以及hideHours/hideSeconds把不符合步长的选项从渲染列表中去掉配合editable{false}关闭自由输入即可从数据入口保证取值的规范性隐藏 vs 禁用hide*不渲染选项适合收紧取值集合shouldDisable*渲染但置灰适合传达存在但不可用的信息两者都支持(unit, date)双参数回调可实现随日期变化的动态策略源码层面选项过滤发生在TimeDropdown的renderColumn循环中隐藏优先级高于禁用列范围由getTimeLimits依据 12/24 小时制决定点击合成时间由handleClick完成——理解这条链路后你可以放心定制各类时间粒度需求配套能力format控制展示格式、showMeridiem切换 12 小时制、responsive处理移动端弹层形态、ARIA 属性保障无障碍体验让时间选择既严格又易用。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐rsuite TimeRangePicker 时间步进配置实战用 hideMinutes / hideHours / hideSeconds 实现自定义时间粒度选择rsuite TimeRangePicker 时间步进配置实战用 hideMinutes / hideHours / hideSeconds 实现自定义时间粒前端UI组件ng-zorro-antd TimePicker 步长选项全解析通过 nzHourStep / nzMinuteStep / nzSecondStep 控制时分秒可选间隔ng zorro antd TimePicker 步长选项全解析通过 nzHourStep / nzMinuteStep / nzSecondStep 控制时UI组件前端SukiUI TimePicker 时间选择控件实战指南基于 AvaloniaUI 的时分秒选择与主题定制SukiUI TimePicker 时间选择控件实战指南基于 AvaloniaUI 的时分秒选择与主题定制 TimePicker 是 SukiUI 主题库中用UI组件桌面应用上一篇CANN/opbase日志接口文档下一篇如何快速选对 Mac Mouse Fix 的安装方式两种方式完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
