[英]On hover for dates - react-dates library
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) .我正在使用 Airbnb 的react-dates库,但在文档中,我没有看到日历(单元格)中每个日期的悬停事件。
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}
/>
</>
);
}
I did it with renderDayContents
, because there is no prop for hover
:我用
renderDayContents
,因为没有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
:和
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.我正在使用
DayPickerRangeController
,但我想,对于其他日历组件,它会以相同的方式工作。
You can use and renderCalendarDay
, but u need to set up manually all the functionallity for the day element您可以使用和
renderCalendarDay
,但您需要手动设置 day 元素的所有功能
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.