> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb > Browser documentation: https://ifhover.github.io/leaf-ui/components/time-range-picker.html > For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt. # TimeRangePicker 时间范围 选择一天内的起止时间。 ## 基本用法 09:00 ~ 18:00 basic.tsx 复制代码 ```tsx lineNumbers file="../../src/examples/time-range-picker/basic.tsx" import { Space, Text, TimeRangePicker } from '@ifhover/leaf-ui'; import { useState } from 'react'; export function TimeRangePickerBasic() { const [value, setValue] = useState([ '09:00', '18:00', ]); return ( {value?.join(' ~ ') || '—'} ); } ``` 展开代码 ## 更多用法 12 小时制与秒允许跨过午夜 advanced.tsx 复制代码 ```tsx lineNumbers file="../../src/examples/time-range-picker/advanced.tsx" import { Space, Text, TimeRangePicker } from '@ifhover/leaf-ui'; export function TimeRangePickerOptions() { return ( 12 小时制与秒 允许跨过午夜 ); } ``` 展开代码 ## 使用说明 点击确定后提交草稿。可输入 09:00 \~ 18:00 并按 Enter。allowOvernight 允许结束时间早于开始时间，表示次日结束。 ## 类型 组装数据、定义回调和使用 ref 时，可以导入这些类型。 ```ts import type { TimeRangePickerProps, TimeRange, TimeParts } from '@ifhover/leaf-ui'; ``` 导出的 `TimeRange` 为 `readonly [string, string]`，使用 24 小时制时间字符串。 ## 限制可选时间 开始与结束均限制在营业时间 capabilities.tsx 复制代码 ```tsx lineNumbers file="../../src/examples/time-range-picker/capabilities.tsx" import { Space, Text, TimeRangePicker } from '@ifhover/leaf-ui'; export function Capabilities() { return ( {'开始与结束均限制在营业时间'} time.hour < 9 || time.hour > 18} use12Hours minuteStep={15} /> ); } ``` 展开代码 ## TimeRangePickerProps API | 属性 | 类型 | 默认值 | 说明 | | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------- | | `popupPlacement` | `'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | — | 浮层相对触发控件的位置。 | | `popupClassName` | `string` | — | 浮层的自定义类名。 | | `popupStyle` | `CSSProperties` | — | 浮层的自定义样式。 | | `popupRender` | `(content: React.ReactNode) => React.ReactNode` | — | 包装或补充面板内容，保留传入的内容以维持交互。 | | `getPopupContainer` | `() => Element \| DocumentFragment` | — | 返回浮层的挂载容器，也可返回 ShadowRoot。 | | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | 尺寸或间距预设 | | `status` | `'error' \| 'warning'` | — | 显示状态 | | `allowClear` | `boolean` | `true` | 显示清除按钮 | | `inputReadOnly` | `boolean` | — | 只禁止手动输入，仍可在面板中选择。 | | `open` | `boolean` | — | 控制面板是否展开。 | | `defaultOpen` | `boolean` | — | 面板初始展开状态。 | | `value` | `readonly [string, string] \| null` | — | 受控值 | | `defaultValue` | `readonly [string, string] \| null` | `null` | 初始值；非受控表单 reset 时恢复 | | `onChange` | `(value: readonly [string, string] \| null) => void` | — | 值变化回调 | | `onOpenChange` | `(open: boolean) => void` | — | 展开状态变化 | | `showSeconds` | `boolean` | `false` | 显示秒 | | `use12Hours` | `boolean` | `false` | 12 小时制显示 | | `minuteStep` | `number` | `5` | 分钟选项间隔 | | `secondStep` | `number` | `1` | 秒选项间隔 | | `allowOvernight` | `boolean` | `false` | 允许跨过午夜的时间范围 | | `disabledTime` | `(parts: `[`TimeParts`](https://ifhover.github.io/leaf-ui/components/time-picker.md#timeparts)`, position: 'start' \| 'end') => boolean` | — | 分别限制开始与结束时间 | ## TimeParts API | 属性 | 类型 | 默认值 | 说明 | | -------- | -------- | --- | ------- | | `hour` | `number` | 必填 | 小时，0–23 | | `minute` | `number` | 必填 | 分钟，0–59 | | `second` | `number` | 必填 | 秒，0–59 |