Question: How to add icon to DayPickerInput

[diegodesouza]

I have tried several things in an attempt to add a calendar icon to the DayPickerInput without success. I'd be great if we had an easier way to do so. Perhaps a prop on it?

Can you provide an example using a component or a className? I'm currently using the react-icons package.

thanks in advance

[marcus-kindred]

You can pass a custom component to render in place of the provided input.

See the component property in the documentation: http://react-day-picker.js.org/api/DayPickerInput

Usage example:

<DayPickerInput
    component={(props: InputHTMLAttributes<HTMLInputElement>) => (
        <CustomInput icon={<MyIcon />} {...props} />
    )}
/>

Your custom input might look something like this:

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  icon?: React.ReactNode;
}

const Input: React.FC<InputProps> = ({ icon, className, ...rest }) => {
  return (
    <div className={className}>
      {icon === undefined ? (
        <input {...rest} />
      ) : (
        <>
          <input {...rest} />
          {icon}
        </>
      )}
    </div>
  );
};

Your base html inputs will need some styling on of course.

[marcus-kindred]

Also note that the code above will be buggy, you will want to also handle forwarding the ref on to your custom input.

[marcus-kindred]

Handling the refs in TypeScript if it helps anyone:

Also fixes the issue #977

const CustomInputCore: React.RefForwardingComponent<
  HTMLInputElement,
  InputHTMLAttributes<HTMLInputElement>
> = ({ value, ...props }, ref) => (
  <MyInput ref={ref} icon={<MyIcon />} value={value ?? ''} {...props} />
);

const CustomInput = React.forwardRef(CustomInputCore);

<DayPickerInput component={CustomInput} />

With your "MyInput" component looking like:

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  icon?: React.ReactNode;
}

const Input: React.RefForwardingComponent<HTMLInputElement, InputProps> = (
  { icon, className, ...rest },
  ref
) => {
  return (
    <div className={className}>
      {icon === undefined ? (
        <input ref={ref} {...rest} />
      ) : (
        <>
          <input ref={ref} {...rest} />
          {icon}
        </>
      )}
    </div>
  );
};

export default React.forwardRef(Input);