How to properly use hideDayPicker() public function from react-day-picker-input?

Question

I'm trying to hide my calendar by clicking the react-day-picker-input element again (it will open when you click it by default). For that, I have a state that records true or false when you click the element. The problem is that when I click again to hide it, it gives me the error below:

TypeError: calendarNode.hideDayPicker is not a function

I tried using showOverlay and hideDayPicker. I saw a code that works with buttons, but fails to achieve the results when you apply onClick to the DayPickerInput component (see below). https://codesandbox.io/s/oqm3p4j9rz

Here's my code (summarized):

onKeyPress = (event) => {
  event.preventDefault();
}

dateRestriction = () => {
  const date = new Date();
  const nutrition_offset = date.getTimezoneOffset() + 240;
  date.setMinutes(date.getMinutes() + nutrition_offset);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  let day = date.getDate();
  if ((date.getDay() === 4) || (date.getDay() === 5)) {
    if (date.getDate() < 5) {
      day = ('0' + (date.getDate() + 5));
    } else {
      day = date.getDate() + 5;
    }
  }
  if (date.getDay() === 6) {
    if (date.getDate() < 6) {
      day = ('0' + (date.getDate() + 4));
    } else {
      day = date.getDate() + 4;
    }
  }
  if ((date.getDay() === 0) || (date.getDay() === 1) || (date.getDay() === 2) || (date.getDay() === 3)) {
    if (date.getDate() < 7) {
      day = ('0' + (date.getDate() + 3));
    } else {
      day = date.getDate() + 3;
    }
  }
  let dateRestricted = this.parseDate_(year + '-' + month + '-' + day);
  this.setState({
    noDay: dateRestricted,
    showCalendar: true
  });

  this.handleDayPickerInputHide();
}

handleDayPickerInputHide = () => {
  const calendarNode = document.getElementsByName("date");
  if (this.state.showCalendar === false) {
    return;
  } else {
    calendarNode.hideDayPicker();
    this.setState = {
      showCalendar: false
    }
  }
}

render () {
    const { selectedDay } = this.state;
    return (
         <div>
          <DateObject
            inputProps={
              {className: 'dib nav pl2 pointer br3 shadow-1 dropdownButtonDate removeCursor bg-transparent pv1 mt2 typefaceFont dropdownText',
               onKeyDown: this.onKeyPress,
               onClick: this.dateRestriction,
               name: 'date',
               required: "required"}
            }
            value={selectedDay}
            onDayChange={this.handleDayChange}
            dayPickerProps={{
              selectedDays: selectedDay,
              disabledDays:
              [
                new Date(2019, 0, 1),
                new Date(2019, 11, 24),
                new Date(2019, 11, 25),
                new Date(2019, 11, 31),
              {
                daysOfWeek: [0, 6],
              },
              {
                before: new Date(this.state.noDay)
              }]
            }}
          />
        </div>
    )
  }

Expected: 1. Calendar is hidden initially (default behavior) 2. Click displays calendar (default behavior) 3. Click again to hide the calendar (NEEDED) 4. Click outside hides the calendar as well (default behavior) 5. Choose a date hides the calendar as well (default behavior)

Actual results: 1. Calendar is hidden initially (default behavior) 2. Click displays calendar (default behavior) 3. Click again to hide the calendar (ERROR) 4. Click outside hides the calendar as well (default behavior) 5. Choose a date hides the calendar as well (default behavior)

score 0 · Answer 1 · answered Dec 27 '18 at 19:17

FIGURED IT OUT!!!

There's no need to update the state, use DOM or attempt to run a public function from your react-app. All you need to do is update react-day-picker from your node_modules.

Man... This needs to go with their next version of react-day-picker... Check it out!

{
    key: 'handleInputClick',
    value: function handleInputClick(e) {
      //this.showDayPicker();
      if (this.props.inputProps.onClick) {
        e.persist();
        this.props.inputProps.onClick(e);
        if (this.state.showOverlay === false) {
          this.showDayPicker();
        }
        if (this.state.showOverlay === true) {
          this.hideDayPicker();
        }
      }
    }
  }, {
    key: 'handleInputFocus',
    value: function handleInputFocus(e) {
      var _this5 = this;

      //this.showDayPicker();
      // Set `overlayHasFocus` after a timeout so the overlay can be hidden when
      // the input is blurred
      this.inputFocusTimeout = setTimeout(function () {
        _this5.overlayHasFocus = false;
      }, 2);
      if (this.props.inputProps.onFocus) {
        e.persist();
        this.props.inputProps.onFocus(e);
      }
    }

Navigate to your node_modules directory and find DayPickerInput.js within ../node_modules/react-day-picker/lib/src/DayPickerInput.js
Comment out (or remove) this.showDayPicker() under 'handleInputFocus' and 'handleInputClick'.
Added the conditional below this.props.inputProps.onClick(e) (line 349) Note: There's no need to update showOverlay, as hideDayPicker() and showDayPicker() already do that.

How to properly use hideDayPicker() public function from react-day-picker-input?

1 Answers1