How can I remove the default value (DD.MM.YYYY) given by the format?

Question

When I change the format, the appropriate value appears. I want to delete or change the default value as I want. I added a placeholder, but the placeholder I added was only visible the first time. The format value reappeared when the date changed.

Here is the code:

<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={adapterLocale}>
  <DatePicker
    className='w-[15rem]'
    format='dd.MM.yyyy'
    label={t('start-date')}
    value={params.startDate}
    onChange={(date) => {
      if (date instanceof Date && !isNaN(date.getTime())) {
        const formattedDate = format(date, 'yyyy-MM-dd');
        const dateObject = new Date(formattedDate);
        handleStartDateChange(dateObject);
      }
    }}
    autoFocus={true}
  />
</LocalizationProvider>

Answer 1

Finally I solved the problem. Here the code:

<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={adapterLocale}>
  <DatePicker
    localeText={{
      cancelButtonLabel: t('close'),
      toolbarTitle: t('select-date'),
      fieldDayPlaceholder: () => t('day-lc'),
      fieldMonthPlaceholder: () => t('month-lc'),
      fieldYearPlaceholder: () => t('year-lc')
    }}
    className='w-[15rem]'
    format='dd.MM.yyyy'
    label={t('start-date')}
    value={params.startDate}
    onChange={(date) => {
      if (date instanceof Date && !isNaN(date.getTime())) {
        const formattedDate = format(date, 'yyyy-MM-dd');
        const dateObject = new Date(formattedDate);
        handleStartDateChange(dateObject);
      }
    }}
    autoFocus={false}
  />
</LocalizationProvider>

I solved the problem using these props: fieldDayPlaceholder, fieldMonthPlaceholder, fieldYearPlaceholder

I stopped remove when I found the change. I used t(' ') after props for Localization. But you can just use 'any text'.

Answer 2

There seems to be an issue with the date-fns adapter. Try switching to dayjs.

Example: Format for yyyy-MM-dd in dayjs will be YYYY-MM-DD.

import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";

export default App = () => {
  return (
    <div>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DatePicker format="YYYY-MM-DD" />
      </LocalizationProvider>
    </div>
  );
};