如何在 MUI v5 中向 MobileDatePicker 添加图标

IT技术 reactjs material-ui
2021-05-21 21:00:37

这是代码的一部分:

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

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

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

1个回答

MobileDatePicker没有后缀的图标,因为你可以通过集中打开它TextField不像DesktopDatePicker,你必须点击图标打开拾取。但是,如果你仍然想反正到包括图标,只需添加一个在endAdornmentTextField

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

代码沙盒演示

相关回答