CODEWITHSUNDEEP
reactjsmaterial-ui
Rateltalk
Rateltalk

Reputation: 131

How to add Icon to MobileDatePicker in MUI v5

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.

Upvotes: 7

Views: 6557

Answers (2)

Callum
Callum

Reputation: 115

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

Upvotes: 0

NearHuscarl
NearHuscarl

Reputation: 81310

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

Upvotes: 9

Related Questions