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

<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:

MM/DD/YYYY

<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.

MM/DD/YYYY

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

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

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

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

<DatePicker
  slotProps={{
    field: { openPickerButtonPosition: 'start' },
  }}
/>

<DatePicker
  slotProps={{
    field: { openPickerButtonPosition: 'start' },
  }}
/>

Press Enter to start editing

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

<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 (for example Date Range Picker), you need to use the textField slot to add one:

Start

04/18/2022

–

End

04/21/2022