Combobox Date Picker Example: Change previous and next month and year behavior for dates near end of month

content/patterns/combobox/examples/combobox-datepicker.html

@@ -312,7 +312,7 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
                   </ul>
                 </td>
               </tr>
-              <tr data-test-id="grid-return">
+              <tr data-test-id="grid-enter">
                 <th><kbd>Enter</kbd></th>
                 <td>
                   <ul>
@@ -352,8 +352,8 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
                   <ul>
                     <li>Changes the grid of dates to the previous month.</li>
                     <li>
-                      Moves focus to the same day of the same week.
-                      If that day does not exist, moves focus to the same day of the previous or next week.
+                      Moves focus to the day of the month that has the same number.
+                      If that day does not exist, moves focus to the last day of the month.
                     </li>
                   </ul>
                 </td>
@@ -365,10 +365,10 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
                 </th>
                 <td>
                   <ul>
-                    <li>Changes the grid of dates to the previous year.</li>
+                    <li>Changes the grid of dates to the same month in the previous year.</li>
                     <li>
-                      Moves focus to the same day of the same week in the previous year.
-                      If that day does not exist, moves focus to the same day of the previous or next week.
+Moves focus to the day of the month that has the same number.
+                      If that day does not exist, moves focus to the last day of the month.
                     </li>
                   </ul>
                 </td>
@@ -379,8 +379,8 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
                   <ul>
                     <li>Changes the grid of dates to the next month.</li>
                     <li>
-                      Moves focus to the same day of the same week.
-                      If that day does not exist, moves focus to the same day of previous or next week.
+                      Moves focus to the day of the month that has the same number.
+                      If that day does not exist, moves focus to the last day of the month.
                     </li>
                   </ul>
                 </td>
@@ -392,10 +392,10 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
                 </th>
                 <td>
                   <ul>
-                    <li>Changes the grid of dates to the next year.</li>
+                    <li>Changes the grid of dates to the same month in the next year.</li>
                     <li>
-                      Moves focus to the same day of the same week in the next year.
-                      If that day does not exist, moves focus to the same day of previous or next week.
+                      Moves focus to the day of the month that has the same number.
+                      If that day does not exist, moves focus to the last day of the month.
                     </li>
                   </ul>
                 </td>

content/patterns/combobox/examples/css/combobox-datepicker.css

@@ -127,13 +127,15 @@
   color: white;
   text-transform: none;
   font-weight: bold;
+  border: none;
 }
 
 .combobox-datepicker .dates {
   width: 320px;
   padding-left: 1em;
   padding-right: 1em;
   padding-top: 1em;
+  border-collapse: separate;
 }
 
 .combobox-datepicker .prev-year,
@@ -193,9 +195,16 @@
   text-align: center;
 }
 
+.combobox-datepicker table {
+  border: none;
+}
+
 .combobox-datepicker .dates th,
 .combobox-datepicker .dates td {
   text-align: center;
+  color: black;
+  background: white;
+  border: none;
 }
 
 .combobox-datepicker .dates tr {
@@ -227,6 +236,7 @@
 .combobox-datepicker .dates td:hover {
   padding: 0;
   background-color: hsl(216deg 80% 92%);
+  color: black;
 }
 
 .combobox-datepicker .dates td:focus {

content/patterns/combobox/examples/js/combobox-datepicker.js

@@ -48,6 +48,7 @@ class ComboboxDatePicker {
     this.tbodyNode = this.dialogNode.querySelector('table.dates tbody');
 
     this.lastRowNode = null;
+    this.lastDate = -1;
 
     this.days = [];
 
@@ -234,6 +235,7 @@ class ComboboxDatePicker {
     this.buttonNode.classList.add('open');
     this.getDateFromCombobox();
     this.updateGrid();
+    this.lastDate = this.focusDay.getDate();
   }
 
   isOpen() {
@@ -497,59 +499,96 @@ class ComboboxDatePicker {
     this.setFocusDay();
   }
 
+  changeMonth(currentDate, numMonths) {
+    const getDays = (year, month) => new Date(year, month, 0).getDate();
+
+    const isPrev = numMonths < 0;
+    const numYears = Math.trunc(Math.abs(numMonths) / 12);
+    numMonths = Math.abs(numMonths) % 12;
+
+    const newYear = isPrev
+      ? currentDate.getFullYear() - numYears
+      : currentDate.getFullYear() + numYears;
+
+    const newMonth = isPrev
+      ? currentDate.getMonth() - numMonths
+      : currentDate.getMonth() + numMonths;
+
+    const newDate = new Date(newYear, newMonth, 1);
+
+    const daysInMonth = getDays(newDate.getFullYear(), newDate.getMonth() + 1);
+
+    // If lastDat is not initialized set to current date
+    this.lastDate = this.lastDate ? this.lastDate : currentDate.getDate();
+
+    if (this.lastDate > daysInMonth) {
+      newDate.setDate(daysInMonth);
+    } else {
+      newDate.setDate(this.lastDate);
+    }
+
+    return newDate;
+  }
+
   moveToNextYear() {
-    this.focusDay.setFullYear(this.focusDay.getFullYear() + 1);
+    this.focusDay = this.changeMonth(this.focusDay, 12);
     this.updateGrid();
   }
 
   moveToPreviousYear() {
-    this.focusDay.setFullYear(this.focusDay.getFullYear() - 1);
+    this.focusDay = this.changeMonth(this.focusDay, -12);
     this.updateGrid();
   }
 
   moveToNextMonth() {
-    this.focusDay.setMonth(this.focusDay.getMonth() + 1);
+    this.focusDay = this.changeMonth(this.focusDay, 1);
     this.updateGrid();
   }
 
   moveToPreviousMonth() {
-    this.focusDay.setMonth(this.focusDay.getMonth() - 1);
+    this.focusDay = this.changeMonth(this.focusDay, -1);
     this.updateGrid();
   }
 
   moveFocusToNextDay() {
     var d = new Date(this.focusDay);
     d.setDate(d.getDate() + 1);
+    this.lastDate = d.getDate();
     this.moveFocusToDay(d);
   }
 
   moveFocusToNextWeek() {
     var d = new Date(this.focusDay);
     d.setDate(d.getDate() + 7);
+    this.lastDate = d.getDate();
     this.moveFocusToDay(d);
   }
 
   moveFocusToPreviousDay() {
     var d = new Date(this.focusDay);
     d.setDate(d.getDate() - 1);
+    this.lastDate = d.getDate();
     this.moveFocusToDay(d);
   }
 
   moveFocusToPreviousWeek() {
     var d = new Date(this.focusDay);
     d.setDate(d.getDate() - 7);
+    this.lastDate = d.getDate();
     this.moveFocusToDay(d);
   }
 
   moveFocusToFirstDayOfWeek() {
     var d = new Date(this.focusDay);
     d.setDate(d.getDate() - d.getDay());
+    this.lastDate = d.getDate();
     this.moveFocusToDay(d);
   }
 
   moveFocusToLastDayOfWeek() {
     var d = new Date(this.focusDay);
     d.setDate(d.getDate() + (6 - d.getDay()));
+    this.lastDate = d.getDate();
     this.moveFocusToDay(d);
   }
 
@@ -736,7 +775,7 @@ class ComboboxDatePicker {
       );
       this.selectedDay = new Date(this.focusDay);
     } else {
-      // If not a valid date (MM/DD/YY) initialize with todays date
+      // If not a valid date (MM/DD/YY) initialize with today's date
       this.focusDay = new Date();
       this.selectedDay = new Date(0, 0, 1);
     }