DateRangeCalendar - Styling past dates about mui-x HOT 8 CLOSED

Since @mightym is OK with the workaround and @mui/explore does not plan to add a className I will close this now. Feel free to reopen if you have objections.

from mui-x.

Hey, @mightym 👋

Thanks for bringing this up! We currently do not differentiate the past or future dates with css classes. I think it might be a good idea to add that in, and I will make sure to bring this up!

In the meantime, I think there might be a a somewhat hacky solution for styling the day slot conditionally with styled components. One of the props the DateRangePickerDay receives is day which is basically the value that it represent. You can use that to figure out whether the day you are styling is before or after the current date, and style it accordingly.

const StyledDay = styled(DateRangePickerDay)(({ day }) => {
  // use the day to apply conditional styling
  return {
    // styles
  };
});

And use it like this:

<DateRangePicker
  slots={{ day: StyledDay }}
/>

Let me know if this helps 🛩️

from mui-x.

@noraleonte thanks a lot for your reply. Yeah I'm basically using such a workaround for now.

from mui-x.

@mightym Could you provide a reproduction case for this? I would like to understand exactly what you are trying to achieve and provide more suitable solution for your problem 😄

from mui-x.

@noraleonte Our Calendar Component basically needs to indicate visually between 3 Date Types -> Today (this is what the current MUI calendar already does), Days before Today, Days after Today. The last 2 can be achieved if you know either which is a past day or a future day. So that you can do something like this:

Which I'm currently doing like you proposed: If a day is older than today give the element a different styling. Which is fine.
I just wanted to point out that it might be helpful for other people if the past days or future days have by default a class which could be used for styling.

from mui-x.

Are your paste dates selectable?
My main concern here is that visually, what you are trying to achieve look a lot like a disabled date (which could be done using the disablePast prop).
But if it's selectable, then the UX can be misleading.

from mui-x.

They are selectable. But maybe my usecase is too special. The purpose in my case is basically giving the user a quick overview what is in the past (not that important) and what is in the future. Don't bother yourself too much with it guys. The workaround works great in my case.

from mui-x.

We discussed it on Monday.
We will not add a className because it's too specific to be in everybody's bundle.

With the current API, the best solution for you is probably to use the theme style overrides if it's pure CSS (see https://codesandbox.io/s/date-and-time-pickers-forked-zp2j6l?file=/src/App.tsx) or the day slot if you need deeper changes.

from mui-x.