修改 Ant Design (antd) 时间选择器页脚文本

Question

有什么方法可以修改 Ant Design Time Picker 中“现在”和“确定”按钮的文本吗？使用 react 或 antd.

提前致谢。

Answer 1

我正在查看 props 是否可以修改页脚，我发现与页脚相关的唯一 prop 是 'renderExtraFooter'，似乎没有任何来自 ant 的东西可以用来替换的文本这些按钮。

但是，有一种 CSS 方法可以使用 ::after 选择器替换文本，如下所示。

a.ant-picker-now-btn {
  font-size: 0;
}

a.ant-picker-now-btn:after {
  content: "ABC";
  font-size: 16px; /* original font size */
}

分享下面的codesandbox - https://codesandbox.io/s/basic-antd4150-forked-pyd95?file=/index.css

Answer 2

您可以使用 locale 属性控制“现在”和“确定”按钮的文本。您必须提供完整的语言环境配置，而不仅仅是 lang.now 和 lang.ok 属性。所以你可以导入标准语言配置之一并合并它们。

import { TimePicker } from "antd";
import "antd/dist/antd.css";
import locale from "antd/es/date-picker/locale/de_DE";

console.log(locale);

export default () => (
  <TimePicker
    locale={{
      ...locale,
      lang: {
        ...locale.lang,
        now: "Current Time",
        ok: "Submit",
      }
    }}
  />
);

您还可以使用 ConfigProvider.

设置全站标签

修改 Ant Design (antd) 时间选择器页脚文本

Modify Ant Design (antd) time picker footer text

reactjs

antd