fix(datepicker): resolve visual inconsistencies with comparison ranges (#18819)

Fixes some extra circles showing up when they're not supposed to when hovering over the start of the range or when the starts/ends of ranges are the same. Also clears out a few selectors that aren't necessary anymore.

Author: crisbeto

src/material/datepicker/calendar-body.scss

@@ -38,24 +38,24 @@ $mat-calendar-range-end-body-cell-size:
   cursor: pointer;
 }
 
-.mat-calendar-body-cell::before,
-.mat-calendar-body-cell::after,
-.mat-calendar-body-comparison-bridge-start::before {
+.mat-calendar-body-cell {
   // We use ::before to apply a background to the body cell, because we need to apply a border
   // radius to the start/end which means that part of the element will be cut off, making
   // hovering through all the cells look glitchy. We can't do it on the cell itself, because
   // it's the one that has the event listener and it can't be on the cell content, because
   // it always has a border radius.
-  content: '';
-  position: absolute;
-  top: $mat-calendar-body-cell-content-margin;
-  left: 0;
-  z-index: 0;
+  &::before, &::after {
+    content: '';
+    position: absolute;
+    top: $mat-calendar-body-cell-content-margin;
+    left: 0;
+    z-index: 0;
 
-  // We want the range background to be slightly shorter than the cell so
-  // that there's a gap when the range goes across multiple rows.
-  height: $mat-calendar-body-cell-content-size;
-  width: 100%;
+    // We want the range background to be slightly shorter than the cell so
+    // that there's a gap when the range goes across multiple rows.
+    height: $mat-calendar-body-cell-content-size;
+    width: 100%;
+  }
 }
 
 .mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,
@@ -99,15 +99,24 @@ $mat-calendar-range-end-body-cell-size:
   }
 }
 
+// Styles necessary to make RTL work.
 [dir='rtl'] {
   .mat-calendar-body-comparison-bridge-start.mat-calendar-body-range-end::after,
-  .mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start::after,
-  .mat-calendar-body-range-start.mat-calendar-body-range-end::before,
-  .mat-calendar-body-range-start.mat-calendar-body-range-end::after {
+  .mat-calendar-body-comparison-bridge-end.mat-calendar-body-range-start::after {
     @include _mat-calendar-body-range-right-radius;
   }
 }
 
+// Prevents the extra overlap range indication from showing up when it's not supposed to.
+.mat-calendar-body-comparison-start.mat-calendar-body-range-end::after,
+.mat-calendar-body-comparison-end.mat-calendar-body-range-start::after {
+  // Note that the RTL selector here is redundant, but we need to keep it in order to
+  // raise the specificity since it can be overridden by some of the styles from above.
+  &, [dir='rtl'] & {
+    width: $mat-calendar-body-cell-content-size;
+  }
+}
+
 .mat-calendar-body-disabled {
   cursor: default;
 }

src/material/datepicker/calendar-body.ts

@@ -279,7 +279,9 @@ export class MatCalendarBody implements OnChanges, OnDestroy {
 
     if (cell) {
       const value = cell.compareValue;
-      const hoveredValue = cell.enabled ? value : -1;
+
+      // Only set as the hovered value if we're after the start of the range.
+      const hoveredValue = (cell.enabled && value > this.startValue) ? value : -1;
 
       if (hoveredValue !== this._hoveredValue) {
         this._hoveredValue = hoveredValue;