Repository: Hacker0x01/react-datepicker
Pull request #4552 (2024-02-29 22:16:14)

Fix: default time selection
1. Datepicker with `showTimeSelect` and `minTIme`.
2. The datepicker should be empty.
3. Select any day you want .

Actual Result (AR):
Despite disabling the start time, the Datepicker defaults to selecting the beginning of the day.

Expected Result (ER):
The Datepicker should select the minimum allowable time upon choosing a day.


<img width="470" alt="image" src="https://github.com/Hacker0x01/react-datepicker/assets/46750815/64fb90eb-3c58-4a5c-bd86-19965fc9d55f">
<img width="200" alt="image" src="https://github.com/Hacker0x01/react-datepicker/assets/46750815/5f962a6c-ef4e-43fa-a5a4-3e7993ca5764">



Patch:
diff --git a/src/index.jsx b/src/index.jsx
index daa1462f..86a3ee51 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -633,6 +633,7 @@ export default class DatePicker extends React.Component {
       endDate,
       selectsMultiple,
       selectedDates,
+      minTime,
     } = this.props;
 
     if (
@@ -655,6 +656,18 @@ export default class DatePicker extends React.Component {
             second: getSeconds(this.props.selected),
           });
         }
+
+        // If minTime is present then set the time to minTime
+        if (this.props.showTimeSelect || this.props.showTimeSelectOnly) {
+          if (minTime) {
+            changedDate = setTime(changedDate, {
+              hour: minTime.getHours(),
+              minute: minTime.getMinutes(),
+              second: minTime.getSeconds(),
+            });
+          }
+        }
+
         if (!this.props.inline) {
           this.setState({
             preSelection: changedDate,


Test patch:
diff --git a/test/min_time_test.test.js b/test/min_time_test.test.js
new file mode 100644
index 00000000..9da15ae3
--- /dev/null
+++ b/test/min_time_test.test.js
@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import DatePicker from "../src/index.jsx";
+import { fireEvent, render } from "@testing-library/react";
+
+const DatePickerWithState = (props) => {
+  const [selected, setSelected] = useState(null);
+  return (
+    <DatePicker
+      open
+      selected={selected}
+      onChange={(date) => {
+        setSelected(date);
+      }}
+      showTimeSelect
+      {...props}
+    />
+  );
+};
+
+describe("Datepicker minTime", () => {
+  it("should select time 12:00 AM when no minTime constraint is set.", () => {
+    const { getByText, container } = render(<DatePickerWithState />);
+
+    const day = container.getElementsByClassName("react-datepicker__day")[0];
+
+    fireEvent.click(day);
+
+    const selectedTime = getByText("12:00 AM");
+
+    expect(selectedTime.getAttribute("aria-selected")).toBe("true");
+  });
+
+  it("should select the minimum allowable time upon choosing a day.", () => {
+    const minTime = new Date("2023-03-10 13:00");
+    const maxTime = new Date("2023-03-10 18:00");
+
+    const { container, getByText } = render(
+      <DatePickerWithState minTime={minTime} maxTime={maxTime} />,
+    );
+
+    const day = container.getElementsByClassName("react-datepicker__day")[0];
+
+    fireEvent.click(day);
+
+    const selectedTime = getByText("1:00 PM");
+
+    expect(selectedTime.getAttribute("aria-selected")).toBe("true");
+  });
+});