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..10ec8dfbc 100644 --- a/src/day.tsx +++ b/src/day.tsx @@ -13,8 +13,9 @@ import { isEqual, isBefore, isAfter, - getDayOfWeekCode, + 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--" + getDayOfWeekCode(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 8f8edeb86..5ceb9c760 100644 --- a/src/test/day_test.test.tsx +++ b/src/test/day_test.test.tsx @@ -3,7 +3,8 @@ import { es } from "date-fns/locale"; import React from "react"; import { - getDayOfWeekCode, + 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", () => { + 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 className = "react-datepicker__day--" + getDayOfWeekCode(day); + 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 container = renderDay(day); expect( container