Custom Input Field on datepicker

Question

i implemented the react-datepicker in my app.

everythings fine except i want to customize the input field of the datepicker and adapt it to my other custom fields like title input.

when i change the datepicker via the

customInput={<Input />}

field, the looks of it have changed but i cant select dates anymore (the picker isnt working anymore).

heres my code:

<DatePicker
    customInput={<Input />}
    dateFormat="DD.MM.YYYY"
    selected=...
    onChange=...

/>

any ideas?

    export namespace Input { 
        export interface Props { 
            onChange: (event: any) => void; 
            placeholder?: string; 
            value?: string | number; 
            isSecure?: any; 
            id?: string; 
        }

        // ...
    }

So I added the clock event in the following way:

    export namespace Input {
        export interface Props {
            onChange: (event: any) => void;
            placeholder?: string;
            value?: string | number;
            isSecure?: any;
            id?: string;
            onClick: (event: any) => void;
        }
    }

is that right?

component code:

export class Input extends React.Component<Input.Props, Input.State> {
  public render() {
    const controlClass = classNames(
      [style.control]
    );
    const inputClass = classNames(
      [style.input]
    );
    return (
      <p className={controlClass} >
        <input
          id={this.props.id}
          onChange={this.props.onChange}
          className={inputClass}
          type={this.props.isSecure ? "password" : "text"}
          placeholder={this.props.placeholder}
          value={this.props.value}
        />
      </p>
    );
  }
}

How does the `Input` component look like? Most likely the input component does not correctly implement the `onChange` event. — trixn, May 17 '18 at 12:42
export namespace Input { export interface Props { onChange: (event: any) => void; placeholder?: string; value?: string | number; isSecure?: any; id?: string; } — sleepysimon, May 17 '18 at 12:48
You can [edit](https://stackoverflow.com/posts/50391206/edit) your question to add the code there instead of commenting. — trixn, May 17 '18 at 12:50

trixn · Answer 1 · 2018-05-17T14:27:13.847

16

Your Input component needs to implement an onClick event and make that available as a prop because that is what triggers the date picker to open itself.

const Input = ({onChange, placeholder, value, isSecure, id, onClick}) => (
    <input
        onChange={onChange}
        placeholder={placeholder}
        value={value}
        isSecure={isSecure}
        id={id}
        onClick={onClick}
    />
);

const NoClickInput = ({onClick, ...props}) => <Input {...props} />;

class App extends Component {
    state = {
        value: moment(),
    };

    render() {
        return (
            <div>
                <DatePicker
                    value={this.state.value}
                    dateFormat="DD.MM.YYYY"
                    customInput={<Input />}
                    selected={this.state.date}
                    onChange={date => this.setState({date})}
                />
                <DatePicker
                    value={this.state.value}
                    dateFormat="DD.MM.YYYY"
                    customInput={<NoClickInput />} {/* Will not work */}
                    selected={this.state.date}
                    onChange={date => this.setState({date})}
                />
            </div>
        );
    }
}

EDIT:

A possible work around without touching the implementation of your Input component would be to wrap it into a container and handle a click on that instead:

const ClickableInput = ({onClick, ...props}) => (
    <div onClick={onClick}>
        <Input {...props}>
    </div>
);

Then use ClickableInput instead of Input as your custom input.

edited May 17 '18 at 14:27

answered May 17 '18 at 13:23

trixn

15,761
2
38
55

well i dont want to change the input component, its used throughout the whole application. i thought of something like just changing the field itself via css-reference or sth like that (i am noob). can you think of a solution? – sleepysimon May 17 '18 at 14:18
@sleepysimon I updated my answer with a possible workaround without touching the implementation of the original `Input`. But of course you could also write a component yourself that renders the required markup and adds the correct classes. I can't provide that as I don't know the requirements of your custom input. Also that would be beyond the scope of that question. The main point is: Your input component needs an `onClick` callback. Otherwise it will not work properly. – trixn May 17 '18 at 14:29
just thought of another solution: doing it via className and writing a new css-class could do it too, couldnt it? – sleepysimon May 17 '18 at 14:37
@sleepysimon From the interface you have shown your `Input` component does not accept a `className` prop. So how do you want to inject the css class names? You could also write your own input component. That is really not a big deal. Or you just add the `onClick` callback to your existing `Input` which should not break any existing functionality at all. – trixn May 17 '18 at 14:42
@sleepysimon No you did only add it to the interface. The interface only describes which props your component accepts any which type the passed values need to have. But you did not implement anything on the actual component. This will have no effect at all. The component needs to take that prop and apply it on the underlying `` that it renders. What is the actual code of the component? Could you post it? – trixn May 17 '18 at 15:09
added the code. could you look through it? thanks in advance!! – sleepysimon May 20 '18 at 14:06
@sleepysimon You just need to add `onClick={this.props.onClick}` to the props on the `` element and that's it. – trixn May 20 '18 at 15:26
i did that, but still the field itself doesnt get updated. the layout and styling is fine, and moment selects the right date (today). but when i click in it, the calendar wont open. is there anything else to do? – sleepysimon May 20 '18 at 21:43
.. and i get tons of errors ".. is not assignable to type "intrinsicattributes ... – sleepysimon May 20 '18 at 21:53

Custom Input Field on datepicker

1 Answers1

Linked