mui
[pickers] Add `viewRenderers` documentation
Edit
The new purpose of the issue is mentioned here.
Duplicates
- [X] I have searched the existing issues
Latest version
- [X] 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
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)
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
@alexfauquette My current need - specially display 'today' month/year. For example, today (2022-04-26) 'today month' is April and 'today year' is 2022.
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
We could add a .MuiPickersYear-today and .MuiPickersMonth-today like we already have .MuiPickersDay-today
And renderMonth/renderYear?
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.
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?
@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. 🤔
The ability to override views has been added via
viewRenderersin 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
viewRenderersdocumentation 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?
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.
https://github.com/mui/mui-x/pull/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. 🤔
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
DateCalendarhaving 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.
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.
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.
Ok, are there any plans to adding viewRenderers to DateCalendar or slots month/year (in the same way as we have day slot)?
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 https://github.com/mui/mui-x/issues/6488 but made it a duplicate of this one which is wrong :thinking:
Ok, are there any plans to adding
viewRendererstoDateCalendaror slotsmonth/year(in the same way as we havedayslot)?
i would also appreciate this feature.
