Modify Ant Design (antd) time picker footer text

user_12707785 0
Viewed 2154

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

enter image description here

Thanks in advance.

antd reactjs
2 Answers

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.

user_104315740

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

user_39667640
Related