CODEWITHSUNDEEP
reactjsmaterial-ui
Andrej Denisov
Andrej Denisov

Reputation: 61

How can I get rid of input field in KeyboardDatePicker from Material UI?

Trying to use KeyboardDatePicker. In one form it is perfectly ok with input field, but in other place I need just an icon to open and choose the date.

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

Is it possible to set this with props?

Upvotes: 1

Views: 2519

Answers (1)

J&#243;zef Podlecki
J&#243;zef Podlecki

Reputation: 11283

With a bit of css you can hide it

<KeyboardDatePicker
  disableToolbar
  variant="inline"
  format="DD/MM/YYYY"
  value={selectedDate}
  onChange={onChange}
  className="styledKeyboardDatePicker"
  autoOk
  InputAdornmentProps={{ position: "start"}}
  KeyboardButtonProps={{
    'aria-label': 'change date',
  }}
/>

.styledKeyboardDatePicker .MuiInputBase-input {
  visibility: hidden;
  width: 0;
}

Another workaround is disabling it. It doesn't allow you to change input but icon still works.

<KeyboardDatePicker
  disableToolbar
  variant="inline"
  format="DD/MM/YYYY"
  value={selectedDate}
  onChange={onChange}
  autoOk
  InputAdornmentProps={{ position: "start"}}
  KeyboardButtonProps={{
    'aria-label': 'change date',
  }}
  disable
/>

Upvotes: 1

Related Questions