useMuiXDesktopDatePickerAdapter
Returns adapter props for MUI X DesktopDatePicker with React Hook Form, with an example of limits that depend on another field.
useMuiXDesktopDatePickerAdapter returns React Hook Form props for MUI X's DesktopDatePicker. It's what MuiXDesktopDatePickerElement uses internally.
Use the element for most forms. Use the hook when you build desktop date fields that work together, such as a check-in and check-out pair where one field's limits come from the other.
Import
import { useMuiXDesktopDatePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";Usage
The check-out field reads the check-in value with useWatch and passes it as minDate and maxDate, so a stay must be 1 to 14 nights. Pick a check-in date, then type a check-out date before it and submit.
"use client";import type { Dayjs } from "dayjs";import Stack from "@mui/material/Stack";import { DesktopDatePicker, LocalizationProvider } from "@mui/x-date-pickers";import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";import { useMuiXDesktopDatePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";import { type Control, useForm, useWatch } from "react-hook-form";type FormValues = { checkIn: Dayjs | null; checkOut: Dayjs | null };function CheckInField({ control }: { control: Control<FormValues> }) { const adapter = useMuiXDesktopDatePickerAdapter<Dayjs, FormValues, "checkIn", HTMLDivElement>({ control, name: "checkIn", required: true, composeHelperText: true, disablePast: true, messages: { required: "Choose a check-in date", disablePast: "Check-in can't be in the past", }, }); return <DesktopDatePicker label="Check-in" {...adapter} />;}function CheckOutField({ control }: { control: Control<FormValues> }) { const checkIn = useWatch({ control, name: "checkIn" }); const adapter = useMuiXDesktopDatePickerAdapter<Dayjs, FormValues, "checkOut", HTMLDivElement>({ control, name: "checkOut", required: true, composeHelperText: true, // At least one night, at most 14. The limits follow the current check-in value // because the rules are rebuilt on every render. minDate: checkIn?.add(1, "day"), maxDate: checkIn?.add(14, "day"), messages: { required: "Choose a check-out date", minDate: "Check-out must be after check-in", maxDate: "Stays are limited to 14 nights", }, }); return <DesktopDatePicker label="Check-out" {...adapter} />;}export default function Page() { const { control, handleSubmit } = useForm<FormValues>({ defaultValues: { checkIn: null, checkOut: null }, }); return ( <LocalizationProvider dateAdapter={AdapterDayjs}> <form noValidate onSubmit={handleSubmit(({ checkIn, checkOut }) => alert(`${checkOut?.diff(checkIn, "day")} nights`), )} > <Stack direction="column" spacing={2}> <Stack direction={{ xs: "column", sm: "row" }} spacing={2}> <CheckInField control={control} /> <CheckOutField control={control} /> </Stack> <div> <MuiButtonElement control={control} variant="contained" type="submit"> Check availability </MuiButtonElement> </div> </Stack> </form> </LocalizationProvider> );}How it works
This hook calls useMuiXDatePickerAdapter with the same props and returns its result unchanged. Value handling, validation messages and the text field wiring are documented there.
The difference is the component. DatePicker chooses the desktop or mobile layout with a @media (pointer: fine) query. DesktopDatePicker always opens the calendar in a popover next to the field on every device, including touch screens where DatePicker would open a dialog.
Limits from another field. The validation rule is rebuilt on every render from the current minDate and maxDate. When check-in changes, the check-out field re-renders with new limits, and the next validation of check-out uses them. If check-in is still empty, minDate and maxDate are undefined and the hook falls back to the LocalizationProvider defaults (1900-01-01 and 2099-12-31).
Changing check-in does not re-validate check-out on its own. A check-out error stays visible until check-out changes or the form is submitted. Call trigger("checkOut") in an effect after check-in changes if you need it immediately.
Errors and blur. The text field receives error, helperText and onBlur through slotProps.textField, and closing the popover also counts as a blur.
Props
Prop
Type
Return value
Prop
Type
useMuiXDateTimePickerAdapter
Returns adapter props for MUI X DateTimePicker with React Hook Form, including time rules such as minTime, maxTime, minutesStep and shouldDisableTime.
useMuiXDesktopDateTimePickerAdapter
Returns adapter props for MUI X DesktopDateTimePicker with React Hook Form, with per-view time rules through shouldDisableTime.