DatePicker Component:
import React from "react"
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import { LocalizationProvider } from '@mui/lab';
import { DatePicker, DatePickerProps } from '@mui/lab';
const FormikDatePicker: React.FunctionComponent<DatePickerProps> = ({
...rest
}) => {
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
{...rest}
/>
</LocalizationProvider>
)
}
export default FormikDatePicker
FormikDatePicker Component:
import React from "react"
import { FormHelperText } from "@mui/material"
import { useFormikContext } from "formik"
import { getFormikInputParams } from "../../../utils/getFormikInputParams"
import DatePicker from "./DatePicker"
import { FormikIdentifier } from "../../../types/formik"
import { DatePickerProps } from "@mui/lab"
type Props = Omit<
DatePickerProps,
"onChange" | "value" | "id" | "name"
> &
FormikIdentifier
const FormikDatePicker: React.FunctionComponent<Props> = ({ ...rest }) => {
const formik = useFormikContext()
const id = rest.id || rest.name || ""
const { error, showError, value } = getFormikInputParams(formik, id)
return (
<>
<DatePicker
inputFormat="yyyy/MM/dd"
value={value}
onChange={(date) => formik.setFieldValue(id, date)}
onClose={() => formik.setFieldTouched(id)}
{...rest}
/>
{showError && <FormHelperText error>{error}</FormHelperText>}
</>
)
}
export default FormikDatePicker
The issue:

The code was working fine but after updating the material UI to version 5, I am receiving the above error and I have no idea how to resolve it. If you could help that would be great, thank you.
How DatePickerProps is defined:
import * as React from 'react';
declare type DatePickerComponent = (<TDate>(props: DatePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
propTypes?: any;
};
/**
* @ignore - do not document.
*/
declare const DatePicker: DatePickerComponent;
export default DatePicker;
export declare type DatePickerProps<TDate> = Record<any, any>;
Looking through the source code, I couldn't figure out what types the generics are supposed to be. I assume dates. There are actually two generics though:
export interface DatePickerProps<TInputDate, TDate> extends ...
Maybe not the best answer, but this is working for me without any type errors:
type MergedProps = SpotlightIntegrationProps &
SelectProps &
DatePickerProps<Date, Date>;
I fixed it by giving Dayjs to the argument.
interface ICalenderProps extends DatePickerProps<Dayjs>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With