Time Picker

import { TimePickerDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.TimePicker);

Usage

The TimePicker component is an alternative to TimeInput that offers more features. It supports 24-hour and 12-hour formats, a dropdown with hours, minutes and seconds, and more.

Controlled

The TimePicker component value is a string in hh:mm:ss or hh:mm 24-hour format (for example 18:34:55). An empty string is used to represent no value. The onChange function is called only when the entered value is valid. The input value is considered valid in the following cases:

All inputs are empty. In this case, onChange is called with an empty string.
All inputs are filled. For example, if the withSeconds prop is set and the user entered 12:34:56, onChange will be called with 12:34:56. But if the user entered 12:34, onChange will not be called because the seconds value is missing.

tsx

import { useState } from 'react';
import { TimePicker } from '@mantine/dates';

function Demo() {
  const [value, setValue] = useState('');
  return <TimePicker value={value} onChange={setValue} />;
}

With seconds

Set the withSeconds prop to enable seconds input. Note that if this prop is used, onChange is not called until all inputs are filled – it is not possible to enter only hours and minutes.

Duration type

Set type="duration" to allow entering durations that exceed 24 hours. In this mode, the hours field has no upper limit and the input width adjusts dynamically based on the entered value. The format prop is ignored (always 24h) and the dropdown is disabled.

Min hours digits

Use the minHoursDigits prop to set the minimum number of digits displayed in the hours input. This prop is only applicable when type="duration" is set. By default, the minimum is 2.

12-hour format

Set format="12h" to use 12-hour format. Note that onChange is called only when all inputs are filled, including the am/pm input.

Change am/pm labels

To change am/pm labels, use the amPmLabels prop. Example of changing labels to Hindi:

Min and max values

Set the min and max props to limit the available time range:

Set the withDropdown prop to display a dropdown with hours, minutes, seconds and am/pm selects. By default, the dropdown is visible when one of the inputs is focused.

Hours/minutes/seconds step

Use hoursStep, minutesStep and secondsStep props to control step for each input. These props are used to control value by which the input is incremented or decremented when up/down arrow keys are pressed and to generate corresponding values range in the dropdown.

Use popoverProps to pass props down to the underlying Popover component:

Time presets

You can define time presets with presets prop. Presets are displayed in the dropdown and can be selected by clicking on them. Time values for presets should be in hh:mm:ss or hh:mm 24-hour time format. Presets display value is generated based on format, amPmLabels and withSeconds props.

Time presets groups

To group presets use an array of objects with label and values keys:

Time presets range

If you need to generate a range of time values, use getTimeRange function exported from @mantine/dates package. The function accepts start, end time and interval in hh:mm:ss format.

Set closeDropdownOnPresetSelect prop to close the dropdown once a value is selected from the presets list:

By default, the dropdown is displayed below the input if there is enough space; otherwise it is displayed above the input. You can change this behavior by setting position and middlewares props, which are passed down to the underlying Popover component.

Example of dropdown that is always displayed above the input:

To change dropdown width, set width prop in comboboxProps. By default, dropdown width is adjusted to fit all content. Example of dropdown width set to the input width:

Paste events

By default, TimePicker handles only time in 24-hour format (for example 17:33:43 or 19:22) for paste events. With pasteSplit prop you can create a custom paste time parser:

Clearable

Set clearable prop to display a clear button in the right section of the input. The clear button is visible when at least one of the fields has value.

Disabled

Read only

Input props

Get refs of inner inputs

Use hoursRef, minutesRef, secondsRef and amPmRef props to get refs of inner inputs:

tsx

import { useRef } from 'react';
import { TimePicker } from '@mantine/dates';

function Demo() {
  const hoursRef = useRef<HTMLInputElement>(null);
  const minutesRef = useRef<HTMLInputElement>(null);
  const secondsRef = useRef<HTMLInputElement>(null);
  const amPmRef = useRef<HTMLSelectElement>(null);

  return (
    <TimePicker
      hoursRef={hoursRef}
      minutesRef={minutesRef}
      secondsRef={secondsRef}
      amPmRef={amPmRef}
    />
  );
}

onFocus and onBlur events

onFocus and onBlur events are called when the first input is focused and the last input is blurred:

tsx

import { TimePicker } from '@mantine/dates';

function Demo() {
  return (
    <TimePicker
      onFocus={() => console.log('Focused')}
      onBlur={() => console.log('Blurred')}
    />
  );
}

Accessibility

Set aria labels for hours, minutes, seconds and am/pm inputs and clear button with corresponding props:

tsx

import { TimePicker } from '@mantine/dates';

function Demo() {
  return (
    <TimePicker
      hoursInputLabel="Hours"
      minutesInputLabel="Minutes"
      secondsInputLabel="Seconds"
      amPmInputLabel="AM/PM"
      clearButtonProps={{ 'aria-label': 'Clear time' }}
    />
  );
}

Keyboard interactions: