CODEWITHSUNDEEP
reactjsnext.jsmaterial-ui
Hamed Rahimi
Hamed Rahimi

Reputation: 163

how to translate or localize material-ui (MUI) 5 DatePicker

enter image description here

in material ui 5 i want to change text of ok and cancel button how can I do that seems like there is no option.

in Material-Ui 4 this was possible with these props:

okLabel="تأیید"
cancelLabel="لغو"
clearLabel="پاک کردن"

this is my code:

 <LocalizationProvider dateAdapter={AdapterJalali}>
              <DatePicker
                displayStaticWrapperAs="desktop"
                closeOnSelect={true}
                label="تاریخ:"
                mask="____/__/__"
                value={selectedDate}
                onChange={handleDateChange}
                views={["year", "month", "day"]}
                renderInput={(params) => (
                  <TextField {...params} />
                )}
              />
            </LocalizationProvider>

this is the documentation: https://mui.com/x/react-date-pickers/date-picker/#main-content

thanks

Upvotes: 1

Views: 1778

Answers (1)

Pavel Kratochvil
Pavel Kratochvil

Reputation: 481

You can achieve same behaviour with some setting localeText on LocalizationProvider component. So your example will look something like this:

<LocalizationProvider dateAdapter={AdapterJalali} localeText={{ cancelButtonLabel: "لغو", okButtonLabel: "تأیید", clearButtonLabel: "پاک کردن" }}>
  ...
</LocalizationProvider>

Upvotes: 1

Related Questions