fix(datepicker): handle date ranges across multiple months

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> | {