Custom opening button

The date picker lets you customize the button to open the views.

Set a custom opening icon

If you want to change the icon opening the picker without changing its behavior, you can use the openPickerIcon slot:

Departure

MM/DD/YYYY

Arrival

MM/DD/YYYY

New release date

MM/DD/YYYY

You can also change the icon rendered based on the current status of the picker:

MM/DD/YYYY

import * as React from 'react';
import type { Dayjs } from 'dayjs';
import PriorityHighIcon from '@mui/icons-material/PriorityHigh';
import CheckIcon from '@mui/icons-material/Check';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function CustomOpeningIconConditional() {
  const [value, setValue] = React.useState<Dayjs | null>(null);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker']}>
        <DatePicker
          value={value}
          onChange={setValue}
          slots={{
            openPickerIcon:
              value == null || !value.isValid() ? PriorityHighIcon : CheckIcon,
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

Pass props to the opening button

If you want to customize the opening button without redefining its whole behavior, you can use either:

the openPickerButton slot to target the IconButton component.
the inputAdornment slot to target the InputAdornment component.

MM/DD/YYYY

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function CustomPropsOpeningButton() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker']}>
        <DatePicker
          slotProps={{
            // Targets the `IconButton` component.
            openPickerButton: {
              color: 'primary',
            },
            // Targets the `InputAdornment` component.
            inputAdornment: {
              component: 'span',
            },
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

If you want to track the opening of the picker, you should use the onOpen / onClose callbacks instead of modifying the opening button:

<DatePicker onOpen={handleOpen} onClose={handleClose} />

Render the opening button at the start of the input

You can use the openPickerButtonPosition on the field slot to position the opening button at the start or the end of the input:

MM/DD/YYYY

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

export default function StartEdgeOpeningButton() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker']}>
        <DatePicker
          slotProps={{
            field: { openPickerButtonPosition: 'start' },
          }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

Add an icon next to the opening button

If you want to add an icon next to the opening button, you can use the inputAdornment slot. In the example below, the warning icon will be visible anytime the current value is invalid:

Picker with error icon

04/18/2022

To add the same behavior to a picker that does not have an input adornment (for example, a Date Range Picker when used with a multi-input field), you need to use the textField slot to add one:

Start

04/18/2022

–

End

04/21/2022