Render Header or Title to ant design - Timepicker component

user_11096643 0
Viewed 472

I would like to render some header/title for time picker to indicate this is HH, MM and SS (Which is Hour, Minute, Sec) but unable to do.

I can achieve it by only renderExtraFooter which renders at the bottom of the picker but I need it on the top of the time picker. You can check the code below:

https://stackblitz.com/edit/react-j1kksn-ef4m56?file=index.js

Some of the users feels hard to find which is hour, minute and seconds. It would be better to have that option.

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { TimePicker } from "antd";

const onChangeTime = time => {
  console.log(time);
};

ReactDOM.render(
  <TimePicker
    onChange={onChangeTime}
    renderExtraFooter={() => (
      <div className="timePickerHeader">
        <p>HH</p>
        <p>MM</p>
        <p>SS</p>
      </div>
    )}
  />,
  document.getElementById("container")
);

.timePickerHeader {
  position: float;
}

.timePickerHeader p {
  display: inline-block;
  width: 33%;
}
antd reactjs
1 Answers

Looks like there is no header option, but you can change the style to make the footers align with their respective column. Use a grid column layout.

Avoid using <p> and position:float and display:inline-block in favor of <div> with display:grid and display:flex.

renderExtraFooter={() => (
  <div className="timePickerHeader">
    <div>HH</div>
    <div>MM</div>
    <div>SS</div>
  </div>
)}

.ant-picker-footer-extra {
  padding-left: 7px;
}

.timePickerHeader {
  display: grid;
  grid-auto-flow: column;
}

.timePickerHeader div {
  padding-left: 14px;
  text-align: left;
}

Note: The CSS above can be simplified to the following, if you just want to center the text within each column.

.ant-picker-footer-extra {
  padding: 0;
}

.timePickerHeader {
  display: grid;
  grid-auto-flow: column;
}

.timePickerHeader div {
  text-align: center;
}
user_17622240
Related