TimePicker value format and onChange behavior
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 represents no value. The onChange function is called only when the entered value is valid. onChange is called with an empty string when all inputs are empty. When all inputs are filled, onChange is called with the complete time. For example, if withSeconds prop is set and the user entered 12:34:56, onChange is called with 12:34:56. If the user entered 12:34 with withSeconds set, onChange will not be called because the seconds value is missing.
TimePicker withSeconds prop
Set the withSeconds prop to enable seconds input. When this prop is used, onChange is not called until all inputs are filled – it is not possible to enter only hours and minutes.
TimePicker 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.
TimePicker minHoursDigits prop
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.
TimePicker 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.
TimePicker amPmLabels prop
Use the amPmLabels prop to change am/pm labels. This prop accepts custom labels for example to change labels to other languages.
TimePicker min and max props
Set the min and max props to limit the available time range.
TimePicker withDropdown prop
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.
TimePicker step props
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.
TimePicker popoverProps
Use popoverProps to pass props down to the underlying Popover component to control dropdown behavior such as opened state.
TimePicker presets prop
Define time presets with the 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.
TimePicker grouped presets
To group presets use an array of objects with label and values keys.
getTimeRange function
The getTimeRange function is exported from @mantine/dates package. It generates a range of time values. The function accepts start, end time and interval parameters in hh:mm:ss format.
TimePicker closeDropdownOnPresetSelect prop
Set closeDropdownOnPresetSelect prop to close the dropdown once a value is selected from the presets list.
TimePicker dropdown position
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.
TimePicker dropdown width via comboboxProps
To change dropdown width, set width prop in comboboxProps. By default, dropdown width is adjusted to fit all content.
TimePicker pasteSplit prop
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.
TimePicker clearable prop
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.
TimePicker ref access to inner inputs
Use hoursRef, minutesRef, secondsRef and amPmRef props to get refs of inner inputs. hoursRef, minutesRef, and secondsRef return HTMLInputElement, while amPmRef returns HTMLSelectElement.
TimePicker onFocus and onBlur events
onFocus and onBlur events are called when the first input is focused and the last input is blurred respectively.
TimePicker accessibility props
Set aria labels for hours, minutes, seconds and am/pm inputs and clear button with corresponding props: hoursInputLabel, minutesInputLabel, secondsInputLabel, amPmInputLabel, and clearButtonProps with aria-label.
TimePicker keyboard interactions
ArrowDown decrements current value by step. ArrowUp increments current value by step. Home sets current value to min possible value. End sets current value to max possible value. Backspace clears current value. ArrowRight moves focus to the next input. ArrowLeft moves focus to the previous input.
TimePicker controlled example
Example of using TimePicker with controlled value state:
import { useState } from 'react';
import { TimePicker } from '@mantine/dates';
function Demo() {
const [value, setValue] = useState('');
return <TimePicker value={value} onChange={setValue} />;
}
TimePicker ref access example
Example of accessing inner input refs:
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}
/>
);
}
TimePicker onFocus and onBlur example
Example of using onFocus and onBlur events:
import { TimePicker } from '@mantine/dates';
function Demo() {
return (
<TimePicker
onFocus={() => console.log('Focused')}
onBlur={() => console.log('Blurred')}
/>
);
}
TimePicker accessibility example
Example of setting accessibility labels:
import { TimePicker } from '@mantine/dates';
function Demo() {
return (
<TimePicker
hoursInputLabel="Hours"
minutesInputLabel="Minutes"
secondsInputLabel="Seconds"
amPmInputLabel="AM/PM"
clearButtonProps={{ 'aria-label': 'Clear time' }}
/>
);
}