Captures time value from the user
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.
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:
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.
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.
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 .
Set format="12h" to use 12-hour format. Note that onChange is called only when all inputs are filled, including the am/pm input.
To change am/pm labels, use the amPmLabels prop. Example of changing labels to Hindi:
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.
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:
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.
To group presets use an array of objects with label and values keys:
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:
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:
Try pasting time in 12h format in any input. For example, try pasting 12:34 PM or 8:56:45 AM
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.
The clearSectionMode prop determines how the clear button and rightSection are rendered:
TimePicker component supports Input and Input.Wrapper component features and all div element props. The TimePicker documentation does not include all features supported by the component – see the Input documentation to learn about all available features.
Use hoursRef , minutesRef , secondsRef and amPmRef props to get refs of inner inputs:
onFocus and onBlur events are called when the first input is focused and the last input is blurred:
Set aria labels for hours, minutes, seconds and am/pm inputs and clear button with corresponding props:
Keyboard interactions: