react DatePicker format="HH:mm" 禁用当前时间之前的时分

在使用 React 的 `DatePicker` 组件时，若希望设置时间格式为 `HH:mm` 并禁用当前时间之前的选项，可以通过配置 `showTime` 和 `disabledTime` 属性实现。Ant Design 的 `DatePicker` 支持通过 `disabledTime` 提供一个函数来动态禁用特定的时间段，而 `showTime` 则用于启用时间选择功能并指定格式。为了实现禁用逻辑，需要定义一个辅助函数 `range` 来生成小时和分钟的范围数组。该函数负责返回从起始值到结束值的整数列表，以供 `disabledTime` 使用来禁用过去的时间点[^1]。 ```jsx import { DatePicker } from 'antd'; import moment from 'moment'; const range = (start, end) => { const result = []; for (let i = start; i <= end; i++) { result.push(i); } return result; }; const disabledDateTime = current => { if (current && current.format('YYYY-MM-DD') === moment().format('YYYY-MM-DD')) { return { disabledHours: () => range(0, moment().hours()), disabledMinutes: selectedHour => { if (selectedHour === moment().hours()) { return range(0, moment().minutes()); } return []; }, disabledSeconds: (selectedHour, selectedMinute) => { if (selectedHour === moment().hours() && selectedMinute === moment().minutes()) { return range(0, moment().seconds()); } return []; }, }; } return {}; }; function App() { return ( <DatePicker showTime={{ format: 'HH:mm' }} format="YYYY-MM-DD HH:mm" disabledTime={disabledDateTime} /> ); } ``` 此实现确保了用户只能选择当前时间之后的时间点，并且时间格式限制为 `HH:mm`。通过 `moment()` 获取当前时间，并结合 `range` 函数动态生成需要禁用的小时和分钟列表。 ###

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

下一篇 vue3+element plus Python flask 实现医生患者管理员登录，个用户功能不同