TimeRangePicker

Choose a start and end time.

Basic usage

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>
  );
}

More examples

12-hour clock with seconds

Allow an overnight range

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>
  );
}

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.

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

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>
  );
}

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, 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

#TimeRangePicker

#Basic usage

#More examples

#Usage

#Types

#Restrict available times

#TimeRangePickerProps API

#TimeParts API