[pickers] Add viewRenderers documentation

[Semigradsky]

Edit

The new purpose of the issue is mentioned here.

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

There is the solution for customizing days - https://mui.com/x/react-date-pickers/date-picker/#customized-day-rendering

Need to have a solution for customizing months and years.

Examples 🌈

renderMonth and renderYear properties?

Motivation 🔦

No response

Order ID 💳 (optional)

No response

[flaviendelangle]

I would indeed be nice to be able to customize the year / month

@alexfauquette for day / month / year custom rendering, should be also use component slots ? (so replace props.renderDay by a props.components.Day)

[alexfauquette]

Yes, the slot seems to work well on datagrid, so we could reuse it here.

@Semigradsky What do you want to perform with custom month/year? Most of the modifications can be done with CSS class names

[Semigradsky]

@alexfauquette My current need - specially display 'today' month/year. For example, today (2022-04-26) 'today month' is April and 'today year' is 2022.

[alexfauquette]

Showing today does not feel like an isolated use-case. We could add a .MuiPickersYear-today and .MuiPickersMonth-today like we already have .MuiPickersDay-today

[Semigradsky]

We could add a .MuiPickersYear-today and .MuiPickersMonth-today like we already have .MuiPickersDay-today

And renderMonth/renderYear?

[flaviendelangle]

We plan to create those two 👍

[LukasTy]

The ability to override views has been added via viewRenderers in v6.
The issue is that it has not yet been documented well and the only single example of its usage is given in the migration guide.

If you do have the time and need, could you please investigate if this option covers your use case?

As for the issue. I'm renaming it to cover the implementation of the viewRenderers documentation with examples.

[sarink]

I'm trying to highlight specific days on the date picker, it sounds like viewRenderers is the new way to do that? Does anyone have any examples of how to use them yet?

[LukasTy]

@sarink viewRenderers are for providing a totally custom view.
If you need to highlight specific days, there are definitely better ways to do it. Consider using slotProps.day.
Try checking this example, maybe it will help steer you in the right direction. 🤔

[MonstraG]

The ability to override views has been added via viewRenderers in v6. The issue is that it has not yet been documented well and the only single example of its usage is given in the migration guide.

If you do have the time and need, could you please investigate if this option covers your use case?

As for the issue. I'm renaming it to cover the implementation of the viewRenderers documentation with examples.

Well, I need a "quarter" view, which I thought would be an easy job, basically taking month view and going from 12 to 4 items.

If I understood correctly, I would now need to copy-paste renderDateViewCalendar, <DateCalendar/>, and ~every /internals/ import from there, to be able to do this?

[LukasTy]

Well, I need a "quarter" view, which I thought would be an easy job, basically taking month view and going from 12 to 4 items.

Oh, such a change would be hardly trivial, because it's technically a separate view and would be easier to implement if we had this view in the options.
You could technically consider hacking such view in and think of a trigger on how to open it, be it the toolbar or somewhere else, but I can't guarantee that it would work without major problems.

Another option, as you've said, would be to create your own DateCalendar having the toggle inside of it, but that's also somewhat tedious.
#7784 should technically allow changing the very place, where such view changing triggers would make the most sense. Without it, I would hardly imagine a sustainable way to introduce such a view. 🤔

[MonstraG]

Well, I need a "quarter" view, which I thought would be an easy job, basically taking month view and going from 12 to 4 items.

Oh, such a change would be hardly trivial, because it's technically a separate view and would be easier to implement if we had this view in the options. You could technically consider hacking such view in and think of a trigger on how to open it, be it the toolbar or somewhere else, but I can't guarantee that it would work without major problems.

Another option, as you've said, would be to create your own DateCalendar having the toggle inside of it, but that's also somewhat tedious. #7784 should technically allow changing the very place, where such view changing triggers would make the most sense. Without it, I would hardly imagine a sustainable way to introduce such a view. 🤔

Yea, I tried that, and the easies way is copy those two files, change imports of internals, from relative to project, (+ add the package into transpilePackages in next.config.js because they are ESM), and finally replace the picker for months for a quarters one, but too complex, and I decided to just make one from scratch instead.

[Semigradsky]

Looks like viewRenderers not available for DateCalendar 🤔

[flaviendelangle]

The views are the UIs rendered inside the Modal/Popupe of the pickers.
The DatePicker uses a view for the date that renders DateCalendar.

This is a tool that is only built for the pickers.

[Semigradsky]

DateCalendar has views property too.

[flaviendelangle]

Yes it does
Those are not the same concept, even though I do agree it's confusing and we should clean it at some point.
I wrote some of my thoughts in #8989 a few months ago.

Basically, the views prop defines which parts of the date you want to edit and the viewRenderers define how to edit them on the pickers.

[Semigradsky]

Ok, are there any plans to adding viewRenderers to DateCalendar or slots month/year (in the same way as we have day slot)?

[flaviendelangle]

are there any plans to adding viewRenderers to DateCalendar

No, it's not something we are considering for now.
But if there is enough traction, we can of course do it at some point.

or slots month/year (in the same way as we have day slot)?

If what you are trying is to override a single month / year button, then sure we can add those slots.
It's a topic mentionned in #6488 but made it a duplicate of this one which is wrong 🤔

[Semigradsky]

to override a single month / year button

Yeah, that is what I need 🙏

[carlosgl93]

Ok, are there any plans to adding viewRenderers to DateCalendar or slots month/year (in the same way as we have day slot)?

i would also appreciate this feature.