Skip to content

Commit

Permalink
Combobox Date Picker Example: Change previous and next month and year…
Browse files Browse the repository at this point in the history 
… behavior for dates near end of month (pull #2618)

Provides partial resolution of #2581.
The remainder of the resolution is provided by #2643.

This PR changes behavior of commands for next and previous month and year In the combobox date picker when the currently focused date does not exist in the previous or next month or year. With these changes, if the same day number does not exist in the newly displayed month, the last day of the newly displayed month receives focus.

---------

Co-authored-by: Matt King <a11yThinker@gmail.com>
  • Loading branch information
@jongund @mcking65
jongund and mcking65 committed Apr 4, 2023
1 parent 4f1d770 commit ce0336b
Show file tree
Hide file tree
Showing 4 changed files with 448 additions and 80 deletions.
22 changes: 11 additions & 11 deletions content/patterns/combobox/examples/combobox-datepicker.html
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
10 changes: 10 additions & 0 deletions content/patterns/combobox/examples/css/combobox-datepicker.css
View file
Expand Up @@ -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,
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -227,6 +236,7 @@
.combobox-datepicker .dates td:hover {
padding: 0;
background-color: hsl(216deg 80% 92%);
color: black;
}

.combobox-datepicker .dates td:focus {
Expand Down
49 changes: 44 additions & 5 deletions content/patterns/combobox/examples/js/combobox-datepicker.js
View file
Expand Up @@ -48,6 +48,7 @@ class ComboboxDatePicker {
this.tbodyNode = this.dialogNode.querySelector('table.dates tbody');

this.lastRowNode = null;
this.lastDate = -1;

this.days = [];

Expand Down Expand Up @@ -234,6 +235,7 @@ class ComboboxDatePicker {
this.buttonNode.classList.add('open');
this.getDateFromCombobox();
this.updateGrid();
this.lastDate = this.focusDay.getDate();
}

isOpen() {
Expand Down Expand Up @@ -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);
}

Expand Down Expand Up @@ -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);
}
Expand Down

0 comments on commit ce0336b

Please sign in to comment.