6

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.

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
Rateltalk
  • 121
  • 2
  • 8
  • What framework are you using? Flutter? Or something else? If Flutter, please put [Flutter] before the title of the question. Just put the name of the framework in the title. It would help us greatly in order to answer. – Roslan Amir Nov 02 '21 at 03:11

2 Answers2

9

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>
          ),
        }}
      />
    )}
  />
);

Codesandbox Demo

Related answer

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
0

An addition to @NearHuscarl answer if you would like to render only the icon and not the textfield. Replace the renderInput function as below. Will also work for DatePicker. Note: example uses react-icons svg icon but can be replaced with mui IconButton.

import { Box, InputAdornment } from "@mui/material";
import { IoMdCalendar as CalendarIcon } from "react-icons/io";
    
...

return (
    <MobileDatePicker
        ...
        renderInput={({ inputRef, InputProps }) => (
          <Box sx={{}} ref={inputRef}>
            {InputProps ? (
              <InputAdornment position="end">
                <CalendarIcon onClick={handleOpen} />
              </InputAdornment>
            ) : undefined}
          </Box>
        )}
    />
);
Callum
  • 55
  • 6