From 26c43840a7bfa54020604e4b941382a2b257aefe Mon Sep 17 00:00:00 2001 From: balajis-qb Date: Thu, 8 Jan 2026 16:15:18 +0530 Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20=E2=99=BB=EF=B8=8F=20Rename=20g?= =?UTF-8?q?etDayOfWeekCode=20to=20getDayOfMonthCode=20for=20clarity?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Function name updated to reflect day-of-month behaviour - Removed the unused locale argument - Documentation updated to describe ddd formatting - No functional changes --- src/date_utils.ts | 10 +++++----- src/day.tsx | 4 ++-- src/test/day_test.test.tsx | 6 +++--- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/date_utils.ts b/src/date_utils.ts index 7fba0d960..53dfa23d4 100644 --- a/src/date_utils.ts +++ b/src/date_utils.ts @@ -583,14 +583,14 @@ export function getWeek(date: Date): number { } /** - * Gets the day of the week code for a given day. + * Gets the day-of-the-month code for a given date. + * Returns a zero-padded 3-digit string from "001" to "031". * * @param day - The day. - * @param locale - The locale. - * @returns - The day of the week code. + * @returns - A string representing the day of the month (e.g. "001", "002", "003", etc). */ -export function getDayOfWeekCode(day: Date, locale?: Locale): string { - return formatDate(day, "ddd", locale); +export function getDayOfMonthCode(day: Date): string { + return formatDate(day, "ddd"); } // *** Start of *** diff --git a/src/day.tsx b/src/day.tsx index 28a16c477..605725cf9 100644 --- a/src/day.tsx +++ b/src/day.tsx @@ -13,7 +13,7 @@ import { isEqual, isBefore, isAfter, - getDayOfWeekCode, + getDayOfMonthCode, getStartOfWeek, formatDate, type DateFilterOptionsWithDisabled, @@ -445,7 +445,7 @@ export default class Day extends Component { return clsx( "react-datepicker__day", dayClassName, - "react-datepicker__day--" + getDayOfWeekCode(this.props.day), + "react-datepicker__day--" + getDayOfMonthCode(this.props.day), { "react-datepicker__day--disabled": this.isDisabled(), "react-datepicker__day--excluded": this.isExcluded(), diff --git a/src/test/day_test.test.tsx b/src/test/day_test.test.tsx index 8f8edeb86..3f820b565 100644 --- a/src/test/day_test.test.tsx +++ b/src/test/day_test.test.tsx @@ -3,7 +3,7 @@ import { es } from "date-fns/locale"; import React from "react"; import { - getDayOfWeekCode, + getDayOfMonthCode, newDate, getDate, addDays, @@ -38,10 +38,10 @@ describe("Day", () => { expect(container.textContent).toBe(getDate(day) + ""); }); - it("should apply the day of week class", () => { + it("should apply the day of month class", () => { let day = newDate(); for (let i = 0; i < 7; i++) { - const className = "react-datepicker__day--" + getDayOfWeekCode(day); + const className = "react-datepicker__day--" + getDayOfMonthCode(day); const container = renderDay(day); expect( container From bcced21942c33c0737cf55853cbacba478941c45 Mon Sep 17 00:00:00 2001 From: balajis-qb Date: Fri, 9 Jan 2026 17:11:32 +0530 Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=A8=20Add=20weekday=20class=20support?= =?UTF-8?q?=20to=20datepicker=20days?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Apply weekday-specific classes to datepicker days. - Used the default language (en-us) for this class name without considering user's locale - Added tests to ensure correct application of weekday classes in default locale. Closes #6217 Fix #644 --- src/day.tsx | 8 ++++++-- src/test/day_test.test.tsx | 19 ++++++++++++++++++- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/src/day.tsx b/src/day.tsx index 605725cf9..10ec8dfbc 100644 --- a/src/day.tsx +++ b/src/day.tsx @@ -15,6 +15,7 @@ import { isAfter, getDayOfMonthCode, getStartOfWeek, + getWeekdayShortInLocale, formatDate, type DateFilterOptionsWithDisabled, type DateNumberType, @@ -442,10 +443,13 @@ export default class Day extends Component { const dayClassName = this.props.dayClassName ? this.props.dayClassName(date) : undefined; + const baseDayClassName = "react-datepicker__day"; + return clsx( - "react-datepicker__day", + baseDayClassName, dayClassName, - "react-datepicker__day--" + getDayOfMonthCode(this.props.day), + `${baseDayClassName}--${getDayOfMonthCode(this.props.day)}`, + `${baseDayClassName}--${getWeekdayShortInLocale(this.props.day).toLowerCase()}`, { "react-datepicker__day--disabled": this.isDisabled(), "react-datepicker__day--excluded": this.isExcluded(), diff --git a/src/test/day_test.test.tsx b/src/test/day_test.test.tsx index 3f820b565..5ceb9c760 100644 --- a/src/test/day_test.test.tsx +++ b/src/test/day_test.test.tsx @@ -4,6 +4,7 @@ import React from "react"; import { getDayOfMonthCode, + getWeekdayShortInLocale, newDate, getDate, addDays, @@ -38,10 +39,26 @@ describe("Day", () => { expect(container.textContent).toBe(getDate(day) + ""); }); + it("should apply the day of week class in default locale (en) ignoring locale provided", () => { + let day = newDate(); + for (let i = 0; i < 7; i++) { + const container = renderDay(day, { locale: "pt-BR" }); + const weekName = getWeekdayShortInLocale(day).toLowerCase(); + const expectedWeekNameClassName = `react-datepicker__day--${weekName}`; + + expect( + container + .querySelector(".react-datepicker__day") + ?.classList.contains(expectedWeekNameClassName), + ).toBe(true); + day = addDays(day, 1); + } + }); + it("should apply the day of month class", () => { let day = newDate(); for (let i = 0; i < 7; i++) { - const className = "react-datepicker__day--" + getDayOfMonthCode(day); + const className = `react-datepicker__day--${getDayOfMonthCode(day)}`; const container = renderDay(day); expect( container