如何在 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中的图标？