Material-UI日期选择器的图标不可见

Question

我在Datepicker组件function submit(){ var reflect = $('#searchReflect'); var boxText = document.getElementById('box').value; var blacklist = /<.*>/; boxText = boxText.replace(blacklist, ''); reflect.html('Your search for \'' + boxText + '\' returned nothing!'); $('#box').val(''); } 中使用material-ui，但日期选择器图标未显示。

请在此处找到代码和框链接：https://codesandbox.io/s/material-demo-7vzo5。

Answer 1

问题是您导入了两个不同的组件KeyboardDatePicker和DatePicker

import {
  KeyboardDatePicker,
  DatePicker
} from "@material-ui/pickers";
...
<KeyboardDatePicker
          disableToolbar
          InputAdornmentProps={{ position: "start" }}
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            "aria-label": "change date"
          }}
        />
        <DatePicker
          keyboard
          InputAdornmentProps={{ position: "start" }}
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={selectedDate}
          onChange={handleDateChange}
        />

KeyboardDatePicker有图标。 DatePicker没有图标。因此，您需要将DatePicker更改为KeyboardDatePicker

 <KeyboardDatePicker
          disableToolbar
          InputAdornmentProps={{ position: "start" }}
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            "aria-label": "change date"
          }}
        />
        <KeyboardDatePicker
          keyboard
          InputAdornmentProps={{ position: "start" }}
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={selectedDate}
          onChange={handleDateChange}
        />