@@ -464,6 +464,37 @@ const isDatesYearOutsideMinOrMax = (date, minDate, maxDate) =>
   lastDayOfMonth(setMonth(date, 11)) < minDate ||
   (maxDate && startOfMonth(setMonth(date, 0)) > maxDate);
 
+/**
+ * @typedef {Object} DateRangeContext
+ * @property {Date} rangeStartDate
+ * @property {Date} rangeEndDate
+ * @property {Date} withinRangeStartDate
+ * @property {Date} withinRangeEndDate
+ */
+
+/**
+ * Set the start, end, and within range values for date range variants.
+
+ * @param {Date} date - Date that concludes the date range.
+ * @param {Date} rangeDate - Range date data attribute value of the date picker component.
+ * @returns {DateRangeContext} - Dates for range selection.
+ */
+const setRangeDates = (date, rangeDate) => {
+  const rangeConclusionDate = date;
+  const rangeStartDate = rangeDate && min(rangeConclusionDate, rangeDate);
+  const rangeEndDate = rangeDate && max(rangeConclusionDate, rangeDate);
+
+  const withinRangeStartDate = rangeDate && addDays(rangeStartDate, 1);
+  const withinRangeEndDate = rangeDate && subDays(rangeEndDate, 1);
+
+  return {
+    rangeStartDate,
+    rangeEndDate,
+    withinRangeStartDate,
+    withinRangeEndDate,
+  };
+};
+
 /**
  * Parse a date with format M-D-YY
  *
@@ -951,12 +982,12 @@ const renderCalendar = (el, _dateToDisplay) => {
   const prevButtonsDisabled = isSameMonth(dateToDisplay, minDate);
   const nextButtonsDisabled = isSameMonth(dateToDisplay, maxDate);
 
-  const rangeConclusionDate = selectedDate || dateToDisplay;
-  const rangeStartDate = rangeDate && min(rangeConclusionDate, rangeDate);
-  const rangeEndDate = rangeDate && max(rangeConclusionDate, rangeDate);
-
-  const withinRangeStartDate = rangeDate && addDays(rangeStartDate, 1);
-  const withinRangeEndDate = rangeDate && subDays(rangeEndDate, 1);
+  const {
+    rangeStartDate,
+    rangeEndDate,
+    withinRangeStartDate,
+    withinRangeEndDate,
+  } = setRangeDates(selectedDate || dateToDisplay, rangeDate);
 
   const monthLabel = MONTH_LABELS[focusedMonth];
 
@@ -1785,24 +1816,43 @@ const handleShiftPageDownFromDate = adjustCalendar((date) => addYears(date, 1));
 const handleShiftPageUpFromDate = adjustCalendar((date) => subYears(date, 1));
 
 /**
- * display the calendar for the mouseover date.
+ * Set range date classes without re-rendering the calendar. Called when date button is hovered.
+ * Returns early if the date hovered is disabled or if there is already a selected date.
  *
- * @param {MouseEvent} event The mouseover event
- * @param {HTMLButtonElement} dateEl A date element within the date picker component
+ * @param {HTMLElement} dateEl - Calendar date button within the date picker component.
  */
+
 const handleMouseoverFromDate = (dateEl) => {
   if (dateEl.disabled) return;
 
-  const calendarEl = dateEl.closest(DATE_PICKER_CALENDAR);
+  const hoverDate = parseDateString(dateEl.dataset.value);
+  const { calendarEl, selectedDate, rangeDate } = getDatePickerContext(dateEl);
 
-  const currentCalendarDate = calendarEl.dataset.value;
-  const hoverDate = dateEl.dataset.value;
+  if (selectedDate) return;
 
-  if (hoverDate === currentCalendarDate) return;
+  const { withinRangeStartDate, withinRangeEndDate } = setRangeDates(
+    hoverDate,
+    rangeDate,
+  );
 
-  const dateToDisplay = parseDateString(hoverDate);
-  const newCalendar = renderCalendar(calendarEl, dateToDisplay);
-  newCalendar.querySelector(CALENDAR_DATE_FOCUSED).focus();
+  const dateButtons = calendarEl.querySelectorAll(
+    `.${CALENDAR_DATE_CURRENT_MONTH_CLASS}`,
+  );
+
+  dateButtons.forEach((button) => {
+    const buttonDate = parseDateString(button.dataset.value);
+    if (
+      isDateWithinMinAndMax(
+        buttonDate,
+        withinRangeStartDate,
+        withinRangeEndDate,
+      )
+    ) {
+      button.classList.add(CALENDAR_DATE_WITHIN_RANGE_CLASS);
+    } else {
+      button.classList.remove(CALENDAR_DATE_WITHIN_RANGE_CLASS);
+    }
+  });
 };
 
 // #endregion Calendar Date Event Handling
@@ -1896,22 +1946,6 @@ const handlePageDownFromMonth = adjustMonthSelectionScreen(() => 11);
  */
 const handlePageUpFromMonth = adjustMonthSelectionScreen(() => 0);
 
-/**
- * update the focus on a month when the mouse moves.
- *
- * @param {MouseEvent} event The mouseover event
- * @param {HTMLButtonElement} monthEl A month element within the date picker component
- */
-const handleMouseoverFromMonth = (monthEl) => {
-  if (monthEl.disabled) return;
-  if (monthEl.classList.contains(CALENDAR_MONTH_FOCUSED_CLASS)) return;
-
-  const focusMonth = parseInt(monthEl.dataset.value, 10);
-
-  const newCalendar = displayMonthSelection(monthEl, focusMonth);
-  newCalendar.querySelector(CALENDAR_MONTH_FOCUSED).focus();
-};
-
 // #endregion Calendar Month Event Handling
 
 // #region Calendar Year Event Handling
@@ -2007,22 +2041,6 @@ const handlePageDownFromYear = adjustYearSelectionScreen(
   (year) => year + YEAR_CHUNK,
 );
 
-/**
- * update the focus on a year when the mouse moves.
- *
- * @param {MouseEvent} event The mouseover event
- * @param {HTMLButtonElement} dateEl A year element within the date picker component
- */
-const handleMouseoverFromYear = (yearEl) => {
-  if (yearEl.disabled) return;
-  if (yearEl.classList.contains(CALENDAR_YEAR_FOCUSED_CLASS)) return;
-
-  const focusYear = parseInt(yearEl.dataset.value, 10);
-
-  const newCalendar = displayYearSelection(yearEl, focusYear);
-  newCalendar.querySelector(CALENDAR_YEAR_FOCUSED).focus();
-};
-
 // #endregion Calendar Year Event Handling
 
 // #region Focus Handling Event Handling
@@ -2230,12 +2248,6 @@ if (!isIosDevice()) {
     [CALENDAR_DATE_CURRENT_MONTH]() {
       handleMouseoverFromDate(this);
     },
-    [CALENDAR_MONTH]() {
-      handleMouseoverFromMonth(this);
-    },
-    [CALENDAR_YEAR]() {
-      handleMouseoverFromYear(this);
-    },
   };
 }
 
 
@@ -153,20 +153,5 @@ tests.forEach(({ name, selector: containerSelector }) => {
         "focuses correct month",
       );
     });
-
-    it("should update the focus when moving over a non-selected valid month", () => {
-      EVENTS.mouseover(
-        getCalendarEl().querySelector(
-          '.usa-date-picker__calendar__month[data-label="October"]',
-        ),
-      );
-
-      assert.strictEqual(
-        getCalendarEl(".usa-date-picker__calendar__month--focused").dataset
-          .label,
-        "October",
-        "focuses correct month",
-      );
-    });
   });
 });
@@ -64,32 +64,6 @@ tests.forEach(({ name, selector: containerSelector }) => {
       );
     });
 
-    it("should update the focus when moving over a non-selected valid day", () => {
-      root.dataset.minDate = "2020-06-01";
-      root.dataset.maxDate = "2020-06-24";
-      input.value = "6/20/2020";
-      EVENTS.click(button);
-      assert.strictEqual(
-        getCalendarEl(".usa-date-picker__calendar__date--focused").dataset
-          .value,
-        "2020-06-20",
-        "focuses correct date",
-      );
-
-      EVENTS.mouseover(
-        getCalendarEl().querySelector(
-          '.usa-date-picker__calendar__date[data-day="19"]',
-        ),
-      );
-
-      assert.strictEqual(
-        getCalendarEl(".usa-date-picker__calendar__date--focused").dataset
-          .value,
-        "2020-06-19",
-        "focuses correct date",
-      );
-    });
-
     it("should ignore mouse event on the same day", () => {
       root.dataset.minDate = "2020-06-01";
       root.dataset.maxDate = "2020-06-24";
 
@@ -151,20 +151,5 @@ tests.forEach(({ name, selector: containerSelector }) => {
         "focuses correct year",
       );
     });
-
-    it("should update the focus when moving over a non-selected valid year", () => {
-      EVENTS.mouseover(
-        getCalendarEl().querySelector(
-          '.usa-date-picker__calendar__year[data-value="2022"]',
-        ),
-      );
-
-      assert.strictEqual(
-        getCalendarEl(".usa-date-picker__calendar__year--focused").dataset
-          .value,
-        "2022",
-        "focuses correct year",
-      );
-    });
   });
 });