如何在 MUI v5 中将图标添加到 MobileDatePicker

Question

这是部分代码：

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

在移动端，他不显示触发器图标。

如何展示给用户一个明确的指示

Answer 1

MobileDatePicker

没有后缀图标，因为您可以通过聚焦

TextField

来打开它，而

DesktopDatePicker

则必须单击图标才能打开选择器。但是如果你仍然想包含图标，只需在

endAdornment

的

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

相关回答

• 如何更改MUI DatePicker中的图标？

Answer 2

如果您只想呈现图标而不是文本字段，@NearHuscarl 答案的补充。如下所示替换 renderInput 函数。也适用于

DatePicker

。 注意：示例使用

react-icons

svg 图标，但可以替换为 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>
        )}
    />
);