Repository: Hacker0x01/react-datepicker
Pull request #5100 (2024-09-19 14:42:37)

Added option to hide time caption
## Description
**Linked issue**: #5099

**Problem**
It was previously not possible to completely hide the caption of the time picker.

**Changes**
Added `showTimeCaption` option to `DatePicker` to hide the time caption.
Added `Hide Time Caption` example to the docs.
Added tests to check custom caption text and hidden state.

## Screenshots
![image](https://github.com/user-attachments/assets/df56338c-2b65-4c0f-ad2f-1e0f6225bb3a)

## To reviewers
<!-- Additional comments for reviewers -->

## Contribution checklist
- [x] I have followed the [contributing guidelines](https://github.com/Hacker0x01/react-datepicker/blob/main/CONTRIBUTING.md).
- [x] I have added sufficient test coverage for my changes.
- [x] I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.



Patch:
diff --git a/docs-site/src/components/Examples/index.js b/docs-site/src/components/Examples/index.js
index f795d0f9..8656aced 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 00000000..214c7420
--- /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 764afdab..560cb83b 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,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


Test patch:
diff --git a/src/test/timepicker_test.test.tsx b/src/test/timepicker_test.test.tsx
index f8d66463..3ed6d043 100644
--- a/src/test/timepicker_test.test.tsx
+++ b/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");