@piplup/rhf-adaptersmui-x-date-pickersComponents
MuiXYearCalendarElement
A pre-integrated MuiXYearCalendarElement component for connecting MUI X YearCalendar to React Hook Form.
Import
import { MuiXYearCalendarElement } from "@piplup/rhf-adapters/mui-x-date-pickers";Usage
"use client";import dayjs from "dayjs";import { MuiXYearCalendarElement } from "@piplup/rhf-adapters/mui-x-date-pickers";import { LocalizationProvider } from "@mui/x-date-pickers";import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";import { useForm } from "react-hook-form";export default function Page() { const { control, handleSubmit } = useForm({ defaultValues: { year: dayjs() }, }); return ( <LocalizationProvider dateAdapter={AdapterDayjs}> <form onSubmit={handleSubmit((values) => alert(JSON.stringify(values, null, 2)), )} > <MuiXYearCalendarElement control={control} name="year" /> <MuiButtonElement control={control} type="submit" variant="contained" sx={{ mt: 2 }}> Submit </MuiButtonElement> </form> </LocalizationProvider> );}Props
Prop
Type
MuiXYearCalendarElement supports all standard props of the MUI X YearCalendar component, along with additional adapter-specific props. For a complete list of available YearCalendar properties, refer to the MUI X Date Pickers API documentation.
The
refis forwarded to the underlying<YearCalendar />component.
Notes
- For custom year calendars, build on
useMuiXYearCalendarAdapter.
See also
MuiXTimePickerElement
A pre-integrated MuiXTimePickerElement component for connecting MUI X TimePicker to React Hook Form.
useMuiXDateCalendarAdapter
Returns adapter props for MUI X DateCalendar with React Hook Form. The calendar has no text field, so you remove error props before spreading and render the message yourself.