Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Error in React: Generic type 'DatePickerProps' requires 1 type argument(s)

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:

enter image description here

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>;
like image 649
Rafay Hassan Avatar asked Oct 31 '25 18:10

Rafay Hassan


2 Answers

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>;
like image 86
Manny Avatar answered Nov 03 '25 11:11

Manny


I fixed it by giving Dayjs to the argument.

interface ICalenderProps extends DatePickerProps<Dayjs> 
like image 28
Tanuja Tiwari Avatar answered Nov 03 '25 09:11

Tanuja Tiwari