To incorporate an icon into MobileDatePicker in MUI v5, you can use the InputProps
property and pass an endAdornment
prop with the icon component.
import { MobileDatePicker, InputAdornment, IconButton } from "@mui/lab";
import EventIcon from "@mui/icons-material/Event";
<MobileDatePicker
label="Date"
value={selectedDate}
onChange={handleDateChange}
renderInput={(params) => (
<TextField
{...params}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton>
<EventIcon />
</IconButton>
</InputAdornment>
),
}}
/>
)}
/>
In the example above, we import the IconButton
component from MUI and the EventIcon
from the Material Icons library. We then pass this icon component to the InputAdornment
component, which we pass to the endAdornment
prop of InputProps
within the renderInput
prop of MobileDatePicker
.
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
Asked: 2023-07-07 03:41:02 +0000
Seen: 8 times
Last updated: Jul 07 '23
What is the method for altering the outline/border of a disabled OutlinedInput in MUI?
What is the correct method for personalizing various features in React MUI?
Is it mandatory for all pages to be CSR when using the new app directory in NextJS 13 with MUI?
Can the MUI DatePicker be utilized for dates without the dependence on a 3rd party library?