reactjsmaterial-uidatepickermui-x-date-picker

How can I change the "SELECT DATE" label of the MUI X Date Picker?

I need to find localeText props of the SELECT DATE label. I tried several localeText props. The last solution will be to delete the label with CSS. But if I find the prop, I will make the label dynamic for localization.

Here is the code:

<DatePicker
  localeText={{ cancelButtonLabel: t('close') }}
  className='bg-[#0000000F] w-[250px]'
  format='dd.MM.yyyy'
  value={field.value}
  onChange={(date) => {
    if (date instanceof Date && !isNaN(date.getTime())) {
      const formattedDate = format(date, 'yyyy-MM-dd');
      const dateObject = new Date(formattedDate);
      field.onChange(dateObject);
    }
  }}
  autoFocus={true}
/>

enter image description here

Solution

  • toolbarTitle is the prop that controls the text you highlight

    <StaticDatePicker localeText={{ toolbarTitle: "My translation" }} />

    https://codesandbox.io/p/sandbox/green-haze-4v6vgp?file=%2Fsrc%2FDemo.tsx%3A11%2C70