useMuiXDateFieldAdapter

useMuiXDateFieldAdapter returns React Hook Form props for MUI X's DateField, the keyboard-only date input with no calendar popup. It's what MuiXDateFieldElement uses internally.

Use the element for most forms. Use the hook for typed dates where a calendar gets in the way, such as a date of birth, when you want the field's limits and messages defined once in your own component.

ImportCopy Anchor Link

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

UsageCopy Anchor Link

This BirthDateField requires a full date, rejects future dates, and only accepts people aged 18 or older. Type part of a date and submit, or enter a date from last year.

"use client";import dayjs, { type Dayjs } from "dayjs";import Stack from "@mui/material/Stack";import { DateField, LocalizationProvider } from "@mui/x-date-pickers";import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";import { useMuiXDateFieldAdapter } from "@piplup/rhf-adapters/mui-x-date-pickers";import { type Control, useForm } from "react-hook-form";type FormValues = { birthDate: Dayjs | null };// A keyboard-only birth date field. Users must be 18 or older.function BirthDateField({ control }: { control: Control<FormValues> }) {  const adapter = useMuiXDateFieldAdapter<Dayjs, FormValues, "birthDate", HTMLDivElement>({    control,    name: "birthDate",    required: true,    composeHelperText: true,    helperText: "DD/MM/YYYY",    disableFuture: true,    minDate: dayjs("1900-01-01"),    maxDate: dayjs().subtract(18, "year"),    messages: {      required: "Enter your date of birth",      invalidDate: () => "Finish typing the date",      disableFuture: "Date of birth can't be in the future",      minDate: "Enter a date after 1900",      maxDate: "You must be 18 or older to sign up",    },  });  return <DateField label="Date of birth" format="DD/MM/YYYY" {...adapter} />;}export default function Page() {  const { control, handleSubmit } = useForm<FormValues>({    defaultValues: { birthDate: null },  });  return (    <LocalizationProvider dateAdapter={AdapterDayjs}>      <form        noValidate        onSubmit={handleSubmit((values) =>          alert(values.birthDate?.format("YYYY-MM-DD")),        )}      >        <Stack direction="column" spacing={2}>          <BirthDateField control={control} />          <div>            <MuiButtonElement control={control} variant="contained" type="submit">              Continue            </MuiButtonElement>          </div>        </Stack>      </form>    </LocalizationProvider>  );}

How it worksCopy Anchor Link

Validation uses the same rules, keys and default messages as useMuiXDatePickerAdapter. The difference is how the result reaches the component.

Props go straight to the field. DateField is itself the text field, so the hook returns error, helperText, onBlur and required as top-level props. There is no slotProps.textField and no onClose. Pass hint text with the hook's helperText prop, not on <DateField>: with composeHelperText: true the hook returns your hint while the field is valid and the error message when it is not. A helperText written on <DateField> before the spread is overwritten.

Blur is the only touch signal. Leaving the input marks the field as touched.

Partial input is an invalid date, not an empty one. While the user is still typing, DateField reports an invalid date object, not null. So required passes and the invalidDate check fails instead. Give invalidDate a message that tells users to finish typing. Its type only allows a function, so write it as () => "Finish typing the date".

Refs. The hook merges React Hook Form's ref with your inputRef and returns it as inputRef, so form methods get the field's input element. Your ref is returned separately and goes to the root element.

Limits are checked by day. minDate, maxDate, disablePast and disableFuture ignore the time. Computing maxDate as dayjs().subtract(18, "year"), as the example does, allows someone whose 18th birthday is today.

PropsCopy Anchor Link

Return valueCopy Anchor Link