Material UI DatePicker Not Applying dd/MM/yyyy Format in React

Question

I'm working on a React project and facing an issue with the Material UI DatePicker component. Despite setting the date format to "dd/MM/yyyy", the DatePicker displays dates in the "MM/DD/yyyy" format. CustomDatePicker Component:

import React from 'react';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers';
import TextField from '@mui/material/TextField';
import esLocale from 'date-fns/locale/es';

const CustomDatePicker = ({ label, value, onChange }) => {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns} locale={esLocale}>
      <DatePicker
        label={label}
        value={value}
        onChange={onChange}
        inputFormat="dd/MM/yyyy"
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

export default CustomDatePicker;

Usage of CustomDatePicker:

<FormControl variant="outlined" className="form-field">
  <CustomDatePicker
    label="Fecha de Nacimiento"
    value={fechaNacimiento}
    onChange={(newDate) => setFechaNacimiento(newDate)}
  />
</FormControl>

The issue is that the date format displayed in the DatePicker is not "dd/MM/yyyy" as expected according to the configuration. Instead, it's showing in "MM/DD/yyyy" format.

I've verified that fechaNacimiento is a valid Date object. I am also using date-fns with the Spanish locale.

Can anyone help me understand why the date format is not being applied as expected and how I can fix it?

I have tried setting the inputFormat property to "dd/MM/yyyy" in the DatePicker component, expecting the date to be displayed and selected in the day/month/year format. Here's what I have implemented:

Setting the Locale: I imported the Spanish locale from date-fns and used it in the LocalizationProvider to ensure that the date format and locale settings are correct.

Configuring the DatePicker: I configured the DatePicker with inputFormat="dd/MM/yyyy" to display the date in day/month/year format. However, the date still appears in the month/day/year format (MM/DD/yyyy).

Ensuring Correct Date Object: I verified that the value being passed to the DatePicker (fechaNacimiento) is a valid JavaScript Date object.

Despite these configurations, the date is still being displayed in the MM/DD/yyyy format instead of the expected dd/MM/yyyy format. I'm not sure if I'm missing something in the configuration or if there's an issue with how the DatePicker component handles the format.

Answer 1

base on Mui document in this link you should add views prop base on your formt prop on DatePicker:

    //with [email protected]
    import { DatePicker } from "@mui/x-date-pickers/DatePicker";
    import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
    import { LocalizationProvider } from "@mui/x-date-pickers";
    import TextField from "@mui/material/TextField";
    import { es } from "date-fns/locale/es";

    const CustomDatePicker = ({ label, value, onChange }) => {
      return (
        <div style={{ padding: 20 }}>
          <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={es}>
            <DatePicker
             label={"label"}
             value={value}
             onChange={onChange}
             format="dd/mm/yyyy"
             views={["day", "month", "year"]}
             renderInput={(params) => <TextField {...params} />}
            />
          </LocalizationProvider>
        </div>
      );
    };

    export default CustomDatePicker;

Note: It will be different based on the version of the date-fns package:

// with date-fns v2.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
// with date-fns v3.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
// with date-fns v2.x
import es from 'date-fns/locale/es';
// with date-fns v3.x
import { es } from 'date-fns/locale/es';

<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={es}>
  {children}
</LocalizationProvider>;

Answer 2

Using these props, you can display any format text you want.

<DatePicker 
  localeText={{
    fieldDayPlaceholder: () => 'dd',
    fieldMonthPlaceholder: () => 'MM',
    fieldYearPlaceholder: () => 'yyyy',
  }}
/>