This is part of the code:
<MobileDatePicker
showTodayButton
showToolbar={false}
disableCloseOnSelect={false}
inputFormat="YYYY-MM-DD"
views={['day']}
value={row.value}
onChange={(newValue) => row.onChange(newValue)}
renderInput={(params) => (
<InputBase {...params} className={classes.datePicker} />
)}
/>
On the mobile side, he does not show trigger Icon.
How to display to give users a clear indication.
The MobileDatePicker doesn't have a suffix icon because you can open it by focusing the TextField unlike the DesktopDatePicker where you have to click the icon to open the picker. But if you still want to include the icon anyway, just add one in the endAdornment of the TextField:
import InputAdornment from '@mui/material/InputAdornment';
import EventIcon from '@mui/icons-material/Event';
const [value, setValue] = React.useState<Date | null>(new Date());
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<MobileDatePicker
label="For mobile"
value={value}
open={open}
onOpen={handleOpen}
onClose={handleClose}
onChange={setValue}
renderInput={(params) => (
<TextField
{...params}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton edge="end" onClick={handleOpen}>
<EventIcon />
</IconButton>
</InputAdornment>
),
}}
/>
)}
/>
);
