Semi Design 时间选择器组件深度解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00319/article/details/148419128

Semi Design 时间选择器组件深度解析

semi-design 🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 2800+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click 项目地址: https://gitcode.com/gh_mirrors/se/semi-design

什么是时间选择器

时间选择器（TimePicker）是前端开发中常用的表单控件组件，它允许用户通过可视化界面选择特定的时间点或时间段。Semi Design 提供了一套优雅且功能丰富的时间选择器组件，能够满足各种业务场景下的时间选择需求。

基础用法

组件引入

首先需要在项目中引入 TimePicker 组件：

import { TimePicker } from '@douyinfe/semi-ui';

基本示例

最简单的用法是直接渲染 TimePicker 组件：

function Demo() {
    return <TimePicker />;
}

这样会渲染一个默认格式为"HH:mm:ss"的时间选择器，点击输入框会弹出时间选择面板。

核心功能详解

1. 时间格式控制

TimePicker 支持通过 format 属性自定义时间显示格式：

<TimePicker format={'HH:mm'} defaultValue={'10:24'}/>

格式字符串遵循 date-fns 的格式规范，常用的格式标记包括：

HH：24小时制的小时
hh：12小时制的小时
mm：分钟
ss：秒
a：上午/下午标记

2. 受控与非受控模式

与 React 表单组件类似，TimePicker 支持受控和非受控两种模式：

非受控模式（推荐在简单场景使用）：

<TimePicker defaultValue={'12:00:00'} />

受控模式（需要精确控制组件状态时使用）：

function ControlledDemo() {
    const [time, setTime] = useState(null);
    
    return (
        <TimePicker 
            value={time}
            onChange={setTime}
        />
    );
}

3. 时间范围选择

Semi Design 的时间选择器支持选择时间范围：

<TimePicker 
    type="timeRange" 
    defaultValue={["10:23:15", "12:38:32"]}
/>

4. 12小时制支持

通过 use12Hours 属性可以切换为12小时制显示：

<TimePicker use12Hours format="a h:mm" />

高级功能

1. 自定义步长

可以设置小时、分钟、秒的选择步长：

<TimePicker 
    minuteStep={15} 
    secondStep={10} 
/>

2. 禁用特定时间

通过以下回调函数可以禁用特定时间选项：

<TimePicker
    disabledHours={() => [0, 1, 2]} // 禁用0-2点
    disabledMinutes={(hour) => hour === 9 ? [30, 45] : []} // 9点时禁用30和45分
/>

3. 自定义面板

可以自定义面板的头部和底部内容：

<TimePicker
    panelHeader={'选择时间'}
    panelFooter={<Button onClick={closePanel}>确认</Button>}
/>

4. 无限滚动效果

从V2.22.0版本开始，默认滚动模式改为普通模式，如需恢复无限滚动效果：

<TimePicker scrollItemProps={{ mode: "wheel", cycled: true }}/>

样式与交互定制

1. 自定义触发器

可以完全自定义触发器的渲染：

<TimePicker
    triggerRender={({ placeholder }) => (
        <CustomTrigger>
            {time ? format(time) : placeholder}
        </CustomTrigger>
    )}
/>

2. 时区支持

通过 ConfigProvider 可以设置全局时区：

<ConfigProvider timeZone="GMT+08:00">
    <TimePicker defaultValue={timestamp} />
</ConfigProvider>

最佳实践

表单集成：TimePicker 可以无缝集成到 Form 组件中，支持表单验证等功能
移动端适配：设置 inputReadOnly 可避免在移动设备上弹出虚拟键盘
性能优化：大数据量时考虑使用 hideDisabledOptions 提升渲染性能

常见问题

格式不匹配：确保传入的 format 与 defaultValue 格式一致
时区问题：跨时区应用务必使用 ConfigProvider 设置正确时区
禁用状态：disabled 属性会禁用整个组件，而 disabledHours 等只禁用特定选项

Semi Design 的时间选择器组件提供了丰富的功能和灵活的配置选项，能够满足绝大多数业务场景的需求。通过合理使用这些功能，可以构建出既美观又实用的时间选择交互。

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