Modify Ant Design (antd) time picker footer text

Question

Is there any way to modify the text from the "Now" and "Ok" button in Ant Design Time Picker? Either using react or antd.

Thanks in advance.

Answer 1

I was looking at props if something is available to modify the footer, the only prop I found relevant to footer was 'renderExtraFooter', seems like there is nothing from ant that we can use to replace the text of these buttons.

However, there is a CSS way to replace the text using ::after selector like below.

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

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

Sharing the codesandbox below - https://codesandbox.io/s/basic-antd4150-forked-pyd95?file=/index.css

Answer 2

You can control the text of the "Now" and "Ok" buttons by using the locale prop. You must provide a complete locale configuration, not just the lang.now and lang.ok properties. So you can import one of the standard language configs and merge them.

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",
      }
    }}
  />
);

You can also set sitewide labels using a ConfigProvider .