On hover for dates - react-dates library

Question

I am using Airbnb's react-dates library, but in the documentation, I don't see a hover event for each of the dates in the calendar (cells).

How I can implement that logic? I need it to change the state.

This is my code:

render(){
  return(
    <>
      <DateRangePicker
        startDate={this.state.startDate}
        startDateId="rentStartDate"
        endDate={this.state.endDate}
        endDateId="rentEndDate"
        onDatesChange={this.onDatesChange}
        focusedInput={this.state.focusedInput}
        onFocusChange={focusedInput => this.setState({ focusedInput })}
        minimumNights={1}
        monthFormat="MMMM YYYY"
        withFullScreenPortal={this.isMobile()}
        small={true}
        readOnly={true}
        orientation={this.isMobile() ? 'vertical' : 'horizontal'}
        openDirection={'up'}
        keepOpenOnDateSelect={true}
        disableScroll={false}
        horizontalMargin={0}
        onBlur={this.onDayPickerBlur}
        showClearDates={true}
        renderCalendarInfo={this.renderInfoCont}
      />
    </>
  );
}

score 0 · Accepted Answer · answered Feb 12 '21 at 12:23

I did it with renderDayContents, because there is no prop for hover:

<DayPickerRangeController
  // other props here
  renderDayContents={(day) => {
    return (
      <div className="searchDay"
        onMouseEnter={() => onDateHover(day)}
        // onClick={() => day.onDayClick(day.day)}
      >{moment(day).format('D')}</div>)
  }}
/>
.....

and onDateHover:

const onDateHover = (date) => {
    console.log(date) 
}

I am using DayPickerRangeController, but I guess, it will works in the same way for other calendar components.

You can use and renderCalendarDay, but u need to set up manually all the functionallity for the day element

On hover for dates - react-dates library

1 Answers1