CODEWITHSUNDEEP
reactjsdatepickermaterial-ui
Rahat Khan Pathan
Rahat Khan Pathan

Reputation: 263

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?

Upvotes: 26

Views: 43834

Answers (5)

Devasya Dave
Devasya Dave

Reputation: 107

I created a CSS file

date_picker_styles.css

.MuiOutlinedInput-root {
    height: 30px;
}

and imported it in the JS file where I am using the DatePicker component

import './date_picker_styles.css'

This will add CSS styles to the div that is immediate parent of the input tag of the DatePicker field.

Upvotes: 0

Takeshi Inoue
Takeshi Inoue

Reputation: 51

For DatePicker of MUI v6, use slotProps - inputProps - style to set the height of its TextField.

<DesktopDatePicker
  slotProps={{
    inputProps: {
      style: {{
        paddingTop: 0,
        paddingBottom: 0,
        height: '30px',
      }
    }
  }}
/>

Upvotes: 0

Nam Dương Nguyễn
Nam Dương Nguyễn

Reputation: 1

or just using styled of MUI: const DatePickerCustom = styled(DatePicker)({ '& input': { height: '100px', }, });

Upvotes: 0

Qwertie
Qwertie

Reputation: 17196

In MUI 5 (x-date-pickers), you can use

<DesktopDatePicker
    ...
    inputProps={{ size: 'small' }}
/>

Upvotes: 0

Prashant Jangam
Prashant Jangam

Reputation: 2848

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' } }}
/>

Upvotes: 85

Related Questions