Search code examples
reactjsdatepickermaterial-ui

How to change the height of MUI Datepicker input box in React

<DesktopDatePicker
    label="Expiration Date"
    inputFormat="MM/dd/yyyy"
    value={self.didexpirationdate}
    onChange={(e)=>{
    setSelf({...self,didexpirationdate:e})
    }}
    renderInput={(params) => <TextField {...params} />}/>

How to set the height of this datepicker in react?

Solution

  • Date Component - V5

    TextField component is used as input box so you can directly add the size there. please refer https://mui.com/components/text-fields/#sizes

    ...
renderInput={(params) => <TextField size="small" {...params} />}/>

    Date Component - V6

    in V6 version slotProps is introduced to customise the appearance of date component. please refer https://mui.com/x/react-date-pickers/custom-field/ for more details.

    <DatePicker
  label="Small picker"
  slotProps={{ textField: { size: 'small' } }}
/>