TS for Custom Input

[the-wrong-guy]

Below is my DatePicker with custom Input, I am having trouble setting types for the Custom input. And I am trying to solve it from yesterday but somehow it always gives different type errors, so the below code is without any type and I want the correct types for the custom Input

Current type Error : Type error: Property 'value' does not exist on type '{ children?: ReactNode; }'.

import { useState, forwardRef } from "react";
import DatePicker, { ReactDatePickerProps } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import moment from "moment";
import DownArrowIcon from "../../public/icons/downArrow.svg";

const CustomDatePicker = () => {
  const [startDate, setStartDate] = useState(new Date());
  const CustomInput = forwardRef(({ value, onClick }, ref) => {
    return (
      <div className='flex items-center gap-4'>
        <button
          className='font-normal text-grey600 text-center text-base rounded-lg px-4 py-2 flex items-center gap-4'
          style={{ border: "1px solid rgba(182, 182, 182, 1)" }}
          onClick={onClick}
          ref={ref}
        >
          {moment(value).format("MMM d")}
          <DownArrowIcon />
        </button>
        <p className='font-normal text-grey600 text-center text-base'>
          {moment(value).format("hh:mm A")}
        </p>
      </div>
    );
  });
  return (
    <DatePicker
      selected={startDate}
      onChange={(date: Date) => setStartDate(date)}
      timeInputLabel='Time:'
      dateFormat='MM/dd/yyyy h:mm aa'
      showTimeInput
      customInput={<CustomInput />}
    />
  );
};

export default CustomDatePicker;

[dcods22]

@the-wrong-guy Ive ran into a similar problem, it seems the root of the custom input needs to be an input html element, i dont have a work around for now and I need to figure out something to get the look/feel I desire for the custom input

[giufiorenzano]

Hi, I have the same issue! Has anyone found a solution?

[davidseek]

+1

[MrJackdaw]

Just writing to help others who may encounter this issue:

const CustomInput = forwardRef(({ value, onClick }, ref) => {

TLDR: define types for the arguments ({ value, onClick } and ref) line. If you want to be extremely terrible and lazy about it, something like

const CustomInput = forwardRef(({ value, onClick }: any, ref: any) => {

might work.

The TL in TLDR below

Typescript is complaining about that line. Because (as far as TS is concerned), you

• Probably have a tsconfig.json file with noImplicitAny: true
• Which means every function's arguments must have defined types (where they can't be inferred)

Put that all together, and you get

"TS is complaining about a function where you didn't define types."