v4.2.12

TimeInput

Capture time or time range from user
Import
Source
View source code
Docs
Edit this page
Package
@mantine/dates

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"
      amLabel="am"
      pmLabel="pm"
      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" secondsLabel="Seconds" />
Go back
Month – @mantine/dates
Up next
Dropzone – @mantine/dropzone
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter