> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/time-range-picker.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt.

# TimeRangePicker

Choose a start and end time.

## Basic usage


09:00 ~ 18:00

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/time-range-picker/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>
  );
}
```

Expand code

## More examples


12-hour clock with secondsAllow an overnight range

advanced.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/time-range-picker/advanced.tsx"
import { Space, Text, TimeRangePicker } from '@ifhover/leaf-ui';

export function TimeRangePickerOptions() {
  return (
    <Space direction="vertical" align="stretch">
      <Text tone="muted">12-hour clock with seconds</Text>
      <TimeRangePicker use12Hours showSeconds defaultValue={['09:30:00', '17:45:00']} />
      <Text tone="muted">Allow an overnight range</Text>
      <TimeRangePicker allowOvernight defaultValue={['22:00', '06:00']} />
    </Space>
  );
}
```

Expand code

## Usage

Confirm to submit the draft. Type 09:00 \~ 18:00 and press Enter. allowOvernight allows an earlier end time to represent the following day.

## Types

Import these types for data, callbacks and refs.

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

The exported `TimeRange` type is `readonly [string, string]`, using 24-hour time strings.

## Restrict available times


Business hours for both endpoints

capabilities.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/time-range-picker/capabilities.tsx"
import { Space, Text, TimeRangePicker } from '@ifhover/leaf-ui';

export function Capabilities() {
  return (
    <Space direction="vertical" align="stretch">
      <Text>{'Business hours for both endpoints'}</Text>
      <TimeRangePicker
        defaultValue={['09:00', '17:30']}
        disabledTime={(time) => time.hour < 9 || time.hour > 18}
        use12Hours
        minuteStep={15}
      />
    </Space>
  );
}
```

Expand code

## TimeRangePickerProps API

| Property            | Type                                                                                                                                                                 | Default | Description                                                                        |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------- |
| `popupPlacement`    | `'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | —       | Placement relative to the trigger.                                                 |
| `popupClassName`    | `string`                                                                                                                                                             | —       | Custom class for the popup.                                                        |
| `popupStyle`        | `CSSProperties`                                                                                                                                                      | —       | Custom popup styles.                                                               |
| `popupRender`       | `(content: React.ReactNode) => React.ReactNode`                                                                                                                      | —       | Wrap or extend popup content; retain the supplied content to preserve interaction. |
| `getPopupContainer` | `() => Element \| DocumentFragment`                                                                                                                                  | —       | Return a popup container, including a ShadowRoot.                                  |
| `size`              | `'sm' \| 'md' \| 'lg'`                                                                                                                                               | `'md'`  | Size or spacing preset                                                             |
| `status`            | `'error' \| 'warning'`                                                                                                                                               | —       | Display state                                                                      |
| `allowClear`        | `boolean`                                                                                                                                                            | `true`  | Show the clear button                                                              |
| `inputReadOnly`     | `boolean`                                                                                                                                                            | —       | Disable typing while retaining panel selection.                                    |
| `open`              | `boolean`                                                                                                                                                            | —       | Control whether the panel is open.                                                 |
| `defaultOpen`       | `boolean`                                                                                                                                                            | —       | Initial open state.                                                                |
| `value`             | `readonly [string, string] \| null`                                                                                                                                  | —       | Controlled value                                                                   |
| `defaultValue`      | `readonly [string, string] \| null`                                                                                                                                  | `null`  | Initial value, restored by uncontrolled form resets                                |
| `onChange`          | `(value: readonly [string, string] \| null) => void`                                                                                                                 | —       | Value change callback                                                              |
| `onOpenChange`      | `(open: boolean) => void`                                                                                                                                            | —       | Open state changes                                                                 |
| `showSeconds`       | `boolean`                                                                                                                                                            | `false` | Show seconds                                                                       |
| `use12Hours`        | `boolean`                                                                                                                                                            | `false` | 12-hour display                                                                    |
| `minuteStep`        | `number`                                                                                                                                                             | `5`     | Minute interval                                                                    |
| `secondStep`        | `number`                                                                                                                                                             | `1`     | Second interval                                                                    |
| `allowOvernight`    | `boolean`                                                                                                                                                            | `false` | Allow overnight ranges                                                             |
| `disabledTime`      | `(parts: `[`TimeParts`](https://ifhover.github.io/leaf-ui/en/components/time-picker.md#timeparts)`, position: 'start' \| 'end') => boolean`                          | —       | Restrict start and end times                                                       |

## TimeParts API

| Property | Type     | Default  | Description  |
| -------- | -------- | -------- | ------------ |
| `hour`   | `number` | Required | Hour, 0–23   |
| `minute` | `number` | Required | Minute, 0–59 |
| `second` | `number` | Required | Set second   |