引入时间选择器组件
在使用 Element-React 的时间选择器组件之前，你需要确保已经正确安装并引入了 Element-React。如果尚未完成这些步骤，请先按照官方文档的指引进行安装和配置。
npm install element-react
在你的项目入口文件或需要使用时间选择器的文件中，引入所需组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ----------------
-------- ----- -
------ -
-----
----------- --
------
--
-
------ ------- ----基本使用
时间选择器的基本用法非常简单。你可以通过直接渲染 <TimePicker /> 来显示一个基本的时间选择器。
控制时间选择器的值
时间选择器支持通过 value 属性来控制其显示的当前时间。该属性接受一个 JavaScript Date 对象作为值。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ---------- - ---- ----------------
-------- ----- -
----- ------ -------- - ------------ --------
------ -
-----
----------- ------------ ------------------- -- ----------------- --
------
--
-
------ ------- ----在这个例子中，我们使用了 React 的状态管理功能（useState）来存储时间选择器的当前值，并通过 onChange 回调函数更新这个状态。
时间格式化
默认情况下，时间选择器会显示为 24 小时制。你可以通过设置 format 属性来自定义时间格式。例如，如果你希望时间显示为 12 小时制并带有 AM/PM 标识，可以这样设置：
<TimePicker format="hh:mm A" />
这里，“hh”代表小时，“mm”代表分钟，“A”则表示 AM 或 PM。
禁用部分时间
你可以通过 pickerOptions 属性来限制用户可以选择的时间范围。这可以通过设置 selectableRange 属性来实现，该属性接受一个字符串，该字符串描述了允许选择的时间范围。
<TimePicker
pickerOptions={{
selectableRange: '08:30:00 - 18:30:00'
}}
/>在这个例子中，用户只能从早上 8:30 到下午 6:30 之间选择时间。
自定义时间步长
默认情况下，时间选择器的小时和分钟间隔是固定的。你可以通过 step 属性来自定义时间步长，从而改变时间的选择精度。
<TimePicker step={{ hours: 1, minutes: 15 }} />在这个例子中，小时的步长为 1，而分钟的步长为 15 分钟。
时间选择器的其他配置选项
除了上述介绍的功能之外，时间选择器还提供了许多其他的配置选项，包括但不限于：
placeholder: 设置输入框的占位符文本。isDisabled: 如果设置为 true，则时间选择器将被禁用。clearable: 是否显示清除按钮，允许用户清空时间选择器的值。
这些选项可以根据具体需求进行调整，以满足不同的应用场景。
事件处理
时间选择器支持多种事件处理，包括 onChange, onClose, onOpen 等。这些事件可以用来执行一些特定的操作，比如记录日志、更新其他组件的状态等。
<TimePicker
onChange={(time) => console.log('Selected time:', time)}
onOpen={() => console.log('Picker opened')}
onClose={() => console.log('Picker closed')}
/>以上就是关于 Element-React 时间选择器的一个全面介绍。通过灵活运用这些功能，你可以创建出符合各种业务需求的时间选择控件。