✨ Add weekday class support to datepicker days

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 ***

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<DayProps> {
     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(),

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