Repository: Hacker0x01/react-datepicker
Pull request #5472 (2025-03-08 17:32:28)

fix: set css class for the current quarter
Set CSS class for the current quarter, following the same pattern as other views

**Problem**
For calendar views such as Day, Month, and Year, the CSS class `react-datepicker__{view}-text--today` is applied. However, for the Quarter view, this class was not being set, even though the corresponding style is present.

**Changes**
- Added the `react-datepicker__quarter-text--today` class, which will be applied when the quarter in the Quarter view is the current quarter of the year.

## Contribution checklist
- [x] I have followed the [contributing guidelines](https://github.com/Hacker0x01/react-datepicker/blob/main/CONTRIBUTING.md).
- [x] I have added sufficient test coverage for my changes.
- [x] I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.



Patch:
diff --git a/src/month.tsx b/src/month.tsx
index 17cce7d0..0e74525c 100644
--- a/src/month.tsx
+++ b/src/month.tsx
@@ -932,6 +932,7 @@ export default class Month extends Component<MonthProps> {
         "react-datepicker__quarter-text--range-start":
           this.isRangeStartQuarter(q),
         "react-datepicker__quarter-text--range-end": this.isRangeEndQuarter(q),
+        "react-datepicker__quarter-text--today": this.isCurrentQuarter(day, q),
       },
     );
   };


Test patch:
diff --git a/src/test/month_test.test.tsx b/src/test/month_test.test.tsx
index fba4b839..2885aae6 100644
--- a/src/test/month_test.test.tsx
+++ b/src/test/month_test.test.tsx
@@ -16,6 +16,7 @@ import {
   getMonth,
   getMonthShortInLocale,
   getQuarter,
+  getQuarterShortInLocale,
   getStartOfMonth,
   getStartOfQuarter,
   getStartOfWeek,
@@ -1247,6 +1248,60 @@ describe("Month", () => {
     ).toBe(true);
   });
 
+  it("should return quarter-text--today class if quarter is current year's quarter", () => {
+    const date = new Date();
+    const { container } = render(
+      <Month day={date} selected={date} showQuarterYearPicker />,
+    );
+    const quarter = container.querySelectorAll(
+      ".react-datepicker__quarter-text--today",
+    )[0]?.textContent;
+    expect(quarter).toBe(getQuarterShortInLocale(getQuarter(date)));
+  });
+
+  it("should not return quarter-text--today class if quarter is not current year's quarter", () => {
+    const lastYearDate = new Date();
+    lastYearDate.setFullYear(lastYearDate.getFullYear() - 1);
+    const { container } = render(
+      <Month
+        day={lastYearDate}
+        selected={lastYearDate}
+        showQuarterYearPicker
+      />,
+    );
+    const quarters = container.querySelectorAll(
+      ".react-datepicker__quarter-text--today",
+    );
+    expect(quarters).toHaveLength(0);
+  });
+
+  it("should include aria-current property if quarter is current year's quarter", () => {
+    const date = new Date();
+    const { container } = render(
+      <Month day={date} selected={date} showQuarterYearPicker />,
+    );
+    const ariaCurrent = container
+      .querySelector(".react-datepicker__quarter-text--today")
+      ?.getAttribute("aria-current");
+    expect(ariaCurrent).toBe("date");
+  });
+
+  it("should not include aria-current property if quarter is not current year's quarter", () => {
+    const lastYearDate = new Date();
+    lastYearDate.setFullYear(lastYearDate.getFullYear() - 1);
+    const { container } = render(
+      <Month
+        day={lastYearDate}
+        selected={lastYearDate}
+        showQuarterYearPicker
+      />,
+    );
+    const ariaCurrent = container
+      .querySelector(".react-datepicker__quarter-text")
+      ?.getAttribute("aria-current");
+    expect(ariaCurrent).toBeNull();
+  });
+
   it("should enable keyboard focus on the preselected component", () => {
     const { container } = render(
       <Month