toggle datepicker via renderInput prop

[MrJadaml]

I'm Submitting a ...

[ ] Bug report
[ ] Feature request
[x] Support request

Steps to Reproduce

This is just one of many permutations that fall just short of fully working. The close/open Fns are not being called unless provided directly to the onClick though I am then unable to toggle the local state for tracking if the calendar is open or not to manage other elements in the view.

This is taken from the following example in the docs here: https://github.com/YouCanBookMe/react-datetime#customize-the-input-appearance

I don't want two buttons though, just one that toggles.

  renderInput(props, openCalendar, closeCalendar) {
    const { isFocused } = this.state;
    const handleToggle = () => {
      isFocused ? closeCalendar() : openCalendar();
      this.setState({ isFocused: !this.state.isFocused });
    }

    return <SelectArrow direction={isFocused} onClick={handleToggle}></SelectArrow>
  }

  render() {
    return (
          <DatePickerWrapper >
            <DateTime
              value={this.props.value}
              onChange={this.onChange}
              renderInput={this.renderInput}
            />
          </DatePickerWrapper>
    )

Expected Results

I would expect the above to be able to toggle the calendar open/closed

Actual Results

Only the arrow direction changes from up to down. No calendar appears.

I think the approach for this would likely make use of the open prop, but there are some issues blocking that from working as documented in other currently open issues.

[fabianTMC]

+1

[gaborvrg]

You don't need update the state, I think. This is a working version for me. I added a ref to the DatePicker.

const renderInput = (props, openCalendar, closeCalendar) => {
  const handleToggle = () => {
    if (datetimeRef) {
      datetimeRef.current.state.open ? closeCalendar() : openCalendar();
    }
  };
  return (
    <>
      <input {...props} />
      <Icon onClick={handleToggle} />
    </>
  );
};

<Datetime renderInput={renderInput} ref={datetimeRef} />;