Material-UI v5 Datepicker - expand to the full width of its parent

user_16902065 0
Viewed 7098

In Material-UI v4 the fullWidth prop could be passed to the Datepicker component. However, in v5 this prop is not listed in the component API. All css selectors for this component are non-deterministic and so I am unable to use the width css property. Is there any alternative that I have missed?

material-ui
2 Answers

Example: https://codesandbox.io/s/material-ui-v5-forked-fvc3er?file=/src/App.js

For both the DatePicker and TimePicker components in Material-UI v5, you need to set the renderInput prop. When using the TextField component as a rendering component, you can then use the fullWidth prop to expand to the width of its parent.

<DatePicker
  inputFormat="MM/dd/yyyy"
  value={date}
  onChange={(value) => setDate(value)}
  renderInput={(params) => <TextField {...params} fullWidth />}  <--- This right here
/>
user_29973630

For me the fullWidth Attribute didn't work. I am using the following versions: "@mui/lab": "^5.0.0-alpha.61", and "@mui/material": "^5.2.3".

My solution was simply exchange fullWidth width sx-styles like:

<DatePicker
  inputFormat="MM/dd/yyyy"
  value={date}
  onChange={(value) => setDate(value)}
  renderInput={(params) => <TextField {...params} sx={{width: '100%'}} />
user_81597380
Related