CODEWITHSUNDEEP
reactjsmaterial-ui
kshitij
kshitij

Reputation: 624

Material-UI date pickers' Icons are not visible

enter image description hereI am using material-ui for Datepicker component import Grid from "@material-ui/core/Grid"; date picker icons are not showing.

Please find codesandbox link here: https://codesandbox.io/s/material-demo-7vzo5.

Upvotes: 2

Views: 7139

Answers (1)

Tien Duong
Tien Duong

Reputation: 2595

The problem is you import 2 different components, KeyboardDatePicker and 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 has icon. DatePicker has no icon. So you need to change DatePicker to 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}
        />

Upvotes: 6

Related Questions