更改MUI DatePicker对话框的OK文字

Question

如何将datepicker对话框按钮从确定更改为诸如应用之类的内容。 MUI文档没有提供任何帮助我更改标题的道具

Answer 1

我正在使用MUI的datepicker v5，以下对我有用：

来自我的软件包的版本：“@mui/x-date-pickers”：“^5.0.16”，

import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
import { DateTime } from 'luxon';

.....


<LocalizationProvider
  dateAdapter={AdapterLuxon}
  localeText={{ cancelButtonLabel: 'Exit', clearButtonLabel: 'None', okButtonLabel: 'Save', todayButtonLabel: 'Set today' }}
>
    <DatePicker
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      inputFormat="dd MMM yyyy"
      disableMaskedInput
      value={DateTime.local()}
      onChange={handleChange}
      renderInput={(params) => {
        console.log(params);
        return <TextField {...params} onClick={(e) => setOpen(true)} />;
      }}
      
      componentsProps={{
        actionBar: {
          actions: ["cancel", "clear", "accept", "today"],
        }
      }}

    />
</LocalizationProvider>

• 您可以通过指定 componentsProps datePicker 在datePicker的日历对话框上指定哪些按钮。显示的按钮的顺序遵循传递给 componentsprops-＆gt; actionbar-＆gt; action 的序列。在这种情况下，按钮的顺序将是：取消，清除，接受，今天。

• 您可以通过将 localeText 传递给lotization provider的按钮上的标签：
  

• ，所以您会看到这一点日历对话框中的按钮：退出，无，保存，设置

Answer 2

您只需将俄克拉牌提供给您的datepicker组件即可。

<DatePicker
  okLabel={"Apply"}
  {...props}
/>