useMuiXDigitalClockAdapter
Returns adapter props for building custom MUI X DigitalClock integrations with React Hook Form, such as a list of bookable time slots.
useMuiXDigitalClockAdapter connects a field to React Hook Form and returns props you spread onto MUI X's DigitalClock, a single scrollable list of times. It's what MuiXDigitalClockElement uses internally.
The element shows the list only and drops the error message. Use the hook for slot-style pickers, where you disable taken slots and need to show a message when the form holds one anyway.
Import
import { useMuiXDigitalClockAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";Usage
This SlotPicker lists 30-minute slots from 09:00 to 16:30 and hides booked ones. Submit without picking a slot to see the error below the list.
"use client";import dayjs, { type Dayjs } from "dayjs";import FormHelperText from "@mui/material/FormHelperText";import Stack from "@mui/material/Stack";import { DigitalClock, LocalizationProvider } from "@mui/x-date-pickers";import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";import { useMuiXDigitalClockAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";import { type Control, useForm } from "react-hook-form";type FormValues = { slot: Dayjs | null };const bookedSlots = ["10:00", "13:30", "15:00"];// DigitalClock lists one option per `timeStep` and checks each option with// `shouldDisableTime(option, "hours")`, so the booked check runs for the "hours" view.function SlotPicker({ control }: { control: Control<FormValues> }) { const { error, helperText, required: _required, ...adapter } = useMuiXDigitalClockAdapter<Dayjs, FormValues, "slot", HTMLDivElement>({ control, name: "slot", required: true, composeHelperText: true, minTime: dayjs().hour(9).minute(0), maxTime: dayjs().hour(16).minute(30), shouldDisableTime: (value, view) => view === "hours" && bookedSlots.includes(value.format("HH:mm")), messages: { required: "Pick a free slot", "shouldDisableTime-hours": "That slot is already booked", }, }); return ( <div> <DigitalClock ampm={false} timeStep={30} skipDisabled {...adapter} /> <FormHelperText error={error}> {helperText || "30-minute slots, 09:00 to 16:30"} </FormHelperText> </div> );}export default function Page() { const { control, handleSubmit } = useForm<FormValues>({ defaultValues: { slot: null }, }); return ( <LocalizationProvider dateAdapter={AdapterDayjs}> <form noValidate onSubmit={handleSubmit((values) => alert(values.slot?.format("HH:mm")))} > <Stack direction="column" spacing={2}> <SlotPicker control={control} /> <div> <MuiButtonElement control={control} variant="contained" type="submit"> Book slot </MuiButtonElement> </div> </Stack> </form> </LocalizationProvider> );}How it works
Validation and default messages are the same as useMuiXTimePickerAdapter. The result is shaped like the useMuiXTimeClockAdapter one: take error, helperText and required out before spreading, render the message yourself, and expect the field to become touched when focus leaves the list.
shouldDisableTime uses the "hours" view. DigitalClock has one option per timeStep (30 minutes by default), and checks each option with shouldDisableTime(option, "hours"), even for options like 13:30. Validation calls the same function with "hours" first. So a slot check written for view === "hours" both disables the option and produces the shouldDisableTime-hours error. Override that key; its default text is "Hour is disabled", which reads oddly for a 13:30 slot.
A check that only returns true for view === "minutes" does not disable anything in DigitalClock, but validation still rejects the value with the shouldDisableTime-minutes message. Users can pick a slot that then fails on submit.
skipDisabled. With skipDisabled, disabled options are hidden instead of greyed out. This is a DigitalClock prop and does not change validation: a booked time set through defaultValues or setValue still fails.
timeStep and minutesStep are separate. timeStep only controls which options are listed. minutesStep is a validation prop; it disables options and adds the minutesStep check.
Props
Prop
Type
Return value
Prop
Type
useMuiXDesktopTimePickerAdapter
Returns adapter props for building custom MUI X DesktopTimePicker integrations with React Hook Form, where users mostly type times into the field.
useMuiXMobileDatePickerAdapter
Returns adapter props for MUI X MobileDatePicker with React Hook Form, with month-level rules through shouldDisableMonth.