Merge pull request #5100 from Qubitza/main

Added option to hide time caption

Author: martijnrusschen

docs-site/src/components/Examples/index.js

@@ -8,6 +8,7 @@ import Default from "../../examples/default";
 import NoAnchorArrow from "../../examples/noAnchorArrow";
 import ShowTime from "../../examples/showTime";
 import ShowTimeOnly from "../../examples/showTimeOnly";
+import HideTimeCaption from "../../examples/hideTimeCaption";
 import ExcludeTimes from "../../examples/excludeTimes";
 import IncludeTimes from "../../examples/includeTimes";
 import InjectTimes from "../../examples/injectTimes";
@@ -487,6 +488,10 @@ export default class exampleComponents extends React.Component {
       title: "Select Time Only",
       component: ShowTimeOnly,
     },
+    {
+      title: "Hide Time Caption",
+      component: HideTimeCaption,
+    },
     {
       title: "Show previous months",
       component: MultiMonthPrevious,

docs-site/src/examples/hideTimeCaption.js

@@ -0,0 +1,14 @@
+() => {
+  const [startDate, setStartDate] = useState(new Date());
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date) => setStartDate(date)}
+      showTimeSelect
+      showTimeSelectOnly
+      timeIntervals={15}
+      dateFormat="h:mm aa"
+      showTimeCaption={false}
+    />
+  );
+};

src/test/timepicker_test.test.tsx

@@ -316,6 +316,41 @@ describe("TimePicker", () => {
     expect(onKeyDownSpy).toHaveBeenCalledTimes(1);
   });
 
+  it("shows custom time caption text", () => {
+    const { container } = render(
+      <DatePicker
+        open
+        showTimeSelect
+        showTimeSelectOnly
+        timeCaption="Custom time"
+      />,
+    );
+
+    const header = container.querySelector(
+      ".react-datepicker__header--time--only",
+    );
+
+    expect(header).not.toBeNull();
+    expect(header?.textContent).toEqual("Custom time");
+  });
+
+  it("hides time caption", () => {
+    const { container } = render(
+      <DatePicker
+        open
+        showTimeSelect
+        showTimeSelectOnly
+        showTimeCaption={false}
+      />,
+    );
+
+    const header = container.querySelector(
+      ".react-datepicker__header--time--only",
+    );
+
+    expect(header).toBeNull();
+  });
+
   function setManually(string: string) {
     if (!instance?.input) {
       throw new Error("input is null/undefined");

src/time.tsx

@@ -36,6 +36,7 @@ interface TimeProps
   handleOnKeyDown?: React.KeyboardEventHandler<HTMLLIElement>;
   locale?: Locale;
   showTimeSelectOnly?: boolean;
+  showTimeCaption?: boolean;
 }
 
 interface TimeState {
@@ -48,6 +49,7 @@ export default class Time extends Component<TimeProps, TimeState> {
       intervals: 30,
       todayButton: null,
       timeCaption: "Time",
+      showTimeCaption: true,
     };
   }
 
@@ -250,6 +252,29 @@ export default class Time extends Component<TimeProps, TimeState> {
     });
   };
 
+  renderTimeCaption = (): JSX.Element => {
+    if (this.props.showTimeCaption === false) {
+      return <></>;
+    }
+
+    return (
+      <div
+        className={`react-datepicker__header react-datepicker__header--time ${
+          this.props.showTimeSelectOnly
+            ? "react-datepicker__header--time--only"
+            : ""
+        }`}
+        ref={(header: HTMLDivElement) => {
+          this.header = header;
+        }}
+      >
+        <div className="react-datepicker-time__header">
+          {this.props.timeCaption}
+        </div>
+      </div>
+    );
+  };
+
   render() {
     const { height } = this.state;
 
@@ -261,20 +286,7 @@ export default class Time extends Component<TimeProps, TimeState> {
             : ""
         }`}
       >
-        <div
-          className={`react-datepicker__header react-datepicker__header--time ${
-            this.props.showTimeSelectOnly
-              ? "react-datepicker__header--time--only"
-              : ""
-          }`}
-          ref={(header: HTMLDivElement) => {
-            this.header = header;
-          }}
-        >
-          <div className="react-datepicker-time__header">
-            {this.props.timeCaption}
-          </div>
-        </div>
+        {this.renderTimeCaption()}
         <div className="react-datepicker__time">
           <div className="react-datepicker__time-box">
             <ul