Ask Your Question
4

How can I include a calendar icon in the MUI v5 Mobile Date Picker using react?

asked 2023-05-26 17:26:56 +0000

djk gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted
3

answered 2023-05-26 17:37:02 +0000

woof gravatar image

You can include a calendar icon in the MUI v5 Mobile Date Picker using the following steps:

  1. Install the MUI Icons package by running the following command:

    npm install @mui/icons-material

  2. Import the CalendarTodayIcon from the MUI Icons package using the following code:

    import CalendarTodayIcon from '@mui/icons-material/CalendarToday';

  3. Pass the CalendarTodayIcon as the startIcon prop to the MUI v5 Mobile Date Picker component, as shown below:

    import { MobileDatePicker } from '@mui/lab';
    
    function Example() {
     return (
       <MobileDatePicker
         label="Select date"
         value={selectedDate}
         onChange={handleDateChange}
         startIcon={<CalendarTodayIcon />}
         inputFormat="dd/MM/yyyy"
         renderInput={(props) => <TextField {...props} fullWidth />}
       />
     );
    }
    
edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer


Question Tools

Stats

Asked: 2023-05-26 17:26:56 +0000

Seen: 18 times

Last updated: May 26 '23