Ant Design时间选择面板：TimePicker与时间范围选择
项目地址: https://gitcode.com/gh_mirrors/antde/ant-design 概述
时间选择是Web应用中常见的功能需求，Ant Design提供了强大的时间选择解决方案。TimePicker组件允许用户输入或选择特定时间，而RangePicker则支持选择时间范围。这两个组件都基于Ant Design的设计理念，提供了丰富的功能和良好的用户体验。
官方文档：components/time-picker/index.zh-CN.md
何时使用
当用户需要输入一个时间或时间范围时，可以使用TimePicker或RangePicker组件。典型的应用场景包括：
- 日程安排中的时间选择
- 数据筛选时的时间范围指定
- 表单中的时间输入项
基本用法
TimePicker基础使用
TimePicker组件的基本用法非常简单，只需导入组件并在页面中使用即可：
import { TimePicker } from 'antd';
import dayjs from 'dayjs';
function BasicTimePicker() {
return <TimePicker defaultValue={dayjs('12:00:00', 'HH:mm:ss')} />;
}
export default BasicTimePicker;
时间范围选择
RangePicker允许用户选择一个时间范围，使用方式与TimePicker类似：
import { TimePicker } from 'antd';
function TimeRangePicker() {
return <TimePicker.RangePicker />;
}
export default TimeRangePicker;
主要功能和属性
时间格式设置
可以通过format属性自定义时间的显示格式：
<TimePicker format="HH:mm" />
常用的时间格式包括：
HH:mm:ss：24小时制，带秒（默认）HH:mm：24小时制，不带秒h:mm:ss a：12小时制，带秒和AM/PM标识
时间间隔设置
可以通过hourStep、minuteStep和secondStep属性设置时间选择的间隔：
<TimePicker
hourStep={2}
minuteStep={15}
secondStep={30}
/>
这段代码将时间选择器的小时间隔设置为2小时，分钟间隔为15分钟，秒间隔为30秒。
禁用时间
通过disabledTime属性可以禁用某些特定时间：
<TimePicker
disabledTime={() => ({
disabledHours: () => [0, 1, 2, 3, 4, 5, 6, 7, 22, 23],
disabledMinutes: (hour) => {
if (hour === 8) return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
return [];
},
})}
/>
三种大小
TimePicker提供了三种大小的选择：large、middle和small：
<>
<TimePicker size="large" />
<TimePicker size="middle" />
<TimePicker size="small" />
</>
12小时制
设置use12Hours属性为true可以切换到12小时制：
<TimePicker use12Hours />
高级用法
受控组件
TimePicker可以作为受控组件使用，通过value和onChange属性控制组件的值：
import { useState } from 'react';
import { TimePicker } from 'antd';
import dayjs from 'dayjs';
function ControlledTimePicker() {
const [time, setTime] = useState(dayjs('12:00:00', 'HH:mm:ss'));
const handleTimeChange = (value) => {
setTime(value);
console.log('Selected time:', value?.format('HH:mm:ss'));
};
return <TimePicker value={time} onChange={handleTimeChange} />;
}
export default ControlledTimePicker;
自定义弹出面板
可以通过renderExtraFooter属性在时间选择面板底部添加自定义内容：
<TimePicker
renderExtraFooter={() => (
<div style={{ textAlign: 'center' }}>
<button onClick={() => console.log('Custom button clicked')}>
自定义按钮
</button>
</div>
)}
/>
禁用状态
可以通过disabled属性禁用整个组件，或通过disabledHours、disabledMinutes和disabledSeconds禁用特定时间：
<TimePicker disabled />
源码解析
TimePicker组件的核心代码位于components/time-picker/index.tsx文件中。该组件实际上是对DatePicker组件的二次封装：
const { TimePicker: InternalTimePicker, RangePicker: InternalRangePicker } = DatePicker;
const RangePicker = React.forwardRef<any, TimeRangePickerProps>((props, ref) => (
<InternalRangePicker {...props} picker="time" mode={undefined} ref={ref} />
));
从这段代码可以看出，TimePicker.RangePicker实际上是通过设置DatePicker的picker属性为"time"来实现的。
常见问题和解决方案
如何在TimePicker中使用自定义日期库？
Ant Design默认使用dayjs作为日期处理库，但也支持其他库如Moment.js。详细使用方法可以参考官方文档：如何在 TimePicker 中使用自定义日期库
如何设置默认时间？
可以使用defaultValue属性设置默认时间，需要配合dayjs库使用：
import dayjs from 'dayjs';
<TimePicker defaultValue={dayjs('12:00:00', 'HH:mm:ss')} />
如何获取选择的时间值？
可以通过onChange回调函数获取选择的时间值：
<TimePicker onChange={(time, timeString) => console.log(timeString)} />
总结
Ant Design的TimePicker组件提供了强大而灵活的时间选择功能，无论是简单的时间输入还是复杂的时间范围选择，都能满足各种业务需求。通过本文介绍的各种属性和用法，相信您已经能够熟练使用TimePicker组件来提升您的应用体验。
要了解更多关于TimePicker的详细信息，可以查阅官方文档：components/time-picker/index.zh-CN.md
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
