MuiXStaticDatePickerElement
A pre-integrated MuiXStaticDatePickerElement component for connecting MUI X StaticDatePicker to React Hook Form.
Import
import { MuiXStaticDatePickerElement } from "@piplup/rhf-adapters/mui-x-date-pickers";Usage
"use client";import dayjs from "dayjs";import Stack from "@mui/material/Stack";import { MuiXStaticDatePickerElement } from "@piplup/rhf-adapters/mui-x-date-pickers";import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";import { LocalizationProvider } from "@mui/x-date-pickers";import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";import { useForm } from "react-hook-form";export default function Page() { const { control, handleSubmit } = useForm({ defaultValues: { appointment: dayjs() }, }); return ( <LocalizationProvider dateAdapter={AdapterDayjs}> <form onSubmit={handleSubmit((values) => alert(JSON.stringify(values, null, 2)), )} > <Stack direction="column" spacing={2}> <MuiXStaticDatePickerElement control={control} name="appointment" /> <div> <MuiButtonElement control={control} variant="contained" type="submit" > Submt </MuiButtonElement> </div> </Stack> </form> </LocalizationProvider> );}"use client";import dayjs from "dayjs";import Stack from "@mui/material/Stack";import { MuiXStaticDatePickerElement } from "@piplup/rhf-adapters/mui-x-date-pickers";import { MuiButtonElement } from "@piplup/rhf-adapters/mui-material";import { LocalizationProvider } from "@mui/x-date-pickers";import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";import { FormContainer } from "@piplup/rhf-core";export default function Page() { return ( <LocalizationProvider dateAdapter={AdapterDayjs}> <FormContainer defaultValues={{ appointment: dayjs() }} onSubmit={(values) => alert(JSON.stringify(values, null, 2))} > <Stack direction="column" spacing={2}> <MuiXStaticDatePickerElement name="appointment" /> <div> <MuiButtonElement variant="contained" type="submit"> Submt </MuiButtonElement> </div> </Stack> </FormContainer> </LocalizationProvider> );}Props
Prop
Type
MuiXStaticDatePickerElement supports all standard props of the MUI X StaticDatePicker component, along with additional adapter-specific props. For a complete list of available StaticDatePicker properties, refer to the MUI X Date Pickers API documentation.
The
refis forwarded to the underlying<StaticDatePicker />component.
Notes
- For custom static date pickers, build on
useMuiXStaticDatePickerAdapter.
See also
MuiXMultiSectionDigitalClockElement
A pre-integrated MuiXMultiSectionDigitalClockElement component for connecting MUI X MultiSectionDigitalClock to React Hook Form.
MuiXStaticDateTimePickerElement
A pre-integrated MuiXStaticDateTimePickerElement component for connecting MUI X StaticDateTimePicker to React Hook Form.