[pickers] Custom toolbar is not overriding the header label and arrow icons in date-picker

[venkateshpullaganti]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

I searched the docs and issues but not able to find a solution. I might be missing something.

import React from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import enLocale from 'date-fns/locale/en-US';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { FormControl, TextField } from '@material-ui/core';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import styled from 'styled-components';
import css from './styles.module.scss';

const CustomToolbar = (props) => {
    console.log('TCL: CustomToolbar -> props', props);
    return (
        <div>
            Custom Toolbar:
            <button onClick={() => props.setOpenView('year')}>Year</button>
            <button onClick={() => props.setOpenView('month')}>Month</button>
            <button onClick={() => props.setOpenView('day')}>Day</button>
        </div>
    );
};

export default function index() {
    return (
        <Wrapper className={css.wrapper}>
            <LocalizationProvider
                dateAdapter={AdapterDateFns}
                adapterLocale={enLocale}
            >
                <DatePicker
                    value={new Date()}
                    closeOnSelect
                    views={['year', 'month', 'day']}
                    onChange={console.log}
                    renderInput={(params: any) => (
                        <FormControl fullWidth>
                            <TextField {...params} fullWidth />
                        </FormControl>
                    )}
                    showToolbar
                    ToolbarComponent={CustomToolbar}
                />
            </LocalizationProvider>
        </Wrapper>
    );
}

const Wrapper = styled.div`

`;

Current behavior 😯

Expected behavior 🤔

The Month name, year and the arrow buttons should not be visible.

Context 🔦

I am trying to achieve the

Your environment 🌎

Environment Details:

• Mac book pro m1
• Chrome 109
• Node : 18.8.0
• Ts : 4.8.4
• Next js : 12.13.1
• React 18.2.0

Order ID 💳 (optional)

No response

[flaviendelangle]

The header you are referring to is not the toolbar but the header of the date views (day, month and year).
The toolbar is common to any view whereas this header will not appear on the time views.

We have the issue #6653 which focuses on the override of this part of the UI.
I think it would solve your problem as well.
Once this slot is implemented, you would just have to pass a component returning null to it (or we would support the value null like we do on the grid to say to render nothing.

I'll close this issue after you confirm that I understood your need correctly, so that we keep a single issue 👍

As for the time it will take for this feature to land.
Since it's the 2nd use case for this exact same slot, I think we can create it in the near future 👍

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.