React-datepicker: Custom Input in Typescript showing type error

[AthulNair]

I am trying to implement the customInput functionality and my element looks like this.

const CustomDatePickerInput = ({ value, onClick }) => (
  <Badge onClick={onClick} className="display-6 badge  badge-pill float-right p-2 text-white bg-danger" pill>
    {value}
  </Badge>
);

I am using this in my typescript project, Some one please help me to solve the type error.

[flakronkadriu]

Try updating the @types/react-datepicker or add the badge directly to the customInput prop

[lamhungypl]

```javascript
interface Props extends Omit {
onClick?(): void;
onChange?(): void;
}

const Custom = ({ value, onClick, ...rest }) => {
return ;
};
const DatePicker = ({ onClick, onChange, ...rest }: Props) => {
const [startDate, setStartDate] = React.useState();

return (
selected={startDate}
onChange={date => setStartDate(date)}
placeholderText="dd-mm-yyyy"
dateFormat="dd-MM-yyyy"
customInput={

}
calendarClassName="calendar"
{...rest}
/>
);
};
````
I am using this, it works under normal circumstances, not tested much.

[Coldwine]

interface Props extends Omit<ReactDatePickerProps, 'onChange'> {
  onClick?(): void;
  onChange?(): void;
}

const Custom = ({ value, onClick, ...rest }) => {
  return <StyledInput value={value} onClick={onClick} {...rest} />;
};
const DatePicker = ({ onClick, onChange, ...rest }: Props) => {
  const [startDate, setStartDate] = React.useState<Date | null>();

  return (
    <ReactDatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      placeholderText="dd-mm-yyyy"
      dateFormat="dd-MM-yyyy"
      customInput={
        <Custom value={startDate} onClick={onClick} onChange={onChange} />
      }
      calendarClassName="calendar"
      {...rest}
    />
  );
};

I am using this, it works under normal circumstances, not tested much.

onClick and onChange should be the internal callbacks that come from ReactDatePicker itself, no? In your solution, it looks like you're only trying to satisfy the Typescript compiler with non-existant callbacks.

Is there a chance anyone has a solution to this?

[mantysalo]

const ExampleCustomInput = ({ value, onClick }: {value: string; onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void}) => (
  <button className="example-custom-input" onClick={onClick}>
    {value}
  </button>
);

const ExampleDatePicker = () => <DatePicker customInput={React.createElement(ExampleCustomInput)}/>

This seems to work.

[arxeiss]

@mantysalo no problem with Typescript, but I got problem with refs in the browser console

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

---

After the help with #862 I was able to find a valid way. And also find there are many other useful props...

const CustomInput = (props: React.HTMLProps<HTMLInputElement>, ref: React.Ref<HTMLInputElement>) => {
    return (
      <input {...props} />
    );
  };

return (
      <DatePicker
        id={entryKey} // this is later passed into the input above
        wrapperClassName="input-group mr-5"
        customInput={React.createElement(React.forwardRef(CustomInput))}
      />
  );