refactor(material/datepicker): rebased and resolved changes

Updates previous change to new datepicker changes.

Author: essjay05

src/material/datepicker/calendar-body.html

@@ -90,3 +90,9 @@
 <span [id]="_endDateLabelId" class="mat-calendar-body-hidden-label">
   {{endDateAccessibleName}}
 </span>
+<span [id]="_comparisonStartLabelId" class="mat-calendar-body-hidden-label">
+  Sub range {{startDateAccessibleName}}
+</span>
+<span [id]="_comparisonEndLabelId" class="mat-calendar-body-hidden-label">
+  Sub range {{endDateAccessibleName}}
+</span>

src/material/datepicker/calendar-body.ts

@@ -467,6 +467,16 @@ export class MatCalendarBody<D = any> implements OnChanges, OnDestroy, AfterView
     } else if (this.endValue === value) {
       return this._endDateLabelId;
     }
+
+    if (this.comparisonStart !== null && this.comparisonEnd !== null) {
+      if (value === this.comparisonStart && value === this.comparisonEnd) {
+        return `${this._comparisonStartLabelId}-${this._comparisonEndLabelId}`;
+      } else if (value === this.comparisonStart) {
+        return this._comparisonStartLabelId;
+      } else if (value === this.comparisonEnd) {
+        return this._comparisonEndLabelId;
+      }
+    }
     return null;
   }
 
@@ -607,6 +617,16 @@ export class MatCalendarBody<D = any> implements OnChanges, OnDestroy, AfterView
 
     return null;
   }
+
+  private _id = `mat-calendar-body-${calendarBodyId++}`;
+
+  _startDateLabelId = `${this._id}-start-date`;
+
+  _endDateLabelId = `${this._id}-end-date`;
+
+  _comparisonStartLabelId = `${this._id}-comparison-start-date`;
+
+  _comparisonEndLabelId = `${this._id}-comparison-end-date`;
 }
 
 /** Checks whether a node is a table cell element. */