feat(datepicker): initial styling for date range (#18369)

Reworks a few things in the calendar and adds the styling for the date range. A couple of notes:
* This isn't the final UX of when start/end ranges will be selected. I wanted to have most of the functionality in place before playing around with the UX.
* This approach currently has an issue where the range won't go from one month into another properly. The problem is that the date cells store the current day internally. I'll make a follow-up PR that'll address the issue by storing the timestamp instead.

Author: crisbeto

src/material/core/datetime/date-selection-model.ts

@@ -149,9 +149,16 @@ export class MatRangeDateSelectionModel<D> extends MatDateSelectionModel<DateRan
       start = date;
     } else if (end == null) {
       end = date;
-    } else {
-      start = date;
-      end = null;
+    } else if (date) {
+      if (this.adapter.compareDate(date, start) <= 0) {
+        start = date;
+
+        if (end) {
+          end = null;
+        }
+      } else {
+        end = date;
+      }
     }
 
     super.updateSelection(new DateRange<D>(start, end), this);

src/material/datepicker/_datepicker-theme.scss

@@ -6,6 +6,7 @@
 
 $mat-datepicker-selected-today-box-shadow-width: 1px;
 $mat-datepicker-selected-fade-amount: 0.6;
+$mat-datepicker-range-fade-amount: 0.2;
 $mat-datepicker-today-fade-amount: 0.2;
 $mat-calendar-body-font-size: 13px !default;
 $mat-calendar-weekday-table-font-size: 11px !default;
@@ -16,6 +17,10 @@ $mat-calendar-weekday-table-font-size: 11px !default;
     color: mat-color($palette, default-contrast);
   }
 
+  .mat-calendar-body-in-range::before {
+    background-color: mat-color($palette, default, $mat-datepicker-range-fade-amount);
+  }
+
   .mat-calendar-body-disabled > .mat-calendar-body-selected {
     $background: mat-color($palette);
 

src/material/datepicker/calendar-body.html

@@ -32,18 +32,23 @@
       class="mat-calendar-body-cell"
       [ngClass]="item.cssClasses"
       [tabindex]="_isActiveCell(rowIndex, colIndex) ? 0 : -1"
+      [attr.data-mat-row]="rowIndex"
+      [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"
       [attr.aria-label]="item.ariaLabel"
       [attr.aria-disabled]="!item.enabled || null"
-      [attr.aria-selected]="selectedValue === item.value"
+      [attr.aria-selected]="_isSelected(item)"
       (click)="_cellClicked(item)"
       [style.width]="_cellWidth"
       [style.paddingTop]="_cellPadding"
       role="button"
       [style.paddingBottom]="_cellPadding">
       <div class="mat-calendar-body-cell-content"
-        [class.mat-calendar-body-selected]="selectedValue === item.value"
+        [class.mat-calendar-body-selected]="_isSelected(item)"
         [class.mat-calendar-body-today]="todayValue === item.value">
         {{item.displayValue}}
       </div>

src/material/datepicker/calendar-body.scss

@@ -9,6 +9,7 @@ $mat-calendar-body-label-side-padding: 33% / 7 !default;
 $mat-calendar-body-cell-min-size: 32px !default;
 $mat-calendar-body-cell-content-margin: 5% !default;
 $mat-calendar-body-cell-content-border-width: 1px !default;
+$mat-calendar-body-cell-radius: 999px !default;
 
 $mat-calendar-body-min-size: 7 * $mat-calendar-body-cell-min-size !default;
 $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-margin * 2 !default;
@@ -33,6 +34,20 @@ $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-mar
   text-align: center;
   outline: none;
   cursor: pointer;
+
+  // 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.
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
 }
 
 .mat-calendar-body-disabled {
@@ -59,13 +74,22 @@ $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-mar
   border-style: solid;
 
   // Choosing a value clearly larger than the height ensures we get the correct capsule shape.
-  border-radius: 999px;
+  border-radius: $mat-calendar-body-cell-radius;
 
   @include cdk-high-contrast(active, off) {
     border: none;
   }
 }
 
+.mat-calendar-body-range-start::before {
+  border-top-left-radius: $mat-calendar-body-cell-radius;
+  border-bottom-left-radius: $mat-calendar-body-cell-radius;
+}
+
+.mat-calendar-body-range-end::before {
+  border-top-right-radius: $mat-calendar-body-cell-radius;
+  border-bottom-right-radius: $mat-calendar-body-cell-radius;
+}
 
 @include cdk-high-contrast(active, off) {
   .mat-datepicker-popup:not(:empty),

src/material/datepicker/calendar-body.spec.ts

@@ -116,7 +116,8 @@ describe('MatCalendarBody', () => {
                     [label]="label"
                     [rows]="rows"
                     [todayValue]="todayValue"
-                    [selectedValue]="selectedValue"
+                    [startValue]="selectedValue"
+                    [endValue]="selectedValue"
                     [labelMinRequiredCells]="labelMinRequiredCells"
                     [numCols]="numCols"
                     [activeCell]="10"

src/material/datepicker/calendar-body.ts

@@ -17,6 +17,8 @@ import {
   NgZone,
   OnChanges,
   SimpleChanges,
+  OnDestroy,
+  ChangeDetectorRef,
 } from '@angular/core';
 import {take} from 'rxjs/operators';
 
@@ -55,7 +57,7 @@ export class MatCalendarCell {
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatCalendarBody implements OnChanges {
+export class MatCalendarBody implements OnChanges, OnDestroy {
   /** The label for the table. (e.g. "Jan 2017"). */
   @Input() label: string;
 
@@ -66,7 +68,11 @@ export class MatCalendarBody implements OnChanges {
   @Input() todayValue: number;
 
   /** The value in the table that is currently selected. */
-  @Input() selectedValue: number;
+  // @Input() selectedValue: number;
+
+  @Input() startValue: number;
+
+  @Input() endValue: number;
 
   /** The minimum number of free cells needed to fit the label in the first row. */
   @Input() labelMinRequiredCells: number;
@@ -95,14 +101,34 @@ export class MatCalendarBody implements OnChanges {
   /** Width of an individual cell. */
   _cellWidth: string;
 
-  constructor(private _elementRef: ElementRef<HTMLElement>, private _ngZone: NgZone) { }
+  _hoveredValue: number;
+
+  constructor(
+    private _elementRef: ElementRef<HTMLElement>,
+    private _changeDetectorRef: ChangeDetectorRef,
+    private _ngZone: NgZone) {
+
+    _ngZone.runOutsideAngular(() => {
+      const element = _elementRef.nativeElement;
+      element.addEventListener('mouseenter', this._enterHandler, true);
+      element.addEventListener('focus', this._enterHandler, true);
+      element.addEventListener('mouseleave', this._leaveHandler, true);
+      element.addEventListener('blur', this._leaveHandler, true);
+    });
+  }
 
+  /** Called when a cell is clicked. */
   _cellClicked(cell: MatCalendarCell): void {
     if (cell.enabled) {
       this.selectedValueChange.emit(cell.value);
     }
   }
 
+  /** Returns whether a cell should be marked as selected. */
+  _isSelected(cell: MatCalendarCell) {
+    return this.startValue === cell.value || this.endValue === cell.value;
+  }
+
   ngOnChanges(changes: SimpleChanges) {
     const columnChanges = changes['numCols'];
     const {rows, numCols} = this;
@@ -120,6 +146,15 @@ export class MatCalendarBody implements OnChanges {
     }
   }
 
+  ngOnDestroy() {
+    const element = this._elementRef.nativeElement;
+    element.removeEventListener('mouseenter', this._enterHandler, true);
+    element.removeEventListener('focus', this._enterHandler, true);
+    element.removeEventListener('mouseleave', this._leaveHandler, true);
+    element.removeEventListener('blur', this._leaveHandler, true);
+  }
+
+  /** Returns whether a cell is active. */
   _isActiveCell(rowIndex: number, colIndex: number): boolean {
     let cellNumber = rowIndex * this.numCols + colIndex;
 
@@ -144,4 +179,86 @@ export class MatCalendarBody implements OnChanges {
       });
     });
   }
+
+  /** Gets whether the calendar is currently selecting a range. */
+  _isRange(): boolean {
+    return this.startValue !== this.endValue;
+  }
+
+  /** Gets whether a value is within the currently-selected range. */
+  _isInRange(value: number): boolean {
+    if (!this._isRange() || value < this.startValue) {
+      return false;
+    }
+
+    return value <= this.endValue || value <= this._hoveredValue;
+  }
+
+  /**
+   * Event handler for when the user enters an element
+   * inside the calendar body (e.g. by hovering in or focus).
+   */
+  private _enterHandler = (event: Event) => {
+    // We only need to hit the zone when we're selecting a range, we
+    // have a start value without an end value and we've hovered over a date cell.
+    if (!event.target || !this._isRange() || !this.startValue || this.endValue) {
+      return;
+    }
+
+    const cell = this._getCellFromElement(event.target as HTMLElement);
+
+    if (cell) {
+      this._ngZone.run(() => {
+        this._hoveredValue = cell.value;
+        this._changeDetectorRef.markForCheck();
+      });
+    }
+  }
+
+  /**
+   * Event handler for when the user's pointer leaves an element
+   * inside the calendar body (e.g. by hovering out or blurring).
+   */
+  private _leaveHandler = (event: Event) => {
+    // We only need to hit the zone when we're selecting a range.
+    if (this._isRange() && this._hoveredValue !== -1) {
+      // Only reset the hovered value when leaving cells. This looks better, because
+      // we have a gap between the cells and the rows and we don't want to remove the
+      // range just for it to show up again when the user moves a few pixels to the side.
+      if (event.target && isTableCell(event.target as HTMLElement)) {
+        this._ngZone.run(() => {
+          this._hoveredValue = -1;
+          this._changeDetectorRef.markForCheck();
+        });
+      }
+    }
+  }
+
+  /** Finds the MatCalendarCell that corresponds to a DOM node. */
+  private _getCellFromElement(element: HTMLElement): MatCalendarCell | null {
+    let cell: HTMLElement | undefined;
+
+    if (isTableCell(element)) {
+      cell = element;
+    } else if (isTableCell(element.parentNode!)) {
+      cell = element.parentNode as HTMLElement;
+    }
+
+    if (cell) {
+      const row = cell.getAttribute('data-mat-row');
+      const col = cell.getAttribute('data-mat-col');
+
+      if (row && col) {
+        return this.rows[parseInt(row)][parseInt(col)];
+      }
+    }
+
+    return null;
+  }
+
+}
+
+/** Checks whether a node is a table cell element. */
+function isTableCell(node: Node): node is HTMLTableCellElement {
+  return node.nodeName === 'TD';
 }

src/material/datepicker/calendar.ts

@@ -31,6 +31,7 @@ import {
   MatDateFormats,
   MatDateSelectionModel,
   MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER,
+  DateRange,
 } from '@angular/material/core';
 import {Subject, Subscription} from 'rxjs';
 import {MatCalendarCellCssClasses} from './calendar-body';
@@ -217,10 +218,14 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
 
   /** The currently selected date. */
   @Input()
-  get selected(): D | null { return this._model.selection; }
-  set selected(value: D | null) {
-    const newValue = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
-    this._model.updateSelection(newValue, this);
+  get selected(): DateRange<D> | D | null { return this._model.selection; }
+  set selected(value: DateRange<D> | D | null) {
+    if (value instanceof DateRange) {
+      this._model.updateSelection(value, this);
+    } else {
+      const newValue = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+      this._model.updateSelection(newValue!, this);
+    }
   }
 
   /** The minimum selectable date. */
@@ -305,7 +310,7 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
               @Optional() private _dateAdapter: DateAdapter<D>,
               @Optional() @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats,
               private _changeDetectorRef: ChangeDetectorRef,
-              private _model: MatDateSelectionModel<D | null, D>) {
+              private _model: MatDateSelectionModel<DateRange<D> | D | null>) {
 
     if (!this._dateAdapter) {
       throw createMissingDateImplError('DateAdapter');
@@ -322,8 +327,10 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
 
     this._selectedChanges = _model.selectionChanged.subscribe(event => {
       // @breaking-change 11.0.0 Remove null check once `event.selection` is allowed to be null.
+      // Also remove non-null assertion for `selection`.
       if (event.selection) {
-        this.selectedChange.emit(event.selection);
+        const selection = this._model.selection;
+        this.selectedChange.emit(selection instanceof DateRange ? selection.start! : selection!);
       }
     });
   }

src/material/datepicker/datepicker-base.ts

@@ -130,10 +130,11 @@ export class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>>
   constructor(
     elementRef: ElementRef,
     /**
-     * @deprecated `_changeDetectorRef` parameter to become required.
+     * @deprecated `_changeDetectorRef` and `_model` parameters to become required.
      * @breaking-change 11.0.0
      */
-    private _changeDetectorRef?: ChangeDetectorRef) {
+    private _changeDetectorRef?: ChangeDetectorRef,
+    private _model?: MatDateSelectionModel<S, D>) {
     super(elementRef);
   }
 
@@ -145,6 +146,13 @@ export class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>>
     this._animationDone.complete();
   }
 
+  _handleUserSelection() {
+    // @breaking-change 11.0.0 Remove null check for _model.
+    if (!this._model || this._model.isComplete()) {
+      this.datepicker.close();
+    }
+  }
+
   _startExitAnimation() {
     this._animationState = 'void';
 

src/material/datepicker/datepicker-content.html

@@ -11,5 +11,5 @@
     [@fadeInCalendar]="'enter'"
     (yearSelected)="datepicker._selectYear($event)"
     (monthSelected)="datepicker._selectMonth($event)"
-    (_userSelection)="datepicker.close()">
+    (_userSelection)="_handleUserSelection()">
 </mat-calendar>

src/material/datepicker/month-view.html

@@ -9,7 +9,8 @@
          [label]="_monthLabel"
          [rows]="_weeks"
          [todayValue]="_todayDate!"
-         [selectedValue]="_selectedDate!"
+         [startValue]="_rangeStart!"
+         [endValue]="_rangeEnd!"
          [labelMinRequiredCells]="3"
          [activeCell]="_dateAdapter.getDate(activeDate) - 1"
          (selectedValueChange)="_dateSelected($event)"