[pickers] How to customize the DatePicker calendar header?

[sirius829]

Hi there,
Currently I am trying to make MD3 Datepicker with MUI X Date picker.

I want to add custom year select and month select on calendar header.
Here is my code for it.

function CustomCalendarHeader(props: PickersCalendarHeaderProps<Dayjs>) {
    const { currentMonth, onMonthChange, onViewChange } = props;
    const [selectedMonth, setSelectedMonth] = useState(currentMonth.month());
    const [selectedYear, setSelectedYear] = useState(currentMonth.year());
    const [view, setView] = useState<DateView>('month');
    useEffect(() => {
        setSelectedMonth(currentMonth.month());
        setSelectedYear(currentMonth.year());
    }, [currentMonth]);

    useEffect(() => {
        if (onViewChange)
            onViewChange(view);
    }, [view]);

    const selectNextMonth = () => onMonthChange(currentMonth.add(1, 'month'), 'left');
    const selectNextYear = () => onMonthChange(currentMonth.add(1, 'year'), 'left');
    const selectPreviousMonth = () => onMonthChange(currentMonth.subtract(1, 'month'), 'right');
    const selectPreviousYear = () => onMonthChange(currentMonth.subtract(1, 'year'), 'right');

    const months = Array.from({ length: 12 }, (_, index) => currentMonth.month(index).format('MMMM'));
    const years = Array.from({ length: 20 }, (_, index) => currentMonth.year() - 10 + index);

    return (
        <CustomCalendarHeaderRoot>
            <Stack spacing={1} direction="row" alignItems="center">
                <IconButton onClick={selectPreviousMonth} title="Previous month">
                    <ChevronLeft />
                </IconButton>
                <Button variant="text" color="primary" onClick={() => {onViewChange && onViewChange("month")}}>
                    {selectedMonth}
                </Button>
                <IconButton onClick={selectNextMonth} title="Next month">
                    <ChevronRight />
                </IconButton>
            </Stack>
            <Stack spacing={1} direction="row" alignItems="center">
                <IconButton onClick={selectPreviousYear} title="Previous year">
                    <KeyboardDoubleArrowLeftIcon />
                </IconButton>
                <Button variant="text" color="primary" onClick={() => {onViewChange && onViewChange("year")}}>
                    {selectedYear}
                </Button>
                <IconButton onClick={selectNextYear} title="Next year">
                    <KeyboardDoubleArrowRightIcon />
                </IconButton>
            </Stack>
        </CustomCalendarHeaderRoot>
    );
}

It shows UI but how can I go to Year select view when I click year, and go back to day view when I click the specific year.
Of course should be same for month too.

Search keywords:

Search keywords:

[michelengelen]

Hey @sirius829 we do have a section about customizing the parts of the pickers in the docs. This one is specifically about the Toolbar (the calendar header)

[LukasTy]

@michelengelen I think you wanted to refer to the calendarHeader slot customization, didn't you? 🤔

In regards to the problem itself, I think that your best bet @sirius829 is to create your own year and month viewRenderers, which you'd pass to your Picker component.
That is not a small feat. 🙈
That's why we did not rush implementing the MD3 behavior.

Currently the DateCalendar is used to render all the date views (year, month, and day), but in your case, you'd need to have different views for the year and month.

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.