[DateRangePicker] Day component not supporting DateRange some props

[bneigher]

I'm implementing a custom Day UI to live in the DateRange picker. It looks like this:

You can see that in this date range, none of the IN RANGE days are highlighted, which is odd.
I'm seeing some errors in the console:

React does not recognize the `isEndOfHighlighting` prop on a DOM element
React does not recognize the `isStartOfHighlighting` prop on a DOM element.
React does not recognize the `isHighlighting` prop on a DOM element.
React does not recognize the `isEndOfPreviewing` prop on a DOM element.
React does not recognize the `isStartOfPreviewing` prop on a DOM element.
React does not recognize the `isPreviewing` prop on a DOM element.

Which leads me to believe that some of the date range props are not supported in the Day component.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Day component not rendering isHighlighting days in the date range

Expected Behavior 🤔

Day range should render highlighted zone correctly as it does without specifying the custom renderDay method:

Here is a simplified version of a renderDay with shows issue

const renderDayInPicker = (day, dateProps) => {
	return <Day {...dateProps} />
}

Steps to Reproduce 🕹

https://codesandbox.io/s/headless-sun-ig04d

Your Environment 🌎

Tech	Version
@material-ui/core	v4.11.0
@material-ui/pickers	v4.0.0-alpha.9
React	16.13.1
Browser	Chrome
TypeScript	no

[oliviertassinari]

@bneigher Awesome feedback, thanks for raising. I have updated your codesandbox to work with the latest version: https://codesandbox.io/s/strange-dirac-pcplh. We have started to surface the problem in mui/material-ui-pickers#2006.

We have two different components internally PickersDay and PickersDayRange, and yet we have the same prop renderDay API with two different API between a DatePicker and DateRangePicker. This is confusing.

I think that we should differentiate the two. I believe the RFC in: mui/material-ui#21453 will solve this problem.

<DateRangePicker components={{ Day: PickersDay, DayRange: PickersDayRange }}

So that @bneigher can use the same custom PickersDay component between day and day ranges.

[MirkoTV]

Any progress on this one? I couldn't either import PickersDayRange. Looks like we do not expose that:

import { PickersDayRange } from '@material-ui/pickers';
Not works :)

I noticed this is tagged for v5 but is there a chance we could just expose PickersDayRange in the library for now? I think that would help a lot at least for minor customizations like basic css. Right now I am really blocked by this one, and I would just like to add background to some specific days

I am using 4.0.0-alpha.12 version of the lib

Thanks a lot for the excellent library btw!

[leolozes]

I am facing the same issue, I want to add some custom elements to the calendar days, but without messing with the selection (which is awesome BTW).
I tried to find the code to replicate the selection behaviour (kind of like the one that is in the docs of the Customized day rendering), but no luck either.

I'm using the lab version v5.0.0-alpha.17, and getting the same warnings as @bneigher.

Keep up the great work and thank you for providing us with this awesome library!

[cherniavskii]

Still an issue with @mui/x-date-pickers-pro: https://codesandbox.io/s/ancient-silence-zmpd5p?file=/package.json

[m4theushw]

The component used to render days inside DateRangePicker can now be imported as DateRangePickerDay:

import { DateRangePickerDay } from '@mui/x-date-pickers-pro';

CodeSandbox: https://codesandbox.io/s/ancient-silence-zmpd5p?file=/src/demo.jsx

Docs: https://mui.com/x/react-date-pickers/date-range-picker/#customized-day-rendering

We plan to migrate the API to a slot approach, same as the DataGrid, so I'll close this one in favor of #4466