Custom Input Field On Datepicker

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.

Solution 1:

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.

constInput = ({onChange, placeholder, value, isSecure, id, onClick}) => (
    <inputonChange={onChange}placeholder={placeholder}value={value}isSecure={isSecure}id={id}onClick={onClick}
    />
);

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

classAppextendsComponent {
    state = {
        value: moment(),
    };

    render() {
        return (
            <div><DatePickervalue={this.state.value}dateFormat="DD.MM.YYYY"customInput={<Input />}
                    selected={this.state.date}
                    onChange={date => this.setState({date})}
                />
                <DatePickervalue={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:

constClickableInput = ({onClick, ...props}) => (
    <divonClick={onClick}><Input {...props}></div>
);

Then use ClickableInput instead of Input as your custom input.