Changing MUI Datepicker defaultvalue

Question

I am using @mui/x-date-pickers version ^6.17.0.

This is my date picker

When I click the input field the placeholder changes and value is added. I can not change the input value.

My whole code

import { useRef, useState } from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { Controller } from 'react-hook-form';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { az, enUS } from 'date-fns/locale';
import { useTranslation } from 'react-i18next';

const DatePickerMui = ({
  name,
  title,
  value,
  minDate,
  maxDate,
  control,
  myChange,
  isClearable,
  time = false,
  disabled = false,
  defaultValue = null,
  dateFormat = time ? 'dd-MM-yyyy hh:mm' : 'dd-MM-yyyy',
  views = time ? ['year', 'month', 'day', 'hours', 'minutes'] : ['year', 'month', 'day'],
}) => {
  const [open, setOpen] = useState(false);
  const { i18n, t } = useTranslation();

  return (
    <div className="form-group date-component">
      <label style={{ marginBottom: '5px', display: 'block' }}>{title}</label>
      <Controller
        control={control}
        name={name}
        defaultValue={defaultValue}
        render={({ field }) => {
          return (
            <LocalizationProvider
              dateAdapter={AdapterDateFns}
              adapterLocale={i18n.language === 'az' ? az : enUS}
            >
                <DateTimePicker
                  open={open}
                  onOpen={() => setOpen(true)}
                  onClose={() => setOpen(false)}
                  control={control}
                  onChange={newValue => {
                    field.onChange(newValue);
                    if (myChange) {
                      myChange(newValue);
                    }
                  }}
                  format={dateFormat}
                  minDate={minDate}
                  disabled={disabled}
                  maxDate={maxDate}
                  views={views}
                  slotProps={{
                    field: { clearable: disabled ? false : isClearable ? true : false },
                    textField: {
                      placeholder: t('datePlaceholder') // gg-aa-iiii ss:dd,
                      onClick: () => setOpen(true),
                    },
                  }}
                />
            </LocalizationProvider>
          );
        }}
      />
    </div>
  );
};

export default DatePickerMui;

I also tried but it does not work

          slotProps={{
                    field: { clearable: disabled ? false : isClearable ? true : false },
                    textField: {
                      onClick: () => setOpen(true),
                      placeholder: t('datePlaceholder'),
                      value: t('datePlaceholder'),
                      defaultValue: t('datePlaceholder'),
                    },
                  }}

Answer 1

You could overwrite the localeText for all pickers using the localeText prop:

const AZLocale = {
    fieldYearPlaceholder: (digitAmount) => "iiii".substring(digitAmount),
    fieldMonthPlaceholder: (contentType) => contentType === "letter" ? "AAAA" : "aa",
    fieldDayPlaceholder: () => "gg",
    fieldWeekDayPlaceholder: (params) => params.contentType === "letter" ? "EEEE" : "EE",
    fieldHoursPlaceholder: () => "ss",
    fieldMinutesPlaceholder: () => "dd",
}

<DateTimePicker
    label="Basic date time picker"
    format="DD-MM-YYYY hh:mm"
    defaultValue={null}
    localeText={AZLocale}
/>

However, it seems like you are changing the placeholder for localization. I would suggest to translate the UI via LocalizationProvider.

<LocalizationProvider
  dateAdapter={AdapterDateFns}
  adapterLocale={i18n.language === "az" ? az : enUS}
  localeText={AZLocale}
>