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);
+    }
   }
 );