TimeInput

Capture time or time range from user
Import

Usage

TimeInput component:

:
import { TimeInput } from '@mantine/dates';
function Demo() {
return <TimeInput label="What time is it now?" />;
}

TimeRangeInput component (supports the same props as TimeInput component):

:
:
import dayjs from 'dayjs';
import { useState } from 'react';
import { TimeRangeInput } from '@mantine/dates';
function Demo() {
const now = new Date();
const then = dayjs(now).add(30, 'minutes').toDate();
const [value, setValue] = useState<[Date, Date]>([now, then]);
return <TimeRangeInput label="Appointment time" value={value} onChange={setValue} clearable />;
}

Controlled

import { useState } from 'react';
import { TimeInput } from '@mantine/dates';
function Demo() {
const [value, onChange] = useState(new Date());
return <TimeInput value={value} onChange={onChange} />;
}

With seconds

To add seconds set withSeconds prop:

:
:
import { TimeInput } from '@mantine/dates';
function Demo() {
return <TimeInput label="What time is it now?" withSeconds defaultValue={new Date()} />;
}

12 hours format

:
import { TimeInput } from '@mantine/dates';
function Demo() {
return <TimeInput label="Pick time" format="12" defaultValue={new Date()} />;
}

Input props

Component supports all props from Input and InputWrapper components:

:
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
import { TimeInput } from '@mantine/dates';
function Demo() {
return (
<TimeInput
defaultValue={new Date()}
label="Pick time"
required
/>
);
}

With icon

You can use any React node as icon:

:
import { TimeInput } from '@mantine/dates';
import { Clock } from 'tabler-icons-react';
function Demo() {
return (
<TimeInput
label="Pick time"
placeholder="Pick time"
icon={<Clock size={16} />}
defaultValue={new Date()}
/>
);
}

Invalid state and error

:
:
It is not a valid time
// Error as boolean – red border color
<TimeInput error />
// Error as React node – red border color and message below input
<TimeInput error="It is not a valid time" />

Disabled state

:
:
import { TimeInput } from '@mantine/dates';
function Demo() {
return <TimeInput disabled />;
}

Get input ref

You can get hours input ref with ref prop:

import { useRef } from 'react';
import { TimeInput } from '@mantine/dates';
function Demo() {
const inputRef = useRef<HTMLInputElement>();
return <TimeInput ref={inputRef} />;
}

Accessibility

Provide hours, minutes and seconds labels to make inputs visible to screen reader:

<TimeInput hoursLabel="Hours" minutesLabel="Minutes" seconds="Seconds" />