Mouse hover effect on range of days (v8)

[oudoulj]

Is it possible to achieve a mouseover/hover effect when selecting a date range in v8 ?

Like on Airbnb's react-dates
It would be sweet to be able to toggle that feature with a prop on the range mode 😄
Unless it's already doable and I missed it...
Thank you !

PS : I found the same request in this very old thread

[jomifepe]

Any update on this? This feature was in v7 and I don't think there's a way to have it in v8.

[gpbl]

I think this is achievable with the current CSS. What have you tried?

[berkin]

it is possible with modifiers.

        const middleDaysStyle = {
	        background: "var(--rdp-background-color)"
        };


	const [middleDays, setMiddleDays] = useState<Matcher | Matcher[]>([]);


	const handleMouseEnter: DayMouseEventHandler = day => {
		if (selected?.from) {
			setMiddleDays({
				from: addDays(selected.from, 1),
				to: addDays(day, -1)
			});
		}

	<DayPicker
		...
		onDayMouseEnter={handleMouseEnter}
		modifiers={{ middleDays }}
		modifiersStyles={{
			middleDays: middleDaysStyle
		}}
/>