reactjs 如何更改MobileDatePicker组件的接受和取消按钮文本

5fjcxozz  于 2023-02-12  发布在  React
关注(0)|答案(3)|浏览(150)

@mui/x-date-pickers包中的MobileDatePicker包含接受/更改按钮,默认文本为OK/CANCEL。
在v4中,DatePicker组件有一个acceptLabel/cancelLabel属性来更改按钮的文本,但我发现v5组件有类似的属性。
我如何在v5中更改按钮的文本?

aij0ehis

aij0ehis1#

我最终通过编写一个自定义ActionBar组件来实现这一点

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>
  );
};

并覆盖MobileDatePicker组件中的bar组件

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

tf7tbtn22#

我创建了一个demo,说明如何使用主题或本地化提供程序实现这一点。
详情
如果你不想使用自定义组件,你可以通过Theme或LocalizationProvider组件传递翻译。文档不是很清楚,但是如果你参考PickersLocaleText的源代码,你会看到你想要的标签。对于enUS示例,你可以导入enUS locale,然后提供你自己的字符串。
从文档的底部
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.

bpzcxfmw

bpzcxfmw3#

我已经通过创建一个customPtBRLocaleText创建了这个i18n。

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>
  );
}

相关问题