useMuiXStaticDatePickerAdapter
Returns adapter props for MUI X StaticDatePicker with React Hook Form. The picker has no text field, so you render the error message yourself.
useMuiXStaticDatePickerAdapter returns React Hook Form props for MUI X's StaticDatePicker, the always-visible date picker. It's what MuiXStaticDatePickerElement uses internally.
The element validates but never shows a message. Use the hook when the picker is the main input on the page, such as a booking screen, and users need to see why their date was rejected.
Import
import { useMuiXStaticDatePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";Usage
This TourDateField blocks sold-out days and dates more than 60 days ahead. Submit without picking a day to see the message rendered under the picker.
"use client";import dayjs, { type Dayjs } from "dayjs";import FormHelperText from "@mui/material/FormHelperText";import Stack from "@mui/material/Stack";import { LocalizationProvider, StaticDatePicker } from "@mui/x-date-pickers";import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";import { useMuiXStaticDatePickerAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";import { type Control, useForm } from "react-hook-form";type FormValues = { tour: Dayjs | null };// Dates that are already sold out, e.g. loaded from an API.const soldOut = new Set( [3, 4, 10].map((days) => dayjs().add(days, "day").format("YYYY-MM-DD")),);function TourDateField({ control }: { control: Control<FormValues> }) { // StaticDatePicker has no text field: take the message out and render it below. const { error, helperText, required: _required, ...adapter } = useMuiXStaticDatePickerAdapter< Dayjs, FormValues, "tour", HTMLDivElement >({ control, name: "tour", required: true, composeHelperText: true, disablePast: true, maxDate: dayjs().add(60, "day"), shouldDisableDate: (date) => soldOut.has(date.format("YYYY-MM-DD")), messages: { required: "Pick a tour date", shouldDisableDate: "This tour is sold out", maxDate: "Tours open 60 days in advance", }, }); return ( <div> <StaticDatePicker displayStaticWrapperAs="desktop" slotProps={{ actionBar: { actions: [] } }} {...adapter} /> {error && <FormHelperText error>{helperText}</FormHelperText>} </div> );}export default function Page() { const { control, handleSubmit } = useForm<FormValues>({ defaultValues: { tour: null }, }); return ( <LocalizationProvider dateAdapter={AdapterDayjs}> <form noValidate onSubmit={handleSubmit((values) => alert(values.tour?.format("dddd, D MMMM YYYY")), )} > <Stack direction="column" spacing={2}> <TourDateField control={control} /> <div> <MuiButtonElement control={control} variant="contained" type="submit"> Reserve </MuiButtonElement> </div> </Stack> </form> </LocalizationProvider> );}How it works
Validation is the same as in useMuiXDatePickerAdapter, with the same rules, keys and default messages. The difference is that there is no text field and no popup to attach errors and blur to.
Error display is up to you. The hook does not build slotProps.textField. It returns error, helperText and required as plain values, and StaticDatePicker has no props for them. Take them off the result before spreading, then render them, as the example does with FormHelperText. Set composeHelperText: true so that helperText holds the error message.
No hint text. The hook does not accept a helperText prop (it is cleared even if passed), so helperText in the result is either the error message or undefined. Write any hint text directly in your component.
No touched state. Any onBlur you pass is ignored. The returned onBlur is React Hook Form's, but StaticDatePicker never calls it, so the field is never marked as touched. In onBlur or onTouched mode it is only validated after the first submit.
Ref. React Hook Form's ref and your ref are merged and attached to the picker's root element. There is no input to focus, so setFocus and shouldFocusError have no effect on this field.
The validation props are also spread onto the picker, so sold-out days and dates past maxDate are greyed out in the calendar. The form-level check still catches values set through defaultValues, reset or setValue.
Props
Prop
Type
Return value
Prop
Type
useMuiXMultiSectionDigitalClockAdapter
Returns adapter props for building custom MUI X MultiSectionDigitalClock integrations with React Hook Form, with per-section (hours, minutes, seconds) validation messages.
useMuiXStaticDateTimePickerAdapter
Returns adapter props for MUI X StaticDateTimePicker with React Hook Form. The picker has no text field, so you render the error message yourself.