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

user_6464619 0
Viewed 336

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?

material-ui reactjs
2 Answers

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
  }}
  />
user_64646190

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.

user_2348630
Related