CODEWITHSUNDEEP
reactjsmaterial-ui
Plargato
Plargato

Reputation: 555

how to change accept and cancel buttons text for the MobileDatePicker component

The MobileDatePicker in the @mui/x-date-pickers pacakge contains accept/change buttons with default text OK/CANCEL.

In v4 the DatePicker component had a acceptLabel/cancelLabel prop to change the text of the buttons, but i find anything like that for the v5 component.

How can i change the text of the buttons in v5?

Upvotes: 6

Views: 6882

Answers (3)

Cassio Seffrin
Cassio Seffrin

Reputation: 8600

I have made this i18n by creating a customPtBRLocaleText. Take a look:

const customPtBRLocaleText: Partial<PickersLocaleText<any>> = {
  okButtonLabel: "Ok",
  cancelButtonLabel: "Cancelar"
};


export default function ResponsiveDateTimePickers() {
  const [value, setValue] = React.useState<Dayjs | null>(
    dayjs("2023-01-01T00:00:00.000Z")
  );

  return (
    <LocalizationProvider
      dateAdapter={AdapterDateFns}
      adapterLocale={ptBR}
      localeText={customPtBRLocaleText}
    >
      <Stack spacing={3}>
        <MobileDateTimePicker
          label="For mobile"
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
          renderInput={(params) => <TextField {...params} />}
        />
      </Stack>
    </LocalizationProvider>
  );
}

Upvotes: 5

Sam R
Sam R

Reputation: 445

TLDR; I created a demo of how to achieve this with the either the Theme or LocalizationProvider.

Details

If you want to do this without a custom component you can pass translations VIA the Theme or LocalizationProvider component. The documentation isn't all that clear but if you reference the source for PickersLocaleText you'll see labels you want. For the enUS example you can import the enUS locale and then provide your own strings.

From the bottom of the docs

To create your own translation or to customize the English text, copy this file to your project, make any changes needed and import the locale from there.

Upvotes: 6

Plargato
Plargato

Reputation: 555

I finally managed to this this by writing a custom ActionBar component

const MyActionBar = ({
  onAccept,
  onCancel,
  onClear,
  onSetToday,
}: PickersActionBarProps) => {

  return (
    <DialogActions>
      <Button onClick={onClear}> customCleanText </Button>
      <Button onClick={onCancel}> customCancelText </Button>
      <Button onClick={onAccept}> customAcceptText </Button>
    </DialogActions>
  );
};

And overriding the bar component in my MobileDatePicker component

<MobileDatePicker
  //...
  components: {{
    ActionBar: MyActionBar
  }}
  />

Upvotes: 7

Related Questions