CODEWITHSUNDEEP
reactjsmaterial-uidatepicker
MJ DEV
MJ DEV

Reputation: 704

Add calendar icon to MUI v5 Mobile Date Picker in react

I have tried with @mui/x-date-pickers library to add mobile date picker. But in this mobile date picker don't have an icon of calendar. So I need to add a calender icon to this.

I read their document and they have introduced a new slots prop into this component.

<MobileDatePicker
 label="Start Date"
 format="MM/dd/yyyy"
 value={new Date(values.startDate)}
 onChange={(e) => handleDateChange(e, 'startDate')}
 slots={{
    textField: customOpenPickerIcon,
 }}
 />

and this is imports of my mobile date picker.

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

and this is my calendar icon component.

const customOpenPickerIcon = () => {
    return (
      <TextField InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <Calendar />
          </InputAdornment>
        ),
      }}
      />
    );
  };

my datepicker version is 6.

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

But this is not working. Can anyone give an idea?

Upvotes: 0

Views: 2413

Answers (1)

Endo Aki
Endo Aki

Reputation: 154

You have to use slotProps. I made an example working on stackblitz.

https://stackblitz.com/edit/react-wafgu1?file=src%2FApp.js,src%2FMobileDatePickerWithCalendarIcon.js

Please check it.

Upvotes: 4

Related Questions