Skip to content

Commit 05a7a74

Browse files
martijnrusschenmartijnrusschen
authored
Merge pull request #4634 from yuki0410-dev/feat/3710
feat: #3710 add yearClassName props
2 parents 147c078 + ce488ae commit 05a7a74

File tree

7 files changed

+56
-18
lines changed

7 files changed

+56
-18
lines changed

‎docs/datepicker.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ General datepicker component.
2222
| `dateFormatCalendar` | `string` | `'LLLL yyyy'` | |
2323
| `dayClassName` | `func` | | |
2424
| `weekDayClassName` | `func` | | |
25+
| `yearClassName` | `func` | | |
2526
| `disabled` | `bool` | `false` | |
2627
| `disabledKeyboardNavigation` | `bool` | `false` | |
2728
| `dropdownMode` (required) | `enum('scroll'\|'select')` | `'scroll'` | |

‎docs/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,7 @@
156156
| `value` | `string` | | |
157157
| `weekAriaLabelPrefix` | `string` | | |
158158
| `weekDayClassName` | `func` | | |
159+
| `yearClassName` | `func` | | |
159160
| `weekLabel` | `string` | | |
160161
| `withPortal` | `bool` | `false` | |
161162
| `wrapperClassName` | `string` | | |

‎docs/year.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,4 @@
2727
| `startDate` | `instanceOfDate` | | |
2828
| `usePointerEvent` | `bool` | | |
2929
| `yearItemNumber` | `number` | | |
30+
| `yearClassName` | `func` | | |

‎src/calendar.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ export default class Calendar extends React.Component {
8787
disabledDayAriaLabelPrefix: PropTypes.string,
8888
monthClassName: PropTypes.func,
8989
timeClassName: PropTypes.func,
90+
yearClassName: PropTypes.func,
9091
disabledKeyboardNavigation: PropTypes.bool,
9192
calendarStartDay: PropTypes.number,
9293
dropdownMode: PropTypes.oneOf(["scroll", "select"]),

‎src/index.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -324,6 +324,7 @@ export default class DatePicker extends React.Component {
324324
weekAriaLabelPrefix: PropTypes.string,
325325
monthAriaLabelPrefix: PropTypes.string,
326326
usePointerEvent: PropTypes.bool,
327+
yearClassName: PropTypes.func,
327328
};
328329

329330
constructor(props) {
@@ -1150,6 +1151,7 @@ export default class DatePicker extends React.Component {
11501151
customTimeInput={this.props.customTimeInput}
11511152
setPreSelection={this.setPreSelection}
11521153
usePointerEvent={this.props.usePointerEvent}
1154+
yearClassName={this.props.yearClassName}
11531155
>
11541156
{this.props.children}
11551157
</WrappedCalendar>

‎src/year.jsx‎

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export default class Year extends React.Component {
3939
filterDate: PropTypes.func,
4040
yearItemNumber: PropTypes.number,
4141
handleOnKeyDown: PropTypes.func,
42+
yearClassName: PropTypes.func,
4243
};
4344

4445
constructor(props) {
@@ -195,31 +196,39 @@ export default class Year extends React.Component {
195196

196197
getYearClassNames = (y) => {
197198
const {
199+
date,
198200
minDate,
199201
maxDate,
200202
selected,
201203
excludeDates,
202204
includeDates,
203205
filterDate,
206+
yearClassName,
204207
} = this.props;
205-
return clsx("react-datepicker__year-text", {
206-
"react-datepicker__year-text--selected": y === getYear(selected),
207-
"react-datepicker__year-text--disabled":
208-
(minDate || maxDate || excludeDates || includeDates || filterDate) &&
209-
utils.isYearDisabled(y, this.props),
210-
"react-datepicker__year-text--keyboard-selected":
211-
this.isKeyboardSelected(y),
212-
"react-datepicker__year-text--range-start": this.isRangeStart(y),
213-
"react-datepicker__year-text--range-end": this.isRangeEnd(y),
214-
"react-datepicker__year-text--in-range": this.isInRange(y),
215-
"react-datepicker__year-text--in-selecting-range":
216-
this.isInSelectingRange(y),
217-
"react-datepicker__year-text--selecting-range-start":
218-
this.isSelectingRangeStart(y),
219-
"react-datepicker__year-text--selecting-range-end":
220-
this.isSelectingRangeEnd(y),
221-
"react-datepicker__year-text--today": this.isCurrentYear(y),
222-
});
208+
209+
return clsx(
210+
"react-datepicker__year-text",
211+
`react-datepicker__year-${y}`,
212+
yearClassName ? yearClassName(utils.setYear(date, y)) : undefined,
213+
{
214+
"react-datepicker__year-text--selected": y === getYear(selected),
215+
"react-datepicker__year-text--disabled":
216+
(minDate || maxDate || excludeDates || includeDates || filterDate) &&
217+
utils.isYearDisabled(y, this.props),
218+
"react-datepicker__year-text--keyboard-selected":
219+
this.isKeyboardSelected(y),
220+
"react-datepicker__year-text--range-start": this.isRangeStart(y),
221+
"react-datepicker__year-text--range-end": this.isRangeEnd(y),
222+
"react-datepicker__year-text--in-range": this.isInRange(y),
223+
"react-datepicker__year-text--in-selecting-range":
224+
this.isInSelectingRange(y),
225+
"react-datepicker__year-text--selecting-range-start":
226+
this.isSelectingRangeStart(y),
227+
"react-datepicker__year-text--selecting-range-end":
228+
this.isSelectingRangeEnd(y),
229+
"react-datepicker__year-text--today": this.isCurrentYear(y),
230+
},
231+
);
223232
};
224233

225234
getYearTabIndex = (y) => {

‎test/year_picker_test.test.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -737,4 +737,27 @@ describe("YearPicker", () => {
737737
expect(utils.getYear(preSelected)).toBe(2021);
738738
});
739739
});
740+
741+
it("should apply className returned from passed yearClassName prop function", () => {
742+
const className = "customClassName";
743+
const yearClassNameFunc = () => className;
744+
const date = new Date();
745+
const { container } = render(
746+
<Year
747+
date={date}
748+
onYearMouseEnter={() => {}}
749+
onYearMouseLeave={() => {}}
750+
yearClassName={yearClassNameFunc}
751+
/>,
752+
);
753+
expect(
754+
container
755+
.querySelector(".react-datepicker__year-text")
756+
.classList.contains(className),
757+
).toBe(true);
758+
759+
expect(
760+
container.querySelector(`.react-datepicker__year-${date.getFullYear()}`),
761+
).not.toBeNull();
762+
});
740763
});

0 commit comments

Comments
 (0)