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

问题描述

这是代码的一部分：

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

在移动端，他没有显示触发图标。

如何显示给用户一个清晰的指示。

标签： reactjsmaterial-ui

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

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

问题描述

解决方案

相关答案

推荐阅读