Merge pull request #5743 from qburst/refactor/date-input-value

♻️ Refactor the input value get logic

Author: martijnrusschen

package.json

@@ -24,23 +24,9 @@
     "./dist/*.css": "./dist/*.css",
     "./src/stylesheets/*.scss": "./src/stylesheets/*.scss"
   },
-  "files": [
-    "*.md",
-    "dist",
-    "lib",
-    "es",
-    "src"
-  ],
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "keywords": [
-    "react",
-    "datepicker",
-    "calendar",
-    "date",
-    "react-component"
-  ],
+  "files": ["*.md", "dist", "lib", "es", "src"],
+  "sideEffects": ["**/*.css"],
+  "keywords": ["react", "datepicker", "calendar", "date", "react-component"],
   "repository": {
     "type": "git",
     "url": "git://github.com/Hacker0x01/react-datepicker.git"
@@ -140,10 +126,7 @@
     "prepare": "husky"
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx,json,css,scss,md}": [
-      "prettier --write",
-      "git add"
-    ]
+    "*.{js,jsx,ts,tsx,json,css,scss,md}": ["prettier --write", "git add"]
   },
   "packageManager": "[email protected]"
 }

src/index.tsx

@@ -422,6 +422,45 @@ export class DatePicker extends Component<DatePickerProps, DatePickerState> {
     };
   };
 
+  getInputValue = (): string => {
+    const {
+      locale,
+      startDate,
+      endDate,
+      rangeSeparator,
+      selected,
+      selectedDates,
+      selectsMultiple,
+      selectsRange,
+      value,
+    } = this.props;
+    const dateFormat =
+      this.props.dateFormat ?? DatePicker.defaultProps.dateFormat;
+
+    const { inputValue } = this.state;
+
+    if (typeof value === "string") {
+      return value;
+    } else if (typeof inputValue === "string") {
+      return inputValue;
+    } else if (selectsRange) {
+      return safeDateRangeFormat(startDate, endDate, {
+        dateFormat,
+        locale,
+        rangeSeparator,
+      });
+    } else if (selectsMultiple) {
+      return safeMultipleDatesFormat(selectedDates ?? [], {
+        dateFormat,
+        locale,
+      });
+    }
+    return safeDateFormat(selected, {
+      dateFormat,
+      locale,
+    });
+  };
+
   resetHiddenStatus = (): void => {
     this.setState({
       ...this.state,
@@ -1268,8 +1307,9 @@ export class DatePicker extends Component<DatePickerProps, DatePickerState> {
   };
 
   renderAriaLiveRegion = () => {
-    const { dateFormat = DatePicker.defaultProps.dateFormat, locale } =
-      this.props;
+    const { locale } = this.props;
+    const dateFormat =
+      this.props.dateFormat ?? DatePicker.defaultProps.dateFormat;
     const isContainsTime =
       this.props.showTimeInput || this.props.showTimeSelect;
     const longDateFormat = isContainsTime ? "PPPPp" : "PPPP";
@@ -1345,35 +1385,12 @@ export class DatePicker extends Component<DatePickerProps, DatePickerState> {
 
     const customInput = this.props.customInput || <input type="text" />;
     const customInputRef = this.props.customInputRef || "ref";
-    const { dateFormat = DatePicker.defaultProps.dateFormat, locale } =
-      this.props;
-
-    const inputValue =
-      typeof this.props.value === "string"
-        ? this.props.value
-        : typeof this.state.inputValue === "string"
-          ? this.state.inputValue
-          : this.props.selectsRange
-            ? safeDateRangeFormat(this.props.startDate, this.props.endDate, {
-                dateFormat,
-                locale,
-                rangeSeparator: this.props.rangeSeparator,
-              })
-            : this.props.selectsMultiple
-              ? safeMultipleDatesFormat(this.props.selectedDates ?? [], {
-                  dateFormat,
-                  locale,
-                })
-              : safeDateFormat(this.props.selected, {
-                  dateFormat,
-                  locale,
-                });
 
     return cloneElement(customInput, {
       [customInputRef]: (input: HTMLElement | null) => {
         this.input = input;
       },
-      value: inputValue,
+      value: this.getInputValue(),
       onBlur: this.handleBlur,
       onChange: this.handleChange,
       onClick: this.onInputClick,

src/test/datepicker_test.test.tsx

@@ -4521,4 +4521,14 @@ describe("DatePicker", () => {
       expect(calendarAfterEsc).toBeFalsy();
     });
   });
+
+  describe("dateFormat", () => {
+    it("should use the default dateFormat if dateFormat prop is not provided", () => {
+      const { container } = render(
+        <DatePicker selected={new Date("2025-07-17")} showDateSelect />,
+      );
+      const input = safeQuerySelector(container, "input") as HTMLInputElement;
+      expect(input?.value).toBe("07/17/2025");
+    });
+  });
 });