diff --git a/package.json b/package.json index 4d13ef525..86a902394 100644 --- a/package.json +++ b/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": "yarn@4.7.0" } diff --git a/src/index.tsx b/src/index.tsx index 48778f4d1..f49abf316 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -422,6 +422,45 @@ export class DatePicker extends Component { }; }; + 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 { }; 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 { const customInput = this.props.customInput || ; 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, diff --git a/src/test/datepicker_test.test.tsx b/src/test/datepicker_test.test.tsx index 77f199880..859bfa8b2 100644 --- a/src/test/datepicker_test.test.tsx +++ b/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( + , + ); + const input = safeQuerySelector(container, "input") as HTMLInputElement; + expect(input?.value).toBe("07/17/2025"); + }); + }); });