From 32c7ef25b13cb8ccc0d7ea12a9df8c2e2c3a5326 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Tue, 6 Jun 2023 10:48:30 -0500
Subject: [PATCH] Datepicker Modal Dialog: Fixed next/prev month bug and
 improve adherence with APG code style guide (pull #2643)

This PR complements PR #2618 to provide the remaining changes to resolve issue #2581.

This PR changes behavior of commands for next and previous month and year In the date picker dialog 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.

In addition to the above enhancement, this PR also includes the following changes:
* Updates coding practices to use `class` constructor and pointer events
* Updates documentation of page up and page down commands
* Updates regression tests for page up and page down commands

---------

Co-authored-by: Matt King <a11yThinker@gmail.com>
---
 .../examples/css/datepicker-dialog.css        |    7 +
 .../examples/datepicker-dialog.html           |   48 +-
 .../examples/js/datepicker-dialog.js          | 1420 +++++++++--------
 test/tests/dialog-modal_datepicker.js         |  227 +--
 4 files changed, 894 insertions(+), 808 deletions(-)

diff --git a/content/patterns/dialog-modal/examples/css/datepicker-dialog.css b/content/patterns/dialog-modal/examples/css/datepicker-dialog.css
index c8b3a3f43b..0c02491917 100644
--- a/content/patterns/dialog-modal/examples/css/datepicker-dialog.css
+++ b/content/patterns/dialog-modal/examples/css/datepicker-dialog.css
@@ -91,6 +91,7 @@
   color: white;
   text-transform: none;
   font-weight: bold;
+  border: none;
 }
 
 .datepicker-dialog button {
@@ -177,11 +178,16 @@
   padding-left: 1em;
   padding-right: 1em;
   padding-top: 1em;
+  border: none;
+  border-collapse: separate;
 }
 
 .datepicker-dialog table.dates th,
 .datepicker-dialog table.dates td {
   text-align: center;
+  background: white;
+  color: black;
+  border: none;
 }
 
 .datepicker-dialog table.dates tr {
@@ -210,6 +216,7 @@
 .datepicker-dialog table.dates td:hover {
   padding: 0;
   background-color: hsl(216deg 80% 92%);
+  color: black;
 }
 
 .datepicker-dialog table.dates td:focus {
diff --git a/content/patterns/dialog-modal/examples/datepicker-dialog.html b/content/patterns/dialog-modal/examples/datepicker-dialog.html
index a3a468836c..1dcfc74816 100644
--- a/content/patterns/dialog-modal/examples/datepicker-dialog.html
+++ b/content/patterns/dialog-modal/examples/datepicker-dialog.html
@@ -172,7 +172,7 @@ <h2>Accessibility Features</h2>
         <ul>
           <li>The description of the date format is associated with the text input via <code>aria-describedby</code>, making it available to assistive technologies as an accessible description.</li>
           <li>
-            After a date is chosen, the accessible name of the &quot;Choose Date&quot; button is changed to &quot;Change Date, DATE_STRING&quot; where DATE_STRING is the selected date.
+            After a date is chosen, the accessible name of the "Choose Date" button is changed to "Change Date, DATE_STRING" where DATE_STRING is the selected date.
             So, when the dialog closes and focus returns to the button, screen reader users hear confirmation of the selected date.
           </li>
           <li>In the dialog, shortcut keys are assigned to the additional buttons for changing the month and year displayed in the calendar.</li>
@@ -238,7 +238,7 @@ <h3 id="kbd_label_3">Date Picker Dialog</h3>
             <tbody>
               <tr data-test-id="dialog-esc">
                 <th><kbd>ESC</kbd></th>
-                <td>Closes the dialog and returns focus to the &quot;Choose Date&quot; button.</td>
+                <td>Closes the dialog and returns focus to the "Choose Date" button.</td>
               </tr>
               <tr data-test-id="dialog-tab">
                 <th><kbd>Tab</kbd></th>
@@ -246,7 +246,7 @@ <h3 id="kbd_label_3">Date Picker Dialog</h3>
                   <ul>
                     <li>Moves focus to next element in the dialog <kbd>Tab</kbd> sequence.</li>
                     <li>Note that, as specified in the <a href="../../grid/grid-pattern.html">Grid Pattern</a>, only one button in the calendar grid is in the <kbd>Tab</kbd> sequence.</li>
-                    <li>If focus is on the last button (i.e., &quot;OK&quot;), moves focus to the first button (i.e. &quot;Previous Year&quot;).</li>
+                    <li>If focus is on the last button (i.e., "OK"), moves focus to the first button (i.e. "Previous Year").</li>
                   </ul>
                 </td>
               </tr>
@@ -256,7 +256,7 @@ <h3 id="kbd_label_3">Date Picker Dialog</h3>
                   <ul>
                     <li>Moves focus to previous element in the dialog <kbd>Tab</kbd> sequence.</li>
                     <li>Note that, as specified in the <a href="../../grid/grid-pattern.html">Grid Pattern</a>, only one button in the calendar grid is in the <kbd>Tab</kbd> sequence.</li>
-                    <li>If focus is on the first button (i.e., &quot;Previous Year&quot;), moves focus to the last button (i.e. &quot;OK&quot;).</li>
+                    <li>If focus is on the first button (i.e., "Previous Year"), moves focus to the last button (i.e. "OK").</li>
                   </ul>
                 </td>
               </tr>
@@ -296,9 +296,9 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
                 <th><kbd>Space</kbd>,<br><kbd>Enter</kbd></th>
                 <td>
                   <ul>
-                    <li>Select the date, close the dialog, and move focus to the &quot;Choose Date&quot; button.</li>
-                    <li>Update the value of the &quot;Date&quot; input with the selected date.</li>
-                    <li>Update the accessible name of the &quot;Choose Date&quot; button to include the selected date.</li>
+                    <li>Select the date, close the dialog, and move focus to the "Choose Date" button.</li>
+                    <li>Update the value of the "Date" input with the selected date.</li>
+                    <li>Update the accessible name of the "Choose Date" button to include the selected date.</li>
                   </ul>
                 </td>
               </tr>
@@ -332,8 +332,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>
-                      Sets focus on the same day of the same week.
-                      If that day does not exist, then 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>
@@ -342,10 +342,10 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
                 <th><kbd>Shift + Page Up</kbd></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>
-                      Sets focus on the same day of the same week.
-                      If that day does not exist, then 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>
@@ -356,8 +356,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>
-                      Sets focus on the same day of the same week.
-                      If that day does not exist, then 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>
@@ -366,10 +366,10 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
                 <th><kbd>Shift + Page Down</kbd></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>
-                      Sets focus on the same day of the same week.
-                      If that day does not exist, then 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>
@@ -393,8 +393,8 @@ <h3 id="kbd_label_6">Date Picker Dialog: OK and Cancel Buttons</h3>
                 <td>
                   Activates the button:
                   <ul>
-                    <li>&quot;Cancel&quot;: Closes the dialog, moves focus to &quot;Choose Date&quot; button, does not update date in date input.</li>
-                    <li>&quot;OK&quot;: Closes the dialog, moves focus to &quot;Choose Date&quot; button, updates date in date input, updates accessible name of the &quot;Choose Date&quot; button to include the selected date.</li>
+                    <li>"Cancel": Closes the dialog, moves focus to "Choose Date" button, does not update date in date input.</li>
+                    <li>"OK": Closes the dialog, moves focus to "Choose Date" button, updates date in date input, updates accessible name of the "Choose Date" button to include the selected date.</li>
                   </ul>
                 </td>
               </tr>
@@ -420,7 +420,7 @@ <h3 id="rps_label_textbox">Textbox</h3>
             <tbody>
               <tr data-test-id="textbox-aria-describedby">
                 <td></td>
-                <th scope="row"><code>aria-describedby="IDREF"</code></th>
+                <th scope="row"><code>aria-describedby="ID_REFERENCE"</code></th>
                 <td><code>input</code></td>
                 <td>Identifies the element that provides an accessible description for the textbox, enabling assistive technologies to associate the date format description with the input.</td>
               </tr>
@@ -446,8 +446,8 @@ <h3 id="rps_label_2">Choose Date Button</h3>
                 <td><code>button</code></td>
                 <td>
                   <ul>
-                    <li>The initial value of accessible name is &quot;Choose Date&quot;.</li>
-                    <li>When users select a date, the accessible name is changed to &quot;Change Date, DATE_STRING&quot; where DATE_STRING is the selected date.</li>
+                    <li>The initial value of accessible name is "Choose Date".</li>
+                    <li>When users select a date, the accessible name is changed to "Change Date, DATE_STRING" where DATE_STRING is the selected date.</li>
                   </ul>
                 </td>
               </tr>
@@ -531,7 +531,7 @@ <h3 id="rps_label_4">Date Picker Dialog: Calendar Navigation Buttons</h3>
                 <td></td>
                 <th scope="row"><code>aria-label="String"</code></th>
                 <td><code>button</code></td>
-                <td>Defines the accessible name of the button (e.g. &quot;Next Year&quot;).</td>
+                <td>Defines the accessible name of the button (e.g. "Next Year").</td>
               </tr>
             </tbody>
           </table>
@@ -564,7 +564,7 @@ <h3 id="rps_label_5">Date Picker Dialog: Date Grid</h3>
               </tr>
               <tr data-test-id="grid-aria-labelledby">
                 <td></td>
-                <th scope="row"><code>aria-labelledby=&quot;IDREF&quot;</code></th>
+                <th scope="row"><code>aria-labelledby="ID_REFERENCE"</code></th>
                 <td><code>table</code></td>
                 <td>Identifies the element that provides the accessible name for the <code>grid</code>.</td>
               </tr>
diff --git a/content/patterns/dialog-modal/examples/js/datepicker-dialog.js b/content/patterns/dialog-modal/examples/js/datepicker-dialog.js
index 856003a4ad..56e92fa24f 100644
--- a/content/patterns/dialog-modal/examples/js/datepicker-dialog.js
+++ b/content/patterns/dialog-modal/examples/js/datepicker-dialog.js
@@ -7,814 +7,858 @@
 
 'use strict';
 
-var DatePickerDialog = function (cdp) {
-  this.buttonLabelChoose = 'Choose Date';
-  this.buttonLabelChange = 'Change Date';
-  this.dayLabels = [
-    'Sunday',
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday',
-  ];
-  this.monthLabels = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
-
-  this.messageCursorKeys = 'Cursor keys can navigate dates';
-  this.lastMessage = '';
-
-  this.textboxNode = cdp.querySelector('input[type="text"');
-  this.buttonNode = cdp.querySelector('.group button');
-  this.dialogNode = cdp.querySelector('[role="dialog"]');
-  this.messageNode = this.dialogNode.querySelector('.dialog-message');
-
-  this.monthYearNode = this.dialogNode.querySelector('.month-year');
-
-  this.prevYearNode = this.dialogNode.querySelector('.prev-year');
-  this.prevMonthNode = this.dialogNode.querySelector('.prev-month');
-  this.nextMonthNode = this.dialogNode.querySelector('.next-month');
-  this.nextYearNode = this.dialogNode.querySelector('.next-year');
-
-  this.okButtonNode = this.dialogNode.querySelector('button[value="ok"]');
-  this.cancelButtonNode = this.dialogNode.querySelector(
-    'button[value="cancel"]'
-  );
-
-  this.tbodyNode = this.dialogNode.querySelector('table.dates tbody');
-
-  this.lastRowNode = null;
-
-  this.days = [];
-
-  this.focusDay = new Date();
-  this.selectedDay = new Date(0, 0, 1);
-
-  this.isMouseDownOnBackground = false;
-
-  this.init();
-};
-
-DatePickerDialog.prototype.init = function () {
-  this.textboxNode.addEventListener(
-    'blur',
-    this.setDateForButtonLabel.bind(this)
-  );
-
-  this.buttonNode.addEventListener(
-    'keydown',
-    this.handleButtonKeydown.bind(this)
-  );
-  this.buttonNode.addEventListener('click', this.handleButtonClick.bind(this));
-
-  this.okButtonNode.addEventListener('click', this.handleOkButton.bind(this));
-  this.okButtonNode.addEventListener('keydown', this.handleOkButton.bind(this));
-
-  this.cancelButtonNode.addEventListener(
-    'click',
-    this.handleCancelButton.bind(this)
-  );
-  this.cancelButtonNode.addEventListener(
-    'keydown',
-    this.handleCancelButton.bind(this)
-  );
-
-  this.prevMonthNode.addEventListener(
-    'click',
-    this.handlePreviousMonthButton.bind(this)
-  );
-  this.nextMonthNode.addEventListener(
-    'click',
-    this.handleNextMonthButton.bind(this)
-  );
-  this.prevYearNode.addEventListener(
-    'click',
-    this.handlePreviousYearButton.bind(this)
-  );
-  this.nextYearNode.addEventListener(
-    'click',
-    this.handleNextYearButton.bind(this)
-  );
-
-  this.prevMonthNode.addEventListener(
-    'keydown',
-    this.handlePreviousMonthButton.bind(this)
-  );
-  this.nextMonthNode.addEventListener(
-    'keydown',
-    this.handleNextMonthButton.bind(this)
-  );
-  this.prevYearNode.addEventListener(
-    'keydown',
-    this.handlePreviousYearButton.bind(this)
-  );
-  this.nextYearNode.addEventListener(
-    'keydown',
-    this.handleNextYearButton.bind(this)
-  );
-
-  document.body.addEventListener(
-    'mouseup',
-    this.handleBackgroundMouseUp.bind(this),
-    true
-  );
-
-  // Create Grid of Dates
-
-  this.tbodyNode.innerHTML = '';
-  for (var i = 0; i < 6; i++) {
-    var row = this.tbodyNode.insertRow(i);
-    this.lastRowNode = row;
-    for (var j = 0; j < 7; j++) {
-      var cell = document.createElement('td');
-
-      cell.tabIndex = -1;
-      cell.addEventListener('click', this.handleDayClick.bind(this));
-      cell.addEventListener('keydown', this.handleDayKeyDown.bind(this));
-      cell.addEventListener('focus', this.handleDayFocus.bind(this));
-
-      cell.textContent = '-1';
-
-      row.appendChild(cell);
-      this.days.push(cell);
-    }
-  }
-
-  this.updateGrid();
-  this.close(false);
-  this.setDateForButtonLabel();
-};
-
-DatePickerDialog.prototype.isSameDay = function (day1, day2) {
-  return (
-    day1.getFullYear() == day2.getFullYear() &&
-    day1.getMonth() == day2.getMonth() &&
-    day1.getDate() == day2.getDate()
-  );
-};
-
-DatePickerDialog.prototype.isNotSameMonth = function (day1, day2) {
-  return (
-    day1.getFullYear() != day2.getFullYear() ||
-    day1.getMonth() != day2.getMonth()
-  );
-};
-
-DatePickerDialog.prototype.updateGrid = function () {
-  var flag;
-  var fd = this.focusDay;
-
-  this.monthYearNode.textContent =
-    this.monthLabels[fd.getMonth()] + ' ' + fd.getFullYear();
-
-  var firstDayOfMonth = new Date(fd.getFullYear(), fd.getMonth(), 1);
-  var dayOfWeek = firstDayOfMonth.getDay();
-
-  firstDayOfMonth.setDate(firstDayOfMonth.getDate() - dayOfWeek);
-
-  var d = new Date(firstDayOfMonth);
-
-  for (var i = 0; i < this.days.length; i++) {
-    flag = d.getMonth() != fd.getMonth();
-    this.updateDate(this.days[i], flag, d, this.isSameDay(d, this.selectedDay));
-    d.setDate(d.getDate() + 1);
+class DatePickerDialog {
+  constructor(cdp) {
+    this.buttonLabelChoose = 'Choose Date';
+    this.buttonLabelChange = 'Change Date';
+    this.dayLabels = [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ];
+    this.monthLabels = [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ];
+
+    this.messageCursorKeys = 'Cursor keys can navigate dates';
+    this.lastMessage = '';
+
+    this.textboxNode = cdp.querySelector('input[type="text"');
+    this.buttonNode = cdp.querySelector('.group button');
+    this.dialogNode = cdp.querySelector('[role="dialog"]');
+    this.messageNode = this.dialogNode.querySelector('.dialog-message');
+
+    this.monthYearNode = this.dialogNode.querySelector('.month-year');
+
+    this.prevYearNode = this.dialogNode.querySelector('.prev-year');
+    this.prevMonthNode = this.dialogNode.querySelector('.prev-month');
+    this.nextMonthNode = this.dialogNode.querySelector('.next-month');
+    this.nextYearNode = this.dialogNode.querySelector('.next-year');
+
+    this.okButtonNode = this.dialogNode.querySelector('button[value="ok"]');
+    this.cancelButtonNode = this.dialogNode.querySelector(
+      'button[value="cancel"]'
+    );
+
+    this.tbodyNode = this.dialogNode.querySelector('table.dates tbody');
+
+    this.lastRowNode = null;
+
+    this.days = [];
+
+    this.focusDay = new Date();
+    this.selectedDay = new Date(0, 0, 1);
+
+    this.lastDate = -1;
+
+    this.isMouseDownOnBackground = false;
+
+    this.textboxNode.addEventListener(
+      'blur',
+      this.setDateForButtonLabel.bind(this)
+    );
+
+    this.buttonNode.addEventListener(
+      'keydown',
+      this.handleButtonKeydown.bind(this)
+    );
+    this.buttonNode.addEventListener(
+      'click',
+      this.handleButtonClick.bind(this)
+    );
+
+    this.okButtonNode.addEventListener('click', this.handleOkButton.bind(this));
+    this.okButtonNode.addEventListener(
+      'keydown',
+      this.handleOkButton.bind(this)
+    );
+
+    this.cancelButtonNode.addEventListener(
+      'click',
+      this.handleCancelButton.bind(this)
+    );
+    this.cancelButtonNode.addEventListener(
+      'keydown',
+      this.handleCancelButton.bind(this)
+    );
+
+    this.prevMonthNode.addEventListener(
+      'click',
+      this.handlePreviousMonthButton.bind(this)
+    );
+    this.nextMonthNode.addEventListener(
+      'click',
+      this.handleNextMonthButton.bind(this)
+    );
+    this.prevYearNode.addEventListener(
+      'click',
+      this.handlePreviousYearButton.bind(this)
+    );
+    this.nextYearNode.addEventListener(
+      'click',
+      this.handleNextYearButton.bind(this)
+    );
+
+    this.prevMonthNode.addEventListener(
+      'keydown',
+      this.handlePreviousMonthButton.bind(this)
+    );
+    this.nextMonthNode.addEventListener(
+      'keydown',
+      this.handleNextMonthButton.bind(this)
+    );
+    this.prevYearNode.addEventListener(
+      'keydown',
+      this.handlePreviousYearButton.bind(this)
+    );
+    this.nextYearNode.addEventListener(
+      'keydown',
+      this.handleNextYearButton.bind(this)
+    );
+
+    document.body.addEventListener(
+      'pointerup',
+      this.handleBackgroundMouseUp.bind(this),
+      true
+    );
+
+    // Create Grid of Dates
 
-    // Hide last row if all dates are disabled (e.g. in next month)
-    if (i === 35) {
-      if (flag) {
-        this.lastRowNode.style.visibility = 'hidden';
-      } else {
-        this.lastRowNode.style.visibility = 'visible';
+    this.tbodyNode.innerHTML = '';
+    for (let i = 0; i < 6; i++) {
+      const row = this.tbodyNode.insertRow(i);
+      this.lastRowNode = row;
+      for (let j = 0; j < 7; j++) {
+        const cell = document.createElement('td');
+
+        cell.tabIndex = -1;
+        cell.addEventListener('click', this.handleDayClick.bind(this));
+        cell.addEventListener('keydown', this.handleDayKeyDown.bind(this));
+        cell.addEventListener('focus', this.handleDayFocus.bind(this));
+
+        cell.textContent = '-1';
+
+        row.appendChild(cell);
+        this.days.push(cell);
       }
     }
+
+    this.updateGrid();
+    this.close(false);
+    this.setDateForButtonLabel();
   }
-};
 
-DatePickerDialog.prototype.updateDate = function (
-  domNode,
-  disable,
-  day,
-  selected
-) {
-  var d = day.getDate().toString();
-  if (day.getDate() <= 9) {
-    d = '0' + d;
+  isSameDay(day1, day2) {
+    return (
+      day1.getFullYear() == day2.getFullYear() &&
+      day1.getMonth() == day2.getMonth() &&
+      day1.getDate() == day2.getDate()
+    );
   }
 
-  var m = day.getMonth() + 1;
-  if (day.getMonth() < 9) {
-    m = '0' + m;
+  isNotSameMonth(day1, day2) {
+    return (
+      day1.getFullYear() != day2.getFullYear() ||
+      day1.getMonth() != day2.getMonth()
+    );
   }
 
-  domNode.tabIndex = -1;
-  domNode.removeAttribute('aria-selected');
-  domNode.setAttribute('data-date', day.getFullYear() + '-' + m + '-' + d);
+  updateGrid() {
+    const fd = this.focusDay;
+
+    this.monthYearNode.textContent =
+      this.monthLabels[fd.getMonth()] + ' ' + fd.getFullYear();
+
+    let firstDayOfMonth = new Date(fd.getFullYear(), fd.getMonth(), 1);
+    let dayOfWeek = firstDayOfMonth.getDay();
+
+    firstDayOfMonth.setDate(firstDayOfMonth.getDate() - dayOfWeek);
+
+    const d = new Date(firstDayOfMonth);
 
-  if (disable) {
-    domNode.classList.add('disabled');
-    domNode.textContent = '';
-  } else {
-    domNode.classList.remove('disabled');
-    domNode.textContent = day.getDate();
-    if (selected) {
-      domNode.setAttribute('aria-selected', 'true');
-      domNode.tabIndex = 0;
+    for (let i = 0; i < this.days.length; i++) {
+      const flag = d.getMonth() != fd.getMonth();
+      this.updateDate(
+        this.days[i],
+        flag,
+        d,
+        this.isSameDay(d, this.selectedDay)
+      );
+      d.setDate(d.getDate() + 1);
+
+      // Hide last row if all dates are disabled (e.g. in next month)
+      if (i === 35) {
+        if (flag) {
+          this.lastRowNode.style.visibility = 'hidden';
+        } else {
+          this.lastRowNode.style.visibility = 'visible';
+        }
+      }
     }
   }
-};
 
-DatePickerDialog.prototype.moveFocusToDay = function (day) {
-  var d = this.focusDay;
+  updateDate(domNode, disable, day, selected) {
+    let d = day.getDate().toString();
+    if (day.getDate() <= 9) {
+      d = '0' + d;
+    }
 
-  this.focusDay = day;
+    let m = day.getMonth() + 1;
+    if (day.getMonth() < 9) {
+      m = '0' + m;
+    }
 
-  if (
-    d.getMonth() != this.focusDay.getMonth() ||
-    d.getFullYear() != this.focusDay.getFullYear()
-  ) {
-    this.updateGrid();
+    domNode.tabIndex = -1;
+    domNode.removeAttribute('aria-selected');
+    domNode.setAttribute('data-date', day.getFullYear() + '-' + m + '-' + d);
+
+    if (disable) {
+      domNode.classList.add('disabled');
+      domNode.textContent = '';
+    } else {
+      domNode.classList.remove('disabled');
+      domNode.textContent = day.getDate();
+      if (selected) {
+        domNode.setAttribute('aria-selected', 'true');
+        domNode.tabIndex = 0;
+      }
+    }
   }
-  this.setFocusDay();
-};
 
-DatePickerDialog.prototype.setFocusDay = function (flag) {
-  if (typeof flag !== 'boolean') {
-    flag = true;
+  moveFocusToDay(day) {
+    const d = this.focusDay;
+
+    this.focusDay = day;
+
+    if (
+      d.getMonth() != this.focusDay.getMonth() ||
+      d.getFullYear() != this.focusDay.getFullYear()
+    ) {
+      this.updateGrid();
+    }
+    this.setFocusDay();
   }
 
-  for (var i = 0; i < this.days.length; i++) {
-    var dayNode = this.days[i];
-    var day = this.getDayFromDataDateAttribute(dayNode);
+  setFocusDay(flag) {
+    if (typeof flag !== 'boolean') {
+      flag = true;
+    }
+
+    for (let i = 0; i < this.days.length; i++) {
+      const dayNode = this.days[i];
+      const day = this.getDayFromDataDateAttribute(dayNode);
 
-    dayNode.tabIndex = -1;
-    if (this.isSameDay(day, this.focusDay)) {
-      dayNode.tabIndex = 0;
-      if (flag) {
-        dayNode.focus();
+      dayNode.tabIndex = -1;
+      if (this.isSameDay(day, this.focusDay)) {
+        dayNode.tabIndex = 0;
+        if (flag) {
+          dayNode.focus();
+        }
       }
     }
   }
-};
-
-DatePickerDialog.prototype.open = function () {
-  this.dialogNode.style.display = 'block';
-  this.dialogNode.style.zIndex = 2;
-
-  this.getDateFromTextbox();
-  this.updateGrid();
-};
-
-DatePickerDialog.prototype.isOpen = function () {
-  return window.getComputedStyle(this.dialogNode).display !== 'none';
-};
-
-DatePickerDialog.prototype.close = function (flag) {
-  if (typeof flag !== 'boolean') {
-    // Default is to move focus to combobox
-    flag = true;
-  }
-
-  this.setMessage('');
-  this.dialogNode.style.display = 'none';
-
-  if (flag) {
-    this.buttonNode.focus();
-  }
-};
-
-DatePickerDialog.prototype.moveToNextYear = function () {
-  this.focusDay.setFullYear(this.focusDay.getFullYear() + 1);
-  this.updateGrid();
-};
-
-DatePickerDialog.prototype.moveToPreviousYear = function () {
-  this.focusDay.setFullYear(this.focusDay.getFullYear() - 1);
-  this.updateGrid();
-};
-
-DatePickerDialog.prototype.moveToNextMonth = function () {
-  this.focusDay.setMonth(this.focusDay.getMonth() + 1);
-  this.updateGrid();
-};
-
-DatePickerDialog.prototype.moveToPreviousMonth = function () {
-  this.focusDay.setMonth(this.focusDay.getMonth() - 1);
-  this.updateGrid();
-};
-
-DatePickerDialog.prototype.moveFocusToNextDay = function () {
-  var d = new Date(this.focusDay);
-  d.setDate(d.getDate() + 1);
-  this.moveFocusToDay(d);
-};
-
-DatePickerDialog.prototype.moveFocusToNextWeek = function () {
-  var d = new Date(this.focusDay);
-  d.setDate(d.getDate() + 7);
-  this.moveFocusToDay(d);
-};
-
-DatePickerDialog.prototype.moveFocusToPreviousDay = function () {
-  var d = new Date(this.focusDay);
-  d.setDate(d.getDate() - 1);
-  this.moveFocusToDay(d);
-};
-
-DatePickerDialog.prototype.moveFocusToPreviousWeek = function () {
-  var d = new Date(this.focusDay);
-  d.setDate(d.getDate() - 7);
-  this.moveFocusToDay(d);
-};
-
-DatePickerDialog.prototype.moveFocusToFirstDayOfWeek = function () {
-  var d = new Date(this.focusDay);
-  d.setDate(d.getDate() - d.getDay());
-  this.moveFocusToDay(d);
-};
-
-DatePickerDialog.prototype.moveFocusToLastDayOfWeek = function () {
-  var d = new Date(this.focusDay);
-  d.setDate(d.getDate() + (6 - d.getDay()));
-  this.moveFocusToDay(d);
-};
-
-// Day methods
-
-DatePickerDialog.prototype.isDayDisabled = function (domNode) {
-  return domNode.classList.contains('disabled');
-};
-
-DatePickerDialog.prototype.getDayFromDataDateAttribute = function (domNode) {
-  var parts = domNode.getAttribute('data-date').split('-');
-  return new Date(parts[0], parseInt(parts[1]) - 1, parts[2]);
-};
-// Textbox methods
-
-DatePickerDialog.prototype.setTextboxDate = function (domNode) {
-  var d = this.focusDay;
-
-  if (domNode) {
-    d = this.getDayFromDataDateAttribute(domNode);
-    // updated aria-selected
-    this.days.forEach((day) =>
-      day === domNode
-        ? day.setAttribute('aria-selected', 'true')
-        : day.removeAttribute('aria-selected')
-    );
-  }
 
-  this.textboxNode.value =
-    d.getMonth() + 1 + '/' + d.getDate() + '/' + d.getFullYear();
-  this.setDateForButtonLabel();
-};
-
-DatePickerDialog.prototype.getDateFromTextbox = function () {
-  var parts = this.textboxNode.value.split('/');
-  var month = parseInt(parts[0]);
-  var day = parseInt(parts[1]);
-  var year = parseInt(parts[2]);
-
-  if (
-    parts.length === 3 &&
-    Number.isInteger(month) &&
-    Number.isInteger(day) &&
-    Number.isInteger(year)
-  ) {
-    if (year < 100) {
-      year = 2000 + year;
-    }
-    this.focusDay = new Date(year, month - 1, day);
-    this.selectedDay = new Date(this.focusDay);
-  } else {
-    // If not a valid date (MM/DD/YY) initialize with todays date
-    this.focusDay = new Date();
-    this.selectedDay = new Date(0, 0, 1);
-  }
-};
-
-DatePickerDialog.prototype.setDateForButtonLabel = function () {
-  var parts = this.textboxNode.value.split('/');
-
-  if (
-    parts.length === 3 &&
-    Number.isInteger(parseInt(parts[0])) &&
-    Number.isInteger(parseInt(parts[1])) &&
-    Number.isInteger(parseInt(parts[2]))
-  ) {
-    var day = new Date(
-      parseInt(parts[2]),
-      parseInt(parts[0]) - 1,
-      parseInt(parts[1])
-    );
+  open() {
+    this.dialogNode.style.display = 'block';
+    this.dialogNode.style.zIndex = 2;
 
-    var label = this.buttonLabelChange;
-    label += ', ' + this.dayLabels[day.getDay()];
-    label += ' ' + this.monthLabels[day.getMonth()];
-    label += ' ' + day.getDate();
-    label += ', ' + day.getFullYear();
-    this.buttonNode.setAttribute('aria-label', label);
-  } else {
-    // If not a valid date, initialize with "Choose Date"
-    this.buttonNode.setAttribute('aria-label', this.buttonLabelChoose);
+    this.getDateFromTextbox();
+    this.updateGrid();
+    this.lastDate = this.focusDay.getDate();
   }
-};
 
-DatePickerDialog.prototype.setMessage = function (str) {
-  function setMessageDelayed() {
-    this.messageNode.textContent = str;
+  isOpen() {
+    return window.getComputedStyle(this.dialogNode).display !== 'none';
   }
 
-  if (str !== this.lastMessage) {
-    setTimeout(setMessageDelayed.bind(this), 200);
-    this.lastMessage = str;
+  close(flag) {
+    if (typeof flag !== 'boolean') {
+      // Default is to move focus to combobox
+      flag = true;
+    }
+
+    this.setMessage('');
+    this.dialogNode.style.display = 'none';
+
+    if (flag) {
+      this.buttonNode.focus();
+    }
   }
-};
 
-// Event handlers
+  changeMonth(currentDate, numMonths) {
+    const getDays = (year, month) => new Date(year, month, 0).getDate();
 
-DatePickerDialog.prototype.handleOkButton = function (event) {
-  var flag = false;
+    const isPrev = numMonths < 0;
+    const numYears = Math.trunc(Math.abs(numMonths) / 12);
+    numMonths = Math.abs(numMonths) % 12;
 
-  switch (event.type) {
-    case 'keydown':
-      switch (event.key) {
-        case 'Tab':
-          if (!event.shiftKey) {
-            this.prevYearNode.focus();
-            flag = true;
-          }
-          break;
+    const newYear = isPrev
+      ? currentDate.getFullYear() - numYears
+      : currentDate.getFullYear() + numYears;
 
-        case 'Esc':
-        case 'Escape':
-          this.close();
-          flag = true;
-          break;
+    const newMonth = isPrev
+      ? currentDate.getMonth() - numMonths
+      : currentDate.getMonth() + numMonths;
 
-        default:
-          break;
-      }
-      break;
+    const newDate = new Date(newYear, newMonth, 1);
 
-    case 'click':
-      this.setTextboxDate();
-      this.close();
-      flag = true;
-      break;
+    const daysInMonth = getDays(newDate.getFullYear(), newDate.getMonth() + 1);
 
-    default:
-      break;
-  }
+    // If lastDat is not initialized set to current date
+    this.lastDate = this.lastDate ? this.lastDate : currentDate.getDate();
 
-  if (flag) {
-    event.stopPropagation();
-    event.preventDefault();
+    if (this.lastDate > daysInMonth) {
+      newDate.setDate(daysInMonth);
+    } else {
+      newDate.setDate(this.lastDate);
+    }
+
+    return newDate;
   }
-};
 
-DatePickerDialog.prototype.handleCancelButton = function (event) {
-  var flag = false;
+  moveToNextYear() {
+    this.focusDay = this.changeMonth(this.focusDay, 12);
+    this.updateGrid();
+  }
 
-  switch (event.type) {
-    case 'keydown':
-      switch (event.key) {
-        case 'Esc':
-        case 'Escape':
-          this.close();
-          flag = true;
-          break;
+  moveToPreviousYear() {
+    this.focusDay = this.changeMonth(this.focusDay, -12);
+    this.updateGrid();
+  }
 
-        default:
-          break;
-      }
-      break;
+  moveToNextMonth() {
+    this.focusDay = this.changeMonth(this.focusDay, 1);
+    this.updateGrid();
+  }
 
-    case 'click':
-      this.close();
-      flag = true;
-      break;
+  moveToPreviousMonth() {
+    this.focusDay = this.changeMonth(this.focusDay, -1);
+    this.updateGrid();
+  }
 
-    default:
-      break;
+  moveFocusToNextDay() {
+    const d = new Date(this.focusDay);
+    d.setDate(d.getDate() + 1);
+    this.lastDate = d.getDate();
+    this.moveFocusToDay(d);
   }
 
-  if (flag) {
-    event.stopPropagation();
-    event.preventDefault();
+  moveFocusToNextWeek() {
+    const d = new Date(this.focusDay);
+    d.setDate(d.getDate() + 7);
+    this.lastDate = d.getDate();
+    this.moveFocusToDay(d);
   }
-};
 
-DatePickerDialog.prototype.handleNextYearButton = function (event) {
-  var flag = false;
+  moveFocusToPreviousDay() {
+    const d = new Date(this.focusDay);
+    d.setDate(d.getDate() - 1);
+    this.lastDate = d.getDate();
+    this.moveFocusToDay(d);
+  }
 
-  switch (event.type) {
-    case 'keydown':
-      switch (event.key) {
-        case 'Esc':
-        case 'Escape':
-          this.close();
-          flag = true;
-          break;
+  moveFocusToPreviousWeek() {
+    const d = new Date(this.focusDay);
+    d.setDate(d.getDate() - 7);
+    this.lastDate = d.getDate();
+    this.moveFocusToDay(d);
+  }
 
-        case 'Enter':
-          this.moveToNextYear();
-          this.setFocusDay(false);
-          flag = true;
-          break;
-      }
+  moveFocusToFirstDayOfWeek() {
+    const d = new Date(this.focusDay);
+    d.setDate(d.getDate() - d.getDay());
+    this.lastDate = d.getDate();
+    this.moveFocusToDay(d);
+  }
 
-      break;
+  moveFocusToLastDayOfWeek() {
+    const d = new Date(this.focusDay);
+    d.setDate(d.getDate() + (6 - d.getDay()));
+    this.lastDate = d.getDate();
+    this.moveFocusToDay(d);
+  }
 
-    case 'click':
-      this.moveToNextYear();
-      this.setFocusDay(false);
-      break;
+  // Day methods
 
-    default:
-      break;
+  isDayDisabled(domNode) {
+    return domNode.classList.contains('disabled');
   }
 
-  if (flag) {
-    event.stopPropagation();
-    event.preventDefault();
+  getDayFromDataDateAttribute(domNode) {
+    const parts = domNode.getAttribute('data-date').split('-');
+    return new Date(parts[0], parseInt(parts[1]) - 1, parts[2]);
   }
-};
 
-DatePickerDialog.prototype.handlePreviousYearButton = function (event) {
-  var flag = false;
+  // Textbox methods
 
-  switch (event.type) {
-    case 'keydown':
-      switch (event.key) {
-        case 'Enter':
-          this.moveToPreviousYear();
-          this.setFocusDay(false);
-          flag = true;
-          break;
-
-        case 'Tab':
-          if (event.shiftKey) {
-            this.okButtonNode.focus();
-            flag = true;
-          }
-          break;
+  setTextboxDate(domNode) {
+    let d = this.focusDay;
 
-        case 'Esc':
-        case 'Escape':
-          this.close();
-          flag = true;
-          break;
+    if (domNode) {
+      d = this.getDayFromDataDateAttribute(domNode);
+      // updated aria-selected
+      this.days.forEach((day) =>
+        day === domNode
+          ? day.setAttribute('aria-selected', 'true')
+          : day.removeAttribute('aria-selected')
+      );
+    }
 
-        default:
-          break;
+    this.textboxNode.value =
+      d.getMonth() + 1 + '/' + d.getDate() + '/' + d.getFullYear();
+    this.setDateForButtonLabel();
+  }
+
+  getDateFromTextbox() {
+    const parts = this.textboxNode.value.split('/');
+    const month = parseInt(parts[0]);
+    const day = parseInt(parts[1]);
+    let year = parseInt(parts[2]);
+
+    if (
+      parts.length === 3 &&
+      Number.isInteger(month) &&
+      Number.isInteger(day) &&
+      Number.isInteger(year)
+    ) {
+      if (year < 100) {
+        year = 2000 + year;
       }
+      this.focusDay = new Date(year, month - 1, day);
+      this.selectedDay = new Date(this.focusDay);
+    } else {
+      // If not a valid date (MM/DD/YY) initialize with todays date
+      this.focusDay = new Date();
+      this.selectedDay = new Date(0, 0, 1);
+    }
+  }
 
-      break;
+  setDateForButtonLabel() {
+    const parts = this.textboxNode.value.split('/');
+
+    if (
+      parts.length === 3 &&
+      Number.isInteger(parseInt(parts[0])) &&
+      Number.isInteger(parseInt(parts[1])) &&
+      Number.isInteger(parseInt(parts[2]))
+    ) {
+      const day = new Date(
+        parseInt(parts[2]),
+        parseInt(parts[0]) - 1,
+        parseInt(parts[1])
+      );
+
+      let label = this.buttonLabelChange;
+      label += ', ' + this.dayLabels[day.getDay()];
+      label += ' ' + this.monthLabels[day.getMonth()];
+      label += ' ' + day.getDate();
+      label += ', ' + day.getFullYear();
+      this.buttonNode.setAttribute('aria-label', label);
+    } else {
+      // If not a valid date, initialize with "Choose Date"
+      this.buttonNode.setAttribute('aria-label', this.buttonLabelChoose);
+    }
+  }
 
-    case 'click':
-      this.moveToPreviousYear();
-      this.setFocusDay(false);
-      break;
+  setMessage(str) {
+    function setMessageDelayed() {
+      this.messageNode.textContent = str;
+    }
 
-    default:
-      break;
+    if (str !== this.lastMessage) {
+      setTimeout(setMessageDelayed.bind(this), 200);
+      this.lastMessage = str;
+    }
   }
 
-  if (flag) {
-    event.stopPropagation();
-    event.preventDefault();
-  }
-};
+  // Event handlers
 
-DatePickerDialog.prototype.handleNextMonthButton = function (event) {
-  var flag = false;
+  handleOkButton(event) {
+    let flag = false;
 
-  switch (event.type) {
-    case 'keydown':
-      switch (event.key) {
-        case 'Esc':
-        case 'Escape':
-          this.close();
-          flag = true;
-          break;
+    switch (event.type) {
+      case 'keydown':
+        switch (event.key) {
+          case 'Tab':
+            if (!event.shiftKey) {
+              this.prevYearNode.focus();
+              flag = true;
+            }
+            break;
 
-        case 'Enter':
-          this.moveToNextMonth();
-          this.setFocusDay(false);
-          flag = true;
-          break;
-      }
+          case 'Esc':
+          case 'Escape':
+            this.close();
+            flag = true;
+            break;
 
-      break;
+          default:
+            break;
+        }
+        break;
 
-    case 'click':
-      this.moveToNextMonth();
-      this.setFocusDay(false);
-      break;
+      case 'click':
+        this.setTextboxDate();
+        this.close();
+        flag = true;
+        break;
 
-    default:
-      break;
-  }
+      default:
+        break;
+    }
 
-  if (flag) {
-    event.stopPropagation();
-    event.preventDefault();
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
   }
-};
 
-DatePickerDialog.prototype.handlePreviousMonthButton = function (event) {
-  var flag = false;
+  handleCancelButton(event) {
+    let flag = false;
 
-  switch (event.type) {
-    case 'keydown':
-      switch (event.key) {
-        case 'Esc':
-        case 'Escape':
-          this.close();
-          flag = true;
-          break;
+    switch (event.type) {
+      case 'keydown':
+        switch (event.key) {
+          case 'Esc':
+          case 'Escape':
+            this.close();
+            flag = true;
+            break;
 
-        case 'Enter':
-          this.moveToPreviousMonth();
-          this.setFocusDay(false);
-          flag = true;
-          break;
-      }
+          default:
+            break;
+        }
+        break;
 
-      break;
+      case 'click':
+        this.close();
+        flag = true;
+        break;
 
-    case 'click':
-      this.moveToPreviousMonth();
-      this.setFocusDay(false);
-      flag = true;
-      break;
+      default:
+        break;
+    }
 
-    default:
-      break;
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
   }
 
-  if (flag) {
-    event.stopPropagation();
-    event.preventDefault();
-  }
-};
+  handleNextYearButton(event) {
+    let flag = false;
 
-DatePickerDialog.prototype.handleDayKeyDown = function (event) {
-  var flag = false;
+    switch (event.type) {
+      case 'keydown':
+        switch (event.key) {
+          case 'Esc':
+          case 'Escape':
+            this.close();
+            flag = true;
+            break;
 
-  switch (event.key) {
-    case 'Esc':
-    case 'Escape':
-      this.close();
-      break;
+          case 'Enter':
+            this.moveToNextYear();
+            this.setFocusDay(false);
+            flag = true;
+            break;
+        }
 
-    case ' ':
-      this.setTextboxDate(event.currentTarget);
-      flag = true;
-      break;
+        break;
 
-    case 'Enter':
-      this.setTextboxDate(event.currentTarget);
-      this.close();
-      flag = true;
-      break;
+      case 'click':
+        this.moveToNextYear();
+        this.setFocusDay(false);
+        break;
 
-    case 'Tab':
-      this.cancelButtonNode.focus();
-      if (event.shiftKey) {
-        this.nextYearNode.focus();
-      }
-      this.setMessage('');
-      flag = true;
-      break;
+      default:
+        break;
+    }
 
-    case 'Right':
-    case 'ArrowRight':
-      this.moveFocusToNextDay();
-      flag = true;
-      break;
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
 
-    case 'Left':
-    case 'ArrowLeft':
-      this.moveFocusToPreviousDay();
-      flag = true;
-      break;
+  handlePreviousYearButton(event) {
+    let flag = false;
 
-    case 'Down':
-    case 'ArrowDown':
-      this.moveFocusToNextWeek();
-      flag = true;
-      break;
+    switch (event.type) {
+      case 'keydown':
+        switch (event.key) {
+          case 'Enter':
+            this.moveToPreviousYear();
+            this.setFocusDay(false);
+            flag = true;
+            break;
+
+          case 'Tab':
+            if (event.shiftKey) {
+              this.okButtonNode.focus();
+              flag = true;
+            }
+            break;
+
+          case 'Esc':
+          case 'Escape':
+            this.close();
+            flag = true;
+            break;
 
-    case 'Up':
-    case 'ArrowUp':
-      this.moveFocusToPreviousWeek();
-      flag = true;
-      break;
+          default:
+            break;
+        }
+
+        break;
 
-    case 'PageUp':
-      if (event.shiftKey) {
+      case 'click':
         this.moveToPreviousYear();
-      } else {
-        this.moveToPreviousMonth();
-      }
-      this.setFocusDay();
-      flag = true;
-      break;
+        this.setFocusDay(false);
+        break;
 
-    case 'PageDown':
-      if (event.shiftKey) {
-        this.moveToNextYear();
-      } else {
+      default:
+        break;
+    }
+
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+
+  handleNextMonthButton(event) {
+    let flag = false;
+
+    switch (event.type) {
+      case 'keydown':
+        switch (event.key) {
+          case 'Esc':
+          case 'Escape':
+            this.close();
+            flag = true;
+            break;
+
+          case 'Enter':
+            this.moveToNextMonth();
+            this.setFocusDay(false);
+            flag = true;
+            break;
+        }
+
+        break;
+
+      case 'click':
         this.moveToNextMonth();
-      }
-      this.setFocusDay();
-      flag = true;
-      break;
+        this.setFocusDay(false);
+        break;
 
-    case 'Home':
-      this.moveFocusToFirstDayOfWeek();
-      flag = true;
-      break;
+      default:
+        break;
+    }
 
-    case 'End':
-      this.moveFocusToLastDayOfWeek();
-      flag = true;
-      break;
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
   }
 
-  if (flag) {
-    event.stopPropagation();
-    event.preventDefault();
-  }
-};
+  handlePreviousMonthButton(event) {
+    let flag = false;
 
-DatePickerDialog.prototype.handleDayClick = function (event) {
-  if (!this.isDayDisabled(event.currentTarget) && event.which !== 3) {
-    this.setTextboxDate(event.currentTarget);
-    this.close();
+    switch (event.type) {
+      case 'keydown':
+        switch (event.key) {
+          case 'Esc':
+          case 'Escape':
+            this.close();
+            flag = true;
+            break;
+
+          case 'Enter':
+            this.moveToPreviousMonth();
+            this.setFocusDay(false);
+            flag = true;
+            break;
+        }
+
+        break;
+
+      case 'click':
+        this.moveToPreviousMonth();
+        this.setFocusDay(false);
+        flag = true;
+        break;
+
+      default:
+        break;
+    }
+
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
   }
 
-  event.stopPropagation();
-  event.preventDefault();
-};
+  handleDayKeyDown(event) {
+    let flag = false;
+
+    switch (event.key) {
+      case 'Esc':
+      case 'Escape':
+        this.close();
+        break;
+
+      case ' ':
+        this.setTextboxDate(event.currentTarget);
+        flag = true;
+        break;
+
+      case 'Enter':
+        this.setTextboxDate(event.currentTarget);
+        this.close();
+        flag = true;
+        break;
+
+      case 'Tab':
+        this.cancelButtonNode.focus();
+        if (event.shiftKey) {
+          this.nextYearNode.focus();
+        }
+        this.setMessage('');
+        flag = true;
+        break;
+
+      case 'Right':
+      case 'ArrowRight':
+        this.moveFocusToNextDay();
+        flag = true;
+        break;
+
+      case 'Left':
+      case 'ArrowLeft':
+        this.moveFocusToPreviousDay();
+        flag = true;
+        break;
+
+      case 'Down':
+      case 'ArrowDown':
+        this.moveFocusToNextWeek();
+        flag = true;
+        break;
+
+      case 'Up':
+      case 'ArrowUp':
+        this.moveFocusToPreviousWeek();
+        flag = true;
+        break;
+
+      case 'PageUp':
+        if (event.shiftKey) {
+          this.moveToPreviousYear();
+        } else {
+          this.moveToPreviousMonth();
+        }
+        this.setFocusDay();
+        flag = true;
+        break;
 
-DatePickerDialog.prototype.handleDayFocus = function () {
-  this.setMessage(this.messageCursorKeys);
-};
+      case 'PageDown':
+        if (event.shiftKey) {
+          this.moveToNextYear();
+        } else {
+          this.moveToNextMonth();
+        }
+        this.setFocusDay();
+        flag = true;
+        break;
+
+      case 'Home':
+        this.moveFocusToFirstDayOfWeek();
+        flag = true;
+        break;
+
+      case 'End':
+        this.moveFocusToLastDayOfWeek();
+        flag = true;
+        break;
+    }
 
-DatePickerDialog.prototype.handleButtonKeydown = function (event) {
-  if (event.key === 'Enter' || event.key === ' ') {
-    this.open();
-    this.setFocusDay();
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+
+  handleDayClick(event) {
+    if (!this.isDayDisabled(event.currentTarget) && event.which !== 3) {
+      this.setTextboxDate(event.currentTarget);
+      this.close();
+    }
 
     event.stopPropagation();
     event.preventDefault();
   }
-};
 
-DatePickerDialog.prototype.handleButtonClick = function (event) {
-  if (this.isOpen()) {
-    this.close();
-  } else {
-    this.open();
-    this.setFocusDay();
+  handleDayFocus() {
+    this.setMessage(this.messageCursorKeys);
   }
 
-  event.stopPropagation();
-  event.preventDefault();
-};
+  handleButtonKeydown(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      this.open();
+      this.setFocusDay();
 
-DatePickerDialog.prototype.handleBackgroundMouseUp = function (event) {
-  if (
-    !this.buttonNode.contains(event.target) &&
-    !this.dialogNode.contains(event.target)
-  ) {
-    if (this.isOpen()) {
-      this.close(false);
       event.stopPropagation();
       event.preventDefault();
     }
   }
-};
+
+  handleButtonClick(event) {
+    if (this.isOpen()) {
+      this.close();
+    } else {
+      this.open();
+      this.setFocusDay();
+    }
+
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+  handleBackgroundMouseUp(event) {
+    if (
+      !this.buttonNode.contains(event.target) &&
+      !this.dialogNode.contains(event.target)
+    ) {
+      if (this.isOpen()) {
+        this.close(false);
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    }
+  }
+}
 
 // Initialize menu button date picker
 
 window.addEventListener('load', function () {
-  var datePickers = document.querySelectorAll('.datepicker');
+  const datePickers = document.querySelectorAll('.datepicker');
 
   datePickers.forEach(function (dp) {
     new DatePickerDialog(dp);
diff --git a/test/tests/dialog-modal_datepicker.js b/test/tests/dialog-modal_datepicker.js
index 5953ce36e8..4964586ffe 100644
--- a/test/tests/dialog-modal_datepicker.js
+++ b/test/tests/dialog-modal_datepicker.js
@@ -45,6 +45,41 @@ const ex = {
   okButton: '#example [role="dialog"] button[value="ok"]',
 };
 
+const setDate = async function (t, day) {
+  const m = day.getMonth() + 1;
+  const d = day.getDate();
+  const y = day.getFullYear();
+
+  await (await t.context.queryElement(t, ex.inputSelector)).click();
+  return t.context.session.executeScript(
+    function () {
+      const inputSelector = arguments[0];
+      const month = arguments[1];
+      const day = arguments[2];
+      const year = arguments[3];
+      document.querySelector(inputSelector).value = `${month}/${day}/${year}`;
+    },
+    ex.inputSelector,
+    m,
+    d,
+    y
+  );
+};
+
+const checkDate = async function (t, dateSelector, day) {
+  const d = String(day.getDate()).padStart(2, '0');
+  const m =
+    day.getMonth() < 9 ? '0' + (day.getMonth() + 1) : day.getMonth() + 1;
+  const targetDate = `${day.getFullYear()}-${m}-${d}`;
+
+  t.is(
+    await t.context.session
+      .findElement(By.css(dateSelector))
+      .getAttribute('data-date'),
+    targetDate
+  );
+};
+
 const setDateToJanFirst2019 = async function (t) {
   await t.context.session.findElement(By.css(ex.inputSelector)).click();
   return t.context.session.executeScript(function () {
@@ -765,34 +800,36 @@ ariaTest(
   exampleFile,
   'grid-pageup',
   async (t) => {
-    await t.context.session.findElement(By.css(ex.buttonSelector)).click();
-    let day = new Date();
+    const startDate = '1/31/2023';
+    const targetDates = [
+      '12/31/2022',
+      '11/30/2022',
+      '10/31/2022',
+      '9/30/2022',
+      '8/31/2022',
+      '7/31/2022',
+      '6/30/2022',
+      '5/31/2022',
+      '4/30/2022',
+      '3/31/2022',
+      '2/28/2022',
+      '1/31/2022',
+    ];
+
+    let button = await t.context.queryElement(t, ex.buttonSelector);
+    let day = new Date(startDate);
+    await setDate(t, day);
+    await button.click();
+
+    for (let i = 0; i < targetDates.length; i += 1) {
+      day = new Date(targetDates[i]);
 
-    await t.context.session
-      .findElement(By.css(ex.currentlyFocusedDay))
-      .sendKeys(Key.PAGE_UP);
-    day.setMonth(day.getMonth() - 1);
-    t.is(
       await t.context.session
         .findElement(By.css(ex.currentlyFocusedDay))
-        .getAttribute('data-date'),
-      day.toISOString().split('T')[0],
-      'Sending PAGE UP should move focus back by month: ' +
-        day.toISOString().split('T')[0]
-    );
+        .sendKeys(Key.PAGE_UP);
 
-    await t.context.session
-      .findElement(By.css(ex.currentlyFocusedDay))
-      .sendKeys(Key.PAGE_UP);
-    day.setMonth(day.getMonth() - 1);
-    t.is(
-      await t.context.session
-        .findElement(By.css(ex.currentlyFocusedDay))
-        .getAttribute('data-date'),
-      day.toISOString().split('T')[0],
-      'Sending PAGE UP should move focus back by month, again:' +
-        day.toISOString().split('T')[0]
-    );
+      await checkDate(t, ex.currentlyFocusedDay, day);
+    }
   }
 );
 
@@ -801,34 +838,34 @@ ariaTest(
   exampleFile,
   'grid-shift-pageup',
   async (t) => {
-    await t.context.session.findElement(By.css(ex.buttonSelector)).click();
-    let day = new Date();
+    const startDate = '2/29/2024';
+    const targetDates = [
+      '2/28/2023',
+      '2/28/2022',
+      '2/28/2021',
+      '2/29/2020',
+      '2/28/2019',
+      '2/28/2018',
+      '2/28/2017',
+      '2/29/2016',
+      '2/28/2015',
+      '2/28/2014',
+    ];
+
+    let button = await t.context.queryElement(t, ex.buttonSelector);
+    let day = new Date(startDate);
+    await setDate(t, day);
+    await button.click();
+
+    for (let i = 0; i < targetDates.length; i += 1) {
+      day = new Date(targetDates[i]);
 
-    await t.context.session
-      .findElement(By.css(ex.currentlyFocusedDay))
-      .sendKeys(Key.chord(Key.SHIFT, Key.PAGE_UP));
-    day.setFullYear(day.getFullYear() - 1);
-    t.is(
       await t.context.session
         .findElement(By.css(ex.currentlyFocusedDay))
-        .getAttribute('data-date'),
-      day.toISOString().split('T')[0],
-      'Sending SHIFT+PAGE UP should move focus back by year: ' +
-        day.toISOString().split('T')[0]
-    );
+        .sendKeys(Key.chord(Key.SHIFT, Key.PAGE_UP));
 
-    await t.context.session
-      .findElement(By.css(ex.currentlyFocusedDay))
-      .sendKeys(Key.chord(Key.SHIFT, Key.PAGE_UP));
-    day.setFullYear(day.getFullYear() - 1);
-    t.is(
-      await t.context.session
-        .findElement(By.css(ex.currentlyFocusedDay))
-        .getAttribute('data-date'),
-      day.toISOString().split('T')[0],
-      'Sending SHIFT+PAGE UP should move focus back by year, again:' +
-        day.toISOString().split('T')[0]
-    );
+      await checkDate(t, ex.currentlyFocusedDay, day);
+    }
   }
 );
 
@@ -837,34 +874,36 @@ ariaTest(
   exampleFile,
   'grid-pagedown',
   async (t) => {
-    await t.context.session.findElement(By.css(ex.buttonSelector)).click();
-    let day = new Date();
+    const startDate = '1/31/2023';
+    const targetDates = [
+      '2/28/2023',
+      '3/31/2023',
+      '4/30/2023',
+      '5/31/2023',
+      '6/30/2023',
+      '7/31/2023',
+      '8/31/2023',
+      '9/30/2023',
+      '10/31/2023',
+      '11/30/2023',
+      '12/31/2023',
+      '1/31/2024',
+    ];
+
+    let button = await t.context.queryElement(t, ex.buttonSelector);
+    let day = new Date(startDate);
+    await setDate(t, day);
+    await button.click();
+
+    for (let i = 0; i < targetDates.length; i += 1) {
+      day = new Date(targetDates[i]);
 
-    await t.context.session
-      .findElement(By.css(ex.currentlyFocusedDay))
-      .sendKeys(Key.PAGE_DOWN);
-    day.setMonth(day.getMonth() + 1);
-    t.is(
       await t.context.session
         .findElement(By.css(ex.currentlyFocusedDay))
-        .getAttribute('data-date'),
-      day.toISOString().split('T')[0],
-      'Sending PAGE UP should move focus forward by month: ' +
-        day.toISOString().split('T')[0]
-    );
+        .sendKeys(Key.PAGE_DOWN);
 
-    await t.context.session
-      .findElement(By.css(ex.currentlyFocusedDay))
-      .sendKeys(Key.PAGE_DOWN);
-    day.setMonth(day.getMonth() + 1);
-    t.is(
-      await t.context.session
-        .findElement(By.css(ex.currentlyFocusedDay))
-        .getAttribute('data-date'),
-      day.toISOString().split('T')[0],
-      'Sending PAGE UP should move focus forward by month, again:' +
-        day.toISOString().split('T')[0]
-    );
+      await checkDate(t, ex.currentlyFocusedDay, day);
+    }
   }
 );
 
@@ -873,34 +912,30 @@ ariaTest(
   exampleFile,
   'grid-shift-pagedown',
   async (t) => {
-    await t.context.session.findElement(By.css(ex.buttonSelector)).click();
-    let day = new Date();
+    const startDate = '1/31/2023';
+    const targetDates = [
+      '1/31/2024',
+      '1/31/2025',
+      '1/31/2026',
+      '1/31/2027',
+      '1/31/2028',
+      '1/31/2029',
+    ];
+
+    let button = await t.context.queryElement(t, ex.buttonSelector);
+    let day = new Date(startDate);
+    await setDate(t, day);
+    await button.click();
+
+    for (let i = 0; i < targetDates.length; i += 1) {
+      day = new Date(targetDates[i]);
 
-    await t.context.session
-      .findElement(By.css(ex.currentlyFocusedDay))
-      .sendKeys(Key.chord(Key.SHIFT, Key.PAGE_DOWN));
-    day.setFullYear(day.getFullYear() + 1);
-    t.is(
       await t.context.session
         .findElement(By.css(ex.currentlyFocusedDay))
-        .getAttribute('data-date'),
-      day.toISOString().split('T')[0],
-      'Sending SHIFT+PAGE UP should move focus forward by year: ' +
-        day.toISOString().split('T')[0]
-    );
+        .sendKeys(Key.chord(Key.SHIFT, Key.PAGE_DOWN));
 
-    await t.context.session
-      .findElement(By.css(ex.currentlyFocusedDay))
-      .sendKeys(Key.chord(Key.SHIFT, Key.PAGE_DOWN));
-    day.setFullYear(day.getFullYear() + 1);
-    t.is(
-      await t.context.session
-        .findElement(By.css(ex.currentlyFocusedDay))
-        .getAttribute('data-date'),
-      day.toISOString().split('T')[0],
-      'Sending SHIFT+PAGE UP should move focus forward by year, again:' +
-        day.toISOString().split('T')[0]
-    );
+      await checkDate(t, ex.currentlyFocusedDay, day);
+    }
   }
 );