[pickers] Quarter Picker - CSS guru/genious

[david-ic3]

The problem in depth

I know that a quarter picker is not planned but we need one for some scenarios.

So in the meantime, the idea is to select all months of a quarter in the date picker using slotProps :

_<DatePicker
    label={'"month"'}
    openTo="month"
    views={['year', 'month']}
    value={value}
    onChange={(newValue) => setValue(newValue)}
    slotProps={{
        layout: {
            sx: (theme: Theme) => ({
                [".MuiMonthCalendar-root > :nth-child(" + (quarterValue + 1) + ") , " +
                ".MuiMonthCalendar-root > :nth-child(" + (quarterValue + 2) + ") , " +
                ".MuiMonthCalendar-root > :nth-child(" + (quarterValue + 3) + ")"]: {
                    backgroundColor: "lightblue",
                },
                ".MuiMonthCalendar-root .MuiPickersMonth-monthButton.Mui-selected": {
                    color: 'unset',
                    backgroundColor: 'transparent'
                }
            })
        }
    }}_

The code is available here.

The selection is fine, but is there a way to have also the hover effect on the quarters ?

Your environment

No response

Search keywords: quarter date picker

Order ID: 19458

[michelengelen]

Hey @david-ic3 ... you can take the same approach as it is shown here

Here is a quick demo for you: Quarter picker

Sry that it took so long ... wasn't super straightforward to build.

@LukasTy should we add this as a recipe to the docs?

[david-ic3]

@michelengelen , thanks but it looks as the DatePicker has no monthButton slots

MUI-doc

[noraleonte]

Hi @david-ic3 👋
You can use the monthButton slot on the DatePicker too if needed 👍 I took the liberty of updating Michel's demo here

@michelengelen I would be in favor of adding something like this to the docs 👌

[LukasTy]

@michelengelen @noraleonte This looks like a nice demo, but I'm not sure using DatePicker is the right move. 🙈
It just shows that we do not support quarters at all. 🤷

[michelengelen]

@LukasTy that's what I was thinking as well ... just looked it up and we would need to build our custom quarter support for it...

[LukasTy]

Hey, @david-ic3.
We have discussed this topic among the team and feel that providing this example in the documentation might create unnecessary problems/questions, because of the solution's incompleteness. 🙈

We have an issue tracking the quarter picker implementation: #15117 that you can reference.

Did the provided solution solve your problem or do you feel something is still missing? 🤔

[david-ic3]

@LukasTy , thanks.

You do not need to hide the reality, quarters are not supported. But as you are such a nice team you provided a workaround that is good enough for us.

Merci

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@david-ic3 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.