Add date validity checks to Calendar and Month components

Introduces isValid checks in Calendar and Month components to prevent rendering and formatting with invalid dates. This improves robustness and accessibility by ensuring UI elements and aria-labels are only generated for valid dates.

Author: martijnrusschen

src/calendar.tsx

@@ -266,6 +266,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
   componentDidUpdate(prevProps: CalendarProps) {
     if (
       this.props.preSelection &&
+      isValid(this.props.preSelection) &&
       (!isSameDay(this.props.preSelection, prevProps.preSelection) ||
         this.props.monthSelectedIn !== prevProps.monthSelectedIn)
     ) {
@@ -468,6 +469,11 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
   };
 
   header = (date: Date = this.state.date): React.ReactElement[] => {
+    // Return empty array if date is invalid
+    if (!isValid(date)) {
+      return [];
+    }
+
     const disabled = this.props.disabled;
     const startOfWeek = getStartOfWeek(
       date,
@@ -781,7 +787,9 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     }
     return (
       <h2 className={classes.join(" ")}>
-        {formatDate(date, this.props.dateFormat, this.props.locale)}
+        {isValid(date)
+          ? formatDate(date, this.props.dateFormat, this.props.locale)
+          : ""}
       </h2>
     );
   };
@@ -1112,6 +1120,17 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
   };
 
   renderAriaLiveRegion = (): React.ReactElement => {
+    // Don't render aria-live message if date is invalid
+    if (!isValid(this.state.date)) {
+      return (
+        <span
+          role="alert"
+          aria-live="polite"
+          className="react-datepicker__aria-live"
+        />
+      );
+    }
+
     const { startPeriod, endPeriod } = getYearsPeriod(
       this.state.date,
       this.props.yearItemNumber ?? Calendar.defaultProps.yearItemNumber,

src/month.tsx

@@ -27,6 +27,7 @@ import {
   isSameMonth,
   isSameQuarter,
   isSpaceKeyDown,
+  isValid,
   newDate,
   setMonth,
   setQuarter,
@@ -447,6 +448,11 @@ export default class Month extends Component<MonthProps> {
   };
 
   renderWeeks = () => {
+    // Return empty array if day is invalid
+    if (!isValid(this.props.day)) {
+      return [];
+    }
+
     const weeks = [];
     const isFixedHeight = this.props.fixedHeight;
 
@@ -1138,6 +1144,11 @@ export default class Month extends Component<MonthProps> {
       ? ariaLabelPrefix.trim() + " "
       : "";
 
+    // Format aria-label, return empty string if date is invalid
+    const formattedAriaLabel = isValid(day)
+      ? `${formattedAriaLabelPrefix}${formatDate(day, "MMMM, yyyy", this.props.locale)}`
+      : "";
+
     const shouldUseListboxRole = showMonthYearPicker || showQuarterYearPicker;
 
     if (shouldUseListboxRole) {
@@ -1150,7 +1161,7 @@ export default class Month extends Component<MonthProps> {
           onPointerLeave={
             this.props.usePointerEvent ? this.handleMouseLeave : undefined
           }
-          aria-label={`${formattedAriaLabelPrefix}${formatDate(day, "MMMM, yyyy", this.props.locale)}`}
+          aria-label={formattedAriaLabel}
           role="listbox"
         >
           {showMonthYearPicker ? this.renderMonths() : this.renderQuarters()}
@@ -1172,7 +1183,7 @@ export default class Month extends Component<MonthProps> {
           onPointerLeave={
             this.props.usePointerEvent ? this.handleMouseLeave : undefined
           }
-          aria-label={`${formattedAriaLabelPrefix}${formatDate(day, "MMMM, yyyy", this.props.locale)}`}
+          aria-label={formattedAriaLabel}
           role="rowgroup"
         >
           {this.renderWeeks()}