useMuiXDesktopTimePickerAdapter
Returns adapter props for building custom MUI X DesktopTimePicker integrations with React Hook Form, where users mostly type times into the field.
useMuiXDesktopTimePickerAdapter connects a field to React Hook Form and returns props you spread onto MUI X's DesktopTimePicker. It's what MuiXDesktopTimePickerElement uses internally.
Use the hook instead of the element when you build your own desktop time field, for example one that always blocks certain hours. Pick this variant over useMuiXTimePickerAdapter when you want the desktop popover on every device, including touch screens.
Import
import { useMuiXDesktopTimePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";Usage
This MeetingTimeField rejects any time in the 12:00 hour. The popover greys that hour out, but you can still type 12:30 PM into the field and submit to see the error.
"use client";import type { Dayjs } from "dayjs";import Stack from "@mui/material/Stack";import { DesktopTimePicker, LocalizationProvider } from "@mui/x-date-pickers";import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";import { useMuiXDesktopTimePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";import { type Control, useForm } from "react-hook-form";type FormValues = { meeting: Dayjs | null };// The 12:00 hour is lunch. The clock greys it out, and a typed 12:xx time// fails validation with the "shouldDisableTime-hours" message.function MeetingTimeField({ control }: { control: Control<FormValues> }) { const adapter = useMuiXDesktopTimePickerAdapter<Dayjs, FormValues, "meeting", HTMLDivElement>({ control, name: "meeting", required: true, composeHelperText: true, shouldDisableTime: (value, view) => view === "hours" && value.hour() === 12, messages: { required: "Pick a meeting time", "shouldDisableTime-hours": "No meetings over lunch (12:00 to 13:00)", }, slotProps: { textField: { helperText: "Type a time or use the clock button" }, }, }); return <DesktopTimePicker label="Meeting time" {...adapter} />;}export default function Page() { const { control, handleSubmit } = useForm<FormValues>({ defaultValues: { meeting: null }, }); return ( <LocalizationProvider dateAdapter={AdapterDayjs}> <form noValidate onSubmit={handleSubmit((values) => alert(values.meeting?.format("h:mm A")))} > <Stack direction="column" spacing={2}> <MeetingTimeField control={control} /> <div> <MuiButtonElement control={control} variant="contained" type="submit"> Schedule </MuiButtonElement> </div> </Stack> </form> </LocalizationProvider> );}How it works
This hook calls useMuiXTimePickerAdapter with the same props and returns its result unchanged. Value handling, the validation order, default messages and slotProps.textField merging are described on the useMuiXTimePickerAdapter page.
What differs is the component you spread it onto:
TimePickerswitches between the desktop and mobile layouts with the@media (pointer: fine)media query.DesktopTimePickeralways uses the desktop layout.- The desktop popover shows a
DigitalClock(one column) or aMultiSectionDigitalClock(one column per section), depending on the views andtimeSteps. Both disable the options thatminTime,maxTime,minutesStepandshouldDisableTimereject, because the hook returns those props. - The text field is the main way to enter a time. A typed time never goes through the disabled options in the popover, so validation is what rejects it.
shouldDisableTime and its message. Validation calls shouldDisableTime(value, view) with "hours", then "minutes", then "seconds", and reports the first view that returns true. Return true only for the view you mean, and override the matching key. The example checks view === "hours", so its error comes from shouldDisableTime-hours; the default for that key is "Hour is disabled".
Props
Prop
Type
Return value
Prop
Type
useMuiXDesktopDateTimePickerAdapter
Returns adapter props for MUI X DesktopDateTimePicker with React Hook Form, with per-view time rules through shouldDisableTime.
useMuiXDigitalClockAdapter
Returns adapter props for building custom MUI X DigitalClock integrations with React Hook Form, such as a list of bookable time slots.