Skip to content

Commit defa663

Browse files
committed
fix: 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.
1 parent deb50d4 commit defa663

File tree

2 files changed

+56
-0
lines changed

2 files changed

+56
-0
lines changed

src/month.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -932,6 +932,7 @@ export default class Month extends Component<MonthProps> {
932932
"react-datepicker__quarter-text--range-start":
933933
this.isRangeStartQuarter(q),
934934
"react-datepicker__quarter-text--range-end": this.isRangeEndQuarter(q),
935+
"react-datepicker__quarter-text--today": this.isCurrentQuarter(day, q),
935936
},
936937
);
937938
};

src/test/month_test.test.tsx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
getMonth,
1717
getMonthShortInLocale,
1818
getQuarter,
19+
getQuarterShortInLocale,
1920
getStartOfMonth,
2021
getStartOfQuarter,
2122
getStartOfWeek,
@@ -1247,6 +1248,60 @@ describe("Month", () => {
12471248
).toBe(true);
12481249
});
12491250

1251+
it("should return quarter-text--today class if quarter is current year's quarter", () => {
1252+
const date = new Date();
1253+
const { container } = render(
1254+
<Month day={date} selected={date} showQuarterYearPicker />,
1255+
);
1256+
const quarter = container.querySelectorAll(
1257+
".react-datepicker__quarter-text--today",
1258+
)[0]?.textContent;
1259+
expect(quarter).toBe(getQuarterShortInLocale(getQuarter(date)));
1260+
});
1261+
1262+
it("should not return quarter-text--today class if quarter is not current year's quarter", () => {
1263+
const lastYearDate = new Date();
1264+
lastYearDate.setFullYear(lastYearDate.getFullYear() - 1);
1265+
const { container } = render(
1266+
<Month
1267+
day={lastYearDate}
1268+
selected={lastYearDate}
1269+
showQuarterYearPicker
1270+
/>,
1271+
);
1272+
const quarters = container.querySelectorAll(
1273+
".react-datepicker__quarter-text--today",
1274+
);
1275+
expect(quarters).toHaveLength(0);
1276+
});
1277+
1278+
it("should include aria-current property if quarter is current year's quarter", () => {
1279+
const date = new Date();
1280+
const { container } = render(
1281+
<Month day={date} selected={date} showQuarterYearPicker />,
1282+
);
1283+
const ariaCurrent = container
1284+
.querySelector(".react-datepicker__quarter-text--today")
1285+
?.getAttribute("aria-current");
1286+
expect(ariaCurrent).toBe("date");
1287+
});
1288+
1289+
it("should not include aria-current property if quarter is not current year's quarter", () => {
1290+
const lastYearDate = new Date();
1291+
lastYearDate.setFullYear(lastYearDate.getFullYear() - 1);
1292+
const { container } = render(
1293+
<Month
1294+
day={lastYearDate}
1295+
selected={lastYearDate}
1296+
showQuarterYearPicker
1297+
/>,
1298+
);
1299+
const ariaCurrent = container
1300+
.querySelector(".react-datepicker__quarter-text")
1301+
?.getAttribute("aria-current");
1302+
expect(ariaCurrent).toBeNull();
1303+
});
1304+
12501305
it("should enable keyboard focus on the preselected component", () => {
12511306
const { container } = render(
12521307
<Month

0 commit comments

Comments
 (0)