TimeRangeInput
Capture time range from user
Import
Source
Docs
Package
Usage
:
–:
import { useState } from 'react';import dayjs from 'dayjs';import { TimeRangeInput } from '@mantine/dates';function Demo() {const now = new Date();const then = dayjs(now).add(30, 'minutes').toDate();const [value, setValue] = useState([now, then]);return <TimeRangeInput label="Appointment time" value={value} onChange={setValue} />;}
With seconds
:
:
–:
:
<TimeRangeInput withSeconds />
TimeRangeInput props
TimeRangeInput component uses the same props as TimeInput component,
With differences in value, onChange, defaultValue and some additional props like labelSeparator.
Server side rendering
Component uses use-id hook to generate unique ids and aria- attributes,
provide static id prop to prevent props mismatch:
<TimeRangeInput /> // -> random id generated both on client and server, props mismatch warning<TimeRangeInput id="my-time-range-input" /> // -> id is static, no mismatches
Accessibility and usability
Provide hours, minutes and seconds labels to make inputs visible to screen reader:
<TimeRangeInput hoursLabel="Hours" minutesLabel="Minutes" seconds="Seconds" />
Built by Vitaly Rtishchev and these awesome people