reactjsmaterial-uimui-x-date-picker

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?


Solution

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