From aea8f6df6d66201f01b9ad05e2680016e9d5e91b Mon Sep 17 00:00:00 2001
From: Henrik Kubitza <henrik.kubitza@xitaso.com>
Date: Thu, 19 Sep 2024 15:44:34 +0200
Subject: [PATCH 1/4] feat: hide time caption

---
 docs-site/src/components/Examples/index.js |  5 +++
 docs-site/src/examples/hideTimeCaption.js  | 14 ++++++++
 src/time.tsx                               | 38 ++++++++++++++--------
 3 files changed, 43 insertions(+), 14 deletions(-)
 create mode 100644 docs-site/src/examples/hideTimeCaption.js

diff --git a/docs-site/src/components/Examples/index.js b/docs-site/src/components/Examples/index.js
index f795d0f9f..8656acedd 100644
--- a/docs-site/src/components/Examples/index.js
+++ b/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,
diff --git a/docs-site/src/examples/hideTimeCaption.js b/docs-site/src/examples/hideTimeCaption.js
new file mode 100644
index 000000000..214c7420a
--- /dev/null
+++ b/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}
+    />
+  );
+};
diff --git a/src/time.tsx b/src/time.tsx
index 764afdab3..bb7a922e5 100644
--- a/src/time.tsx
+++ b/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,27 @@ export default class Time extends Component<TimeProps, TimeState> {
     });
   };
 
+  renderTimeCaption = (): JSX.Element => {
+    return (this.props.showTimeCaption ?? Time.defaultProps.showTimeCaption) ? (
+      <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 +284,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

From 2771fe419dbdf2463fd431c7f734cf93bf2b6bd7 Mon Sep 17 00:00:00 2001
From: Henrik Kubitza <henrik.kubitza@xitaso.com>
Date: Thu, 19 Sep 2024 16:25:35 +0200
Subject: [PATCH 2/4] test: hides time caption

---
 src/test/timepicker_test.test.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/test/timepicker_test.test.tsx b/src/test/timepicker_test.test.tsx
index f8d664633..7fd0e8fa8 100644
--- a/src/test/timepicker_test.test.tsx
+++ b/src/test/timepicker_test.test.tsx
@@ -316,6 +316,23 @@ describe("TimePicker", () => {
     expect(onKeyDownSpy).toHaveBeenCalledTimes(1);
   });
 
+  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");

From 017183dd9b58cf75b9b933c905d3dc1ae3f03200 Mon Sep 17 00:00:00 2001
From: Henrik Kubitza <henrik.kubitza@xitaso.com>
Date: Thu, 19 Sep 2024 16:25:56 +0200
Subject: [PATCH 3/4] test: shows custom time caption

---
 src/test/timepicker_test.test.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/test/timepicker_test.test.tsx b/src/test/timepicker_test.test.tsx
index 7fd0e8fa8..3ed6d043e 100644
--- a/src/test/timepicker_test.test.tsx
+++ b/src/test/timepicker_test.test.tsx
@@ -316,6 +316,24 @@ 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

From 342d370eaff4c9109441be7e9f0c6a29c45a3705 Mon Sep 17 00:00:00 2001
From: Henrik Kubitza <henrik.kubitza@xitaso.com>
Date: Thu, 19 Sep 2024 18:50:54 +0200
Subject: [PATCH 4/4] fix: improved code readability

---
 src/time.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/time.tsx b/src/time.tsx
index bb7a922e5..560cb83b8 100644
--- a/src/time.tsx
+++ b/src/time.tsx
@@ -253,7 +253,11 @@ export default class Time extends Component<TimeProps, TimeState> {
   };
 
   renderTimeCaption = (): JSX.Element => {
-    return (this.props.showTimeCaption ?? Time.defaultProps.showTimeCaption) ? (
+    if (this.props.showTimeCaption === false) {
+      return <></>;
+    }
+
+    return (
       <div
         className={`react-datepicker__header react-datepicker__header--time ${
           this.props.showTimeSelectOnly
@@ -268,8 +272,6 @@ export default class Time extends Component<TimeProps, TimeState> {
           {this.props.timeCaption}
         </div>
       </div>
-    ) : (
-      <></>
     );
   };