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

Arrival

New release date

<DatePicker
  label="Departure"
  // Using an SVG component from `@mui/icons-material`
  slots={{ openPickerIcon: FlightTakeoffIcon }}
/>
<DatePicker
  label="Arrival"
  // Using a custom SVG component
  slots={{ openPickerIcon: FlightLandIcon }}
/>
<DatePicker
  label="New release date"
  // Using an img component
  slots={{ openPickerIcon: MuiIcon }}
/>

<DatePicker
  label="Departure"
  // Using an SVG component from `@mui/icons-material`
  slots={{ openPickerIcon: FlightTakeoffIcon }}
/>
<DatePicker
  label="Arrival"
  // Using a custom SVG component
  slots={{ openPickerIcon: FlightLandIcon }}
/>
<DatePicker
  label="New release date"
  // Using an img component
  slots={{ openPickerIcon: MuiIcon }}
/>

Press Enter to start editing

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

<DatePicker
  value={value}
  onChange={setValue}
  slots={{
    openPickerIcon:
      value == null || !value.isValid() ? PriorityHighIcon : CheckIcon,
  }}
/>

<DatePicker
  value={value}
  onChange={setValue}
  slots={{
    openPickerIcon:
      value == null || !value.isValid() ? PriorityHighIcon : CheckIcon,
  }}
/>

Press Enter to start editing

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.

<DatePicker
  slotProps={{
    // Targets the `IconButton` component.
    openPickerButton: {
      color: 'primary',
    },
    // Targets the `InputAdornment` component.
    inputAdornment: {
      position: 'start',
    },
  }}
/>

<DatePicker
  slotProps={{
    // Targets the `IconButton` component.
    openPickerButton: {
      color: 'primary',
    },
    // Targets the `InputAdornment` component.
    inputAdornment: {
      position: 'start',
    },
  }}
/>

Press Enter to start editing

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} />

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

<DatePicker
  label="Picker with error icon"
  maxDate={dayjs('2022-04-17')}
  defaultValue={dayjs('2022-04-18')}
  onError={setError}
  slots={{ inputAdornment: CustomInputAdornment }}
  slotProps={{
    inputAdornment: { hasError: !!error } as any,
  }}
/>

<DatePicker
  label="Picker with error icon"
  maxDate={dayjs('2022-04-17')}
  defaultValue={dayjs('2022-04-18')}
  onError={setError}
  slots={{ inputAdornment: CustomInputAdornment }}
  slotProps={{
    inputAdornment: { hasError: !!error } as any,
  }}
/>

Press Enter to start editing

To add the same behavior to a picker that do not have an input adornment (e.g: Date Range Picker), you need to use the textField slot to add one:

Start

–

End