TimeRangeInput

Capture time range from user
Import

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" />
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback