fix(datepicker): handle date ranges across multiple months (#18404)

Currently we don't handle date ranges across months, because we store the date cell's value as the date in the current month. These changes add another value that will be used comparisons and which is based on the time since epoch.

Author: crisbeto

src/material/datepicker/calendar-body.html

@@ -36,9 +36,9 @@
       [attr.data-mat-col]="colIndex"
       [class.mat-calendar-body-disabled]="!item.enabled"
       [class.mat-calendar-body-active]="_isActiveCell(rowIndex, colIndex)"
-      [class.mat-calendar-body-in-range]="_isInRange(item.value)"
-      [class.mat-calendar-body-range-start]="item.value === startValue"
-      [class.mat-calendar-body-range-end]="item.value === endValue || item.value === _hoveredValue"
+      [class.mat-calendar-body-in-range]="_isInRange(item.compareValue)"
+      [class.mat-calendar-body-range-start]="item.compareValue === startValue"
+      [class.mat-calendar-body-range-end]="item.compareValue === endValue || item.compareValue === _hoveredValue"
       [attr.aria-label]="item.ariaLabel"
       [attr.aria-disabled]="!item.enabled || null"
       [attr.aria-selected]="_isSelected(item)"
@@ -49,7 +49,7 @@
       [style.paddingBottom]="_cellPadding">
       <div class="mat-calendar-body-cell-content"
         [class.mat-calendar-body-selected]="_isSelected(item)"
-        [class.mat-calendar-body-today]="todayValue === item.value">
+        [class.mat-calendar-body-today]="todayValue === item.compareValue">
         {{item.displayValue}}
       </div>
   </td>

src/material/datepicker/calendar-body.ts

@@ -36,7 +36,8 @@ export class MatCalendarCell {
               public displayValue: string,
               public ariaLabel: string,
               public enabled: boolean,
-              public cssClasses: MatCalendarCellCssClasses = {}) {}
+              public cssClasses: MatCalendarCellCssClasses = {},
+              public compareValue = value) {}
 }
 
 
@@ -67,11 +68,10 @@ export class MatCalendarBody implements OnChanges, OnDestroy {
   /** The value in the table that corresponds to today. */
   @Input() todayValue: number;
 
-  /** The value in the table that is currently selected. */
-  // @Input() selectedValue: number;
-
+  /** Start value of the selected date range. */
   @Input() startValue: number;
 
+  /** End value of the selected date range. */
   @Input() endValue: number;
 
   /** The minimum number of free cells needed to fit the label in the first row. */
@@ -126,7 +126,7 @@ export class MatCalendarBody implements OnChanges, OnDestroy {
 
   /** Returns whether a cell should be marked as selected. */
   _isSelected(cell: MatCalendarCell) {
-    return this.startValue === cell.value || this.endValue === cell.value;
+    return this.startValue === cell.compareValue || this.endValue === cell.compareValue;
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -209,7 +209,7 @@ export class MatCalendarBody implements OnChanges, OnDestroy {
 
     if (cell) {
       this._ngZone.run(() => {
-        this._hoveredValue = cell.value;
+        this._hoveredValue = cell.compareValue;
         this._changeDetectorRef.markForCheck();
       });
     }

src/material/datepicker/month-view.ts

@@ -168,7 +168,17 @@ export class MatMonthView<D> implements AfterContentInit, OnDestroy {
 
   /** Handles when a new date is selected. */
   _dateSelected(date: number) {
-    if (this._rangeStart !== date || this._rangeEnd !== date) {
+    let rangeStartDate: number | null;
+    let rangeEndDate: number | null;
+
+    if (this._selected instanceof DateRange) {
+      rangeStartDate = this._getDateInCurrentMonth(this._selected.start);
+      rangeEndDate = this._getDateInCurrentMonth(this._selected.end);
+    } else {
+      rangeStartDate = rangeEndDate = this._getDateInCurrentMonth(this._selected);
+    }
+
+    if (rangeStartDate !== date || rangeEndDate !== date) {
       const selectedYear = this._dateAdapter.getYear(this.activeDate);
       const selectedMonth = this._dateAdapter.getMonth(this.activeDate);
       const selectedDate = this._dateAdapter.createDate(selectedYear, selectedMonth, date);
@@ -246,7 +256,7 @@ export class MatMonthView<D> implements AfterContentInit, OnDestroy {
   /** Initializes this month view. */
   _init() {
     this._setRange(this.selected);
-    this._todayDate = this._getDateInCurrentMonth(this._dateAdapter.today());
+    this._todayDate = this._getCellCompareValue(this._dateAdapter.today());
     this._monthLabel =
         this._dateAdapter.getMonthNames('short')[this._dateAdapter.getMonth(this.activeDate)]
             .toLocaleUpperCase();
@@ -297,8 +307,8 @@ export class MatMonthView<D> implements AfterContentInit, OnDestroy {
       const ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);
       const cellClasses = this.dateClass ? this.dateClass(date) : undefined;
 
-      this._weeks[this._weeks.length - 1]
-          .push(new MatCalendarCell(i + 1, dateNames[i], ariaLabel, enabled, cellClasses));
+      this._weeks[this._weeks.length - 1].push(new MatCalendarCell(i + 1, dateNames[i], ariaLabel,
+          enabled, cellClasses, this._getCellCompareValue(date)!));
     }
   }
 
@@ -325,6 +335,20 @@ export class MatMonthView<D> implements AfterContentInit, OnDestroy {
               this._dateAdapter.getYear(d1) == this._dateAdapter.getYear(d2));
   }
 
+  /** Gets the value that will be used to one cell to another. */
+  private _getCellCompareValue(date: D | null): number | null {
+    if (date) {
+      // We use the time since the Unix epoch to compare dates in this view, rather than the
+      // cell values, because we need to support ranges that span across multiple months/years.
+      const year = this._dateAdapter.getYear(date);
+      const month = this._dateAdapter.getMonth(date);
+      const day = this._dateAdapter.getDate(date);
+      return new Date(year, month, day).getTime();
+    }
+
+    return null;
+  }
+
   /**
    * @param obj The object to check.
    * @returns The given object if it is both a date instance and valid, otherwise null.
@@ -341,10 +365,10 @@ export class MatMonthView<D> implements AfterContentInit, OnDestroy {
   /** Sets the current range based on a model value. */
   private _setRange(value: DateRange<D> | D | null) {
     if (value instanceof DateRange) {
-      this._rangeStart = this._getDateInCurrentMonth(value.start);
-      this._rangeEnd = this._getDateInCurrentMonth(value.end);
+      this._rangeStart = this._getCellCompareValue(value.start);
+      this._rangeEnd = this._getCellCompareValue(value.end);
     } else {
-      this._rangeStart = this._rangeEnd = this._getDateInCurrentMonth(value);
+      this._rangeStart = this._rangeEnd = this._getCellCompareValue(value);
     }
   }
 }

tools/public_api_guard/material/datepicker.d.ts

@@ -86,11 +86,12 @@ export declare class MatCalendarBody implements OnChanges, OnDestroy {
 
 export declare class MatCalendarCell {
     ariaLabel: string;
+    compareValue: number;
     cssClasses: MatCalendarCellCssClasses;
     displayValue: string;
     enabled: boolean;
     value: number;
-    constructor(value: number, displayValue: string, ariaLabel: string, enabled: boolean, cssClasses?: MatCalendarCellCssClasses);
+    constructor(value: number, displayValue: string, ariaLabel: string, enabled: boolean, cssClasses?: MatCalendarCellCssClasses, compareValue?: number);
 }
 
 export declare type MatCalendarCellCssClasses = string | string[] | Set<string> | {