reactjsmaterial-uidatepickermui-x-date-picker

How to localize MUI X Date Picker v5 input or set a placeholder


I have to use a MUI X v5 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


Solution

  • 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