How can I disable onClick on date label “March 2025”. I do not want users to click and select a year but navigate only via < > buttons

"@mui/x-date-pickers": "^6.19.8",

import { DatePicker } from '@mui/x-date-pickers/DatePicker';

          <LocalizationProvider dateAdapter={AdapterDayjs}>
            <DatePickerStyled
              onlyCalendar
              value={dayjs(testDate)}
              label={"test"}
              format="MMM D, YYYY"
              slotProps={{
                field: {
                  readOnly: true,
                },
                switchViewButton: {
                  sx: { display: 'none' },
                },
                textField: {
                  variant: 'standard',
                  InputProps: {
                    style: {
                      fontSize: '16px',
                    },
                  },
                },
              }}
            />
          </LocalizationProvider>

How can I disable onClick on date label “March 2025”. I do not want users to click and select a year but navigate only via < > buttons

"@mui/x-date-pickers": "^6.19.8",

import { DatePicker } from '@mui/x-date-pickers/DatePicker';

          <LocalizationProvider dateAdapter={AdapterDayjs}>
            <DatePickerStyled
              onlyCalendar
              value={dayjs(testDate)}
              label={"test"}
              format="MMM D, YYYY"
              slotProps={{
                field: {
                  readOnly: true,
                },
                switchViewButton: {
                  sx: { display: 'none' },
                },
                textField: {
                  variant: 'standard',
                  InputProps: {
                    style: {
                      fontSize: '16px',
                    },
                  },
                },
              }}
            />
          </LocalizationProvider>

• css
• reactjs
• material-ui
• mui-x-date-picker

Share Improve this question Follow asked Mar 13 at 14:18 John GlabbJohn Glabb 1,61388 gold badges3131 silver badges6464 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The dropdown that encapsulates the years isn't particularly a button or clickable element that you can call the disabled prop on. Rather, it is a popper that is used to display the years on top of the DatePicker component. See the docs on popper here: https://mui/material-ui/react-popper

A hacky way to prevent users from selecting the year is to target the labelContainer class of the MuiPickersCalendarHeader and apply a pointerEvents: none to it. This can be achieved in 2 ways. You can either override the style globally using the styleOverride property of the createTheme() or you can apply the style through the slotProps prop of the DatePicker.

To override the style of the labelContainer class of the MuiPickersCalendarHeader globally, you can implement the following method:

export const theme = createTheme({
//...rest of your theme customization
  components: {
    MuiPickersCalendarHeader: {
      styleOverrides: {
        labelContainer: {
          pointerEvents: "none",
        },
      },
    },
  }
})

But, if you want to apply the style just to the specific DatePicker component, then you can target the popper property of the slotProp and through the modifiers property, you can apply the pointerEvents: none style on the .MuiPickersCalendarHeader-labelContainer class.

        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <DatePickerStyled
            onlyCalendar
            value={dayjs(testDate)}
            label={"test"}
            format="MMM D, YYYY"
            slotProps={{
              field: {
                readOnly: true,
              },
              switchViewButton: {
                sx: { display: "none" },
              },
              textField: {
                variant: "standard",
                InputProps: {
                  style: {
                    fontSize: "16px",
                  },
                },
              },
              popper: {
                modifiers: [
                  {
                    name: "customStyle",
                    enabled: true,
                    phase: "write",
                    fn: ({ state }) => {
                      const labelContainer =
                        state.elements.popper.querySelector(
                          ".MuiPickersCalendarHeader-labelContainer"
                        );
                      if (labelContainer) {
                        (labelContainer as HTMLElement).style.pointerEvents =
                          "none";
                      }
                    },
                  },
                ],
              },
            }}
          />
        </LocalizationProvider>

You can read more about the popper modifiers here if you want to know more about it: https://popper.js./docs/v2/modifiers/

I hope this solves your challenge.