TimeRangePicker 时间范围

选择一天内的起止时间。

基本用法

09:00 ~ 18:00

basic.tsx

import { Space, Text, TimeRangePicker } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function TimeRangePickerBasic() {
  const [value, setValue] = useState<import('@ifhover/leaf-ui').TimeRange | null>([
    '09:00',
    '18:00',
  ]);
  return (
    <Space direction="vertical" align="stretch">
      <TimeRangePicker value={value} onChange={setValue} />
      <output>
        <Text tone="muted">{value?.join(' ~ ') || '—'}</Text>
      </output>
    </Space>
  );
}

使用说明

点击确定后提交草稿。可输入 09:00 ~ 18:00 并按 Enter。allowOvernight 允许结束时间早于开始时间，表示次日结束。

类型

组装数据、定义回调和使用 ref 时，可以导入这些类型。

import type { TimeRangePickerProps, TimeRange, TimeParts } from '@ifhover/leaf-ui';

导出的 TimeRange 为 readonly [string, string]，使用 24 小时制时间字符串。

限制可选时间

开始与结束均限制在营业时间

capabilities.tsx

import { Space, Text, TimeRangePicker } from '@ifhover/leaf-ui';

export function Capabilities() {
  return (
    <Space direction="vertical" align="stretch">
      <Text>{'开始与结束均限制在营业时间'}</Text>
      <TimeRangePicker
        defaultValue={['09:00', '17:30']}
        disabledTime={(time) => time.hour < 9 || time.hour > 18}
        use12Hours
        minuteStep={15}
      />
    </Space>
  );
}

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, position: 'start' \| 'end') => boolean`	—	分别限制开始与结束时间

TimeParts API

属性	类型	默认值	说明
`hour`	`number`	必填	小时，0–23
`minute`	`number`	必填	分钟，0–59
`second`	`number`	必填	秒，0–59

#TimeRangePicker 时间范围

#基本用法

#更多用法

#使用说明

#类型

#限制可选时间

#TimeRangePickerProps API

#TimeParts API