useMuiXMobileTimePickerAdapter

useMuiXMobileTimePickerAdapter connects a field to React Hook Form and returns props you spread onto MUI X's MobileTimePicker. It's what MuiXMobileTimePickerElement uses internally.

Use the hook instead of the element when you build your own touch-first time field, for example a same-day booking field that always rejects times that have passed. Pick this variant over useMuiXTimePickerAdapter when you want the dialog on every device, including desktops with a mouse.

ImportCopy Anchor Link

import { useMuiXMobileTimePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";

UsageCopy Anchor Link

This PickupTimeField only accepts times later today. Open the dialog and pick a time that has already passed, then submit.

"use client";import type { Dayjs } from "dayjs";import Stack from "@mui/material/Stack";import { LocalizationProvider, MobileTimePicker } from "@mui/x-date-pickers";import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";import { useMuiXMobileTimePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";import { type Control, useForm } from "react-hook-form";type FormValues = { pickup: Dayjs | null };// Same-day pickup: the chosen time must still be ahead of now.function PickupTimeField({ control }: { control: Control<FormValues> }) {  const adapter = useMuiXMobileTimePickerAdapter<Dayjs, FormValues, "pickup", HTMLDivElement>({    control,    name: "pickup",    required: true,    composeHelperText: true,    disablePast: true,    messages: {      required: "Choose a pickup time",      disablePast: "That time has already passed today",    },    slotProps: {      textField: { helperText: "Tap to open the clock" },    },  });  return <MobileTimePicker label="Pickup time (today)" {...adapter} />;}export default function Page() {  const { control, handleSubmit } = useForm<FormValues>({    defaultValues: { pickup: null },  });  return (    <LocalizationProvider dateAdapter={AdapterDayjs}>      <form        noValidate        onSubmit={handleSubmit((values) => alert(values.pickup?.format("h:mm A")))}      >        <Stack direction="column" spacing={2}>          <PickupTimeField control={control} />          <div>            <MuiButtonElement control={control} variant="contained" type="submit">              Confirm pickup            </MuiButtonElement>          </div>        </Stack>      </form>    </LocalizationProvider>  );}

How it worksCopy Anchor Link

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:

• TimePicker picks the mobile layout only when the @media (pointer: fine) media query does not match. MobileTimePicker always uses it.
• The hours, minutes and seconds views render as an analog TimeClock inside a dialog, not the digital lists of the desktop popover. The clock disables the hours and minutes that minTime, maxTime, minutesStep and shouldDisableTime reject.
• Errors still render under the text field, through slotProps.textField, not inside the dialog.
• The returned onClose runs when the dialog closes, which calls React Hook Form's onBlur and marks the field as touched. With mode: "onBlur" or "onTouched", validation runs right after the user closes the dialog.

disablePast and disableFuture compare the full date and time. Unlike minTime and maxTime, they do not ignore the date part. A value picked in the dialog keeps the date of the current value, or today's date when the field is empty, so in the example "past" means earlier today. If the form value carries another date, the check uses that date.

PropsCopy Anchor Link

Return valueCopy Anchor Link