CODEWITHSUNDEEP
reactjsdatepickermaterial-ui
Matteo
Matteo

Reputation: 53

How to localize MUI(v5) date picker input or set a placeholder

I have to use a MUI5 DesktopDatePicker as shown in the manual here https://mui.com/components/pickers/#react-components.

When I clear the date selected, I see dd/mm/yyyy as placeholder as the input format of the DatePicker. I would like to see the placeholder based on the Localization set, e.g. gg/mm/aaaa for the Italian locale. Is this possible? Even setting a custom placeholder?

Here's a Sandbox forked directly from the MUI5 demo.

https://codesandbox.io/s/desktopdatepicker-jfqk7

Upvotes: 5

Views: 14269

Answers (1)

pablogarcor
pablogarcor

Reputation: 381

You have to change the placeholder of the textfield on renderInput without overwriting the data on params.inputsProps. This would be your new DesktopDatePicker.

<DesktopDatePicker
    label="Date desktop"
    inputFormat="dd/MM/yyyy"
    value={value}
    onChange={handleChange}
    renderInput={(params) => (
      <TextField
        {...params}
        inputProps={
          { 
            ...params.inputProps, 
            placeholder: "dd/mm/aaaa" 
          }
        }
      />
    )}
/>

This is the link for the fixed CodeSandBox example, the DatePicker component is on demo.js

Edit DesktopDatePicker

Upvotes: 15

Related Questions