feat(datepicker): implement comparison and overlap ranges

Adds the ability to render a comparison range in the date range picker. When the comparison overlaps with the primary range, the overlapping dates are shown in a separate "overlap" range.

Author: crisbeto

src/dev-app/datepicker/BUILD.bazel

@@ -27,6 +27,9 @@ ng_module(
 sass_binary(
     name = "datepicker_demo_scss",
     src = "datepicker-demo.scss",
+    deps = [
+        "//src/material/datepicker:datepicker_scss_lib",
+    ],
 )
 
 sass_binary(

src/dev-app/datepicker/datepicker-demo.html

@@ -181,6 +181,8 @@ <h2>Range picker</h2>
       [min]="minDate"
       [max]="maxDate"
       [disabled]="inputDisabled"
+      [comparisonStart]="comparisonStart"
+      [comparisonEnd]="comparisonEnd"
       [dateFilter]="filterOdd ? dateFilter : undefined">
       <input matStartDate formControlName="start" placeholder="Start date"/>
       <input matEndDate formControlName="end" placeholder="End date"/>
@@ -203,6 +205,8 @@ <h2>Range picker</h2>
       [min]="minDate"
       [max]="maxDate"
       [disabled]="inputDisabled"
+      [comparisonStart]="comparisonStart"
+      [comparisonEnd]="comparisonEnd"
       [dateFilter]="filterOdd ? dateFilter : undefined">
       <input matStartDate formControlName="start" placeholder="Start date"/>
       <input matEndDate formControlName="end" placeholder="End date"/>
@@ -211,6 +215,7 @@ <h2>Range picker</h2>
     <mat-date-range-picker
       [touchUi]="touch"
       [disabled]="datepickerDisabled"
+      panelClass="demo-custom-range"
       #range2Picker></mat-date-range-picker>
   </mat-form-field>
   <div>{{range2.value | json}}</div>
@@ -225,6 +230,8 @@ <h2>Range picker</h2>
       [min]="minDate"
       [max]="maxDate"
       [disabled]="inputDisabled"
+      [comparisonStart]="comparisonStart"
+      [comparisonEnd]="comparisonEnd"
       [dateFilter]="filterOdd ? dateFilter : undefined">
       <input matStartDate formControlName="start" placeholder="Start date"/>
       <input matEndDate formControlName="end" placeholder="End date"/>

src/dev-app/datepicker/datepicker-demo.scss

@@ -1,7 +1,13 @@
+@import '../../material/datepicker/datepicker-theme';
+
 mat-calendar {
   width: 300px;
 }
 
 .demo-range-group {
   margin-bottom: 30px;
 }
+
+.demo-custom-range {
+  @include mat-datepicker-range-colors(hotpink, teal, yellow, purple);
+}

src/dev-app/datepicker/datepicker-demo.ts

@@ -13,7 +13,8 @@ import {
   Inject,
   OnDestroy,
   Optional,
-  ViewChild
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 import {FormControl, FormGroup} from '@angular/forms';
 import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats, ThemePalette} from '@angular/material/core';
@@ -30,6 +31,7 @@ import {takeUntil} from 'rxjs/operators';
   selector: 'datepicker-demo',
   templateUrl: 'datepicker-demo.html',
   styleUrls: ['datepicker-demo.css'],
+  encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DatepickerDemo {
@@ -50,6 +52,16 @@ export class DatepickerDemo {
   range1 = new FormGroup({start: new FormControl(), end: new FormControl()});
   range2 = new FormGroup({start: new FormControl(), end: new FormControl()});
   range3 = new FormGroup({start: new FormControl(), end: new FormControl()});
+  comparisonStart: Date;
+  comparisonEnd: Date;
+
+  constructor() {
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = today.getMonth();
+    this.comparisonStart = new Date(year, month, 9);
+    this.comparisonEnd = new Date(year, month, 13);
+  }
 
   dateFilter: (date: Date | null) => boolean =
     (date: Date | null) => {

src/material/datepicker/_datepicker-theme.scss

@@ -12,15 +12,14 @@ $mat-calendar-body-font-size: 13px !default;
 $mat-calendar-weekday-table-font-size: 11px !default;
 
 @mixin _mat-datepicker-color($palette) {
+  @include mat-datepicker-range-colors(
+    mat-color($palette, default, $mat-datepicker-range-fade-amount));
+
   .mat-calendar-body-selected {
     background-color: mat-color($palette);
     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);
 
@@ -167,3 +166,44 @@ $mat-calendar-weekday-table-font-size: 11px !default;
     }
   }
 }
+
+@mixin mat-datepicker-range-colors(
+  $range-color,
+  $comparison-color: rgba(#f9ab00, $mat-datepicker-range-fade-amount),
+  $overlap-color: #a8dab5,
+  $overlap-selected-color: darken($overlap-color, 30%)) {
+
+  // stylelint-disable max-line-length
+  .mat-calendar-body-in-range::before,
+  .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::before,
+
+  // Handles the case where a cell is the end of the comparison range and the start of the main
+  // range. Here we should use the main range color, rather than the overlap so that it transitions
+  // seamlessly into the main range.
+  .mat-calendar-body-comparison-end.mat-calendar-body-range-start:not(.mat-calendar-body-range-end)::after {
+    background: $range-color;
+  }
+  // stylelint-enable
+
+  .mat-calendar-body-in-comparison-range::before,
+  .mat-calendar-body-in-comparison-range.mat-calendar-body-range-start::before,
+  .mat-calendar-body-in-comparison-range.mat-calendar-body-range-end::before {
+    background: $comparison-color;
+  }
+
+  // When the user is hovering over the start of the comparison range while selecting the main
+  // range, we need to split the background so that one half shows the main range color and the
+  // other one shows the comparison. Since we only have one element to work with, we do it
+  // using a gradient.
+  .mat-calendar-body-comparison-start.mat-calendar-body-range-end::before {
+    background: linear-gradient(to right, $range-color 50%, $comparison-color 50%);
+  }
+
+  .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {
+    background: $overlap-color;
+  }
+
+  .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range > .mat-calendar-body-selected {
+    background: $overlap-selected-color;
+  }
+}

src/material/datepicker/calendar-body.html

@@ -36,9 +36,12 @@
       [attr.data-mat-col]="colIndex"
       [class.mat-calendar-body-disabled]="!item.enabled"
       [class.mat-calendar-body-active]="_isActiveCell(rowIndex, colIndex)"
+      [class.mat-calendar-body-range-start]="_isRangeStart(item.compareValue)"
+      [class.mat-calendar-body-range-end]="_isRangeEnd(item.compareValue)"
       [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"
+      [class.mat-calendar-body-comparison-start]="_isComparisonStart(item.compareValue)"
+      [class.mat-calendar-body-comparison-end]="_isComparisonEnd(item.compareValue)"
+      [class.mat-calendar-body-in-comparison-range]="_isInComparisonRange(item.compareValue)"
       [attr.aria-label]="item.ariaLabel"
       [attr.aria-disabled]="!item.enabled || null"
       [attr.aria-selected]="_isSelected(item)"

src/material/datepicker/calendar-body.scss

@@ -42,11 +42,12 @@ $mat-calendar-range-end-body-cell-size:
   // 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 {
+  &::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.
@@ -55,7 +56,11 @@ $mat-calendar-range-end-body-cell-size:
   }
 }
 
-.mat-calendar-body-range-start::before {
+.mat-calendar-body-range-start:not(.mat-calendar-body-in-comparison-range)::before,
+.mat-calendar-body-range-start.mat-calendar-body-comparison-start::before,
+.mat-calendar-body-range-start::after,
+.mat-calendar-body-comparison-start:not(.mat-calendar-body-in-range)::before,
+.mat-calendar-body-comparison-start::after {
   // Since the range background isn't a perfect circle, we need to size
   // and offset the start so that it aligns with the main circle.
   left: $mat-calendar-body-cell-content-margin;
@@ -71,7 +76,12 @@ $mat-calendar-range-end-body-cell-size:
   }
 }
 
-.mat-calendar-body-range-end::before {
+.mat-calendar-body-range-end:not(.mat-calendar-body-in-comparison-range)::before,
+.mat-calendar-body-range-end.mat-calendar-body-comparison-end::before,
+.mat-calendar-body-range-end::after,
+.mat-calendar-body-range-start.mat-calendar-body-comparison-end::before,
+.mat-calendar-body-comparison-end:not(.mat-calendar-body-in-range)::before,
+.mat-calendar-body-comparison-end:not(.mat-calendar-body-range-start)::after {
   // Since the range background isn't a perfect circle, we need to
   // resize the end so that it aligns with the main circle.
   width: $mat-calendar-range-end-body-cell-size;
@@ -94,6 +104,7 @@ $mat-calendar-range-end-body-cell-size:
   position: absolute;
   top: $mat-calendar-body-cell-content-margin;
   left: $mat-calendar-body-cell-content-margin;
+  z-index: 1;
 
   display: flex;
   align-items: center;

src/material/datepicker/calendar-body.ts

@@ -89,6 +89,12 @@ export class MatCalendarBody implements OnChanges, OnDestroy {
    */
   @Input() cellAspectRatio: number = 1;
 
+  /** Start of the comparison range. */
+  @Input() comparisonStart: number | null;
+
+  /** End of the comparison range. */
+  @Input() comparisonEnd: number | null;
+
   /** Emits when a new value is selected. */
   @Output() readonly selectedValueChange: EventEmitter<number> = new EventEmitter<number>();
 
@@ -105,7 +111,7 @@ export class MatCalendarBody implements OnChanges, OnDestroy {
    * Value that the user is either currently hovering over or is focusing
    * using the keyboard. Only applies when selecting the end of a date range.
    */
-  _hoveredValue: number;
+  _hoveredValue = -1;
 
   constructor(
     private _elementRef: ElementRef<HTMLElement>,
@@ -149,8 +155,9 @@ export class MatCalendarBody implements OnChanges, OnDestroy {
       this._cellWidth = `${100 / numCols}%`;
     }
 
-    if (changes['startValue'] || changes['endValue']) {
-      this._hoveredValue = -1;
+    const valueChange = changes['startValue'] || changes['endValue'];
+    if (valueChange && !valueChange.firstChange) {
+      this._hoveredValue = this.startValue || -1;
     }
   }
 
@@ -189,17 +196,41 @@ export class MatCalendarBody implements OnChanges, OnDestroy {
   }
 
   /** Gets whether the calendar is currently selecting a range. */
-  _isRange(): boolean {
+  _isSelectingRange(): boolean {
     return this.startValue !== this.endValue;
   }
 
+  /** Gets whether a value is the start of the main range. */
+  _isRangeStart(value: number) {
+    return value === this.startValue;
+  }
+
+  /** Gets whether a value is the end of the main range. */
+  _isRangeEnd(value: number) {
+    return value === this.endValue || (value === this._hoveredValue && value >= this.startValue);
+  }
+
   /** Gets whether a value is within the currently-selected range. */
   _isInRange(value: number): boolean {
-    if (!this._isRange() || value < this.startValue) {
-      return false;
-    }
+    return this._isSelectingRange() && value >= this.startValue &&
+           (value <= this.endValue || value <= this._hoveredValue);
+  }
 
-    return value <= this.endValue || value <= this._hoveredValue;
+  /** Gets whether a value is the start of the comparison range. */
+  _isComparisonStart(value: number) {
+    return value === this.comparisonStart;
+  }
+
+  /** Gets whether a value is the end of the comparison range. */
+  _isComparisonEnd(value: number) {
+    return value === this.comparisonEnd;
+  }
+
+  /** Gets whether a value is within the current comparison range. */
+  _isInComparisonRange(value: number) {
+    return this.comparisonStart && this.comparisonEnd &&
+           value >= this.comparisonStart &&
+           value <= this.comparisonEnd;
   }
 
   /**
@@ -209,18 +240,20 @@ export class MatCalendarBody implements OnChanges, OnDestroy {
   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.startValue || this.endValue || !this._isRange()) {
+    if (!event.target || !this.startValue || this.endValue || !this._isSelectingRange()) {
       return;
     }
 
     const cell = this._getCellFromElement(event.target as HTMLElement);
 
     if (cell) {
-      this._ngZone.run(() => {
-        this._hoveredValue =
-            cell.enabled && cell.compareValue !== this.startValue ? cell.compareValue : -1;
-        this._changeDetectorRef.markForCheck();
-      });
+      const value = cell.compareValue;
+      const hoveredValue = cell.enabled ? value : -1;
+
+      if (hoveredValue !== this._hoveredValue) {
+        this._hoveredValue = hoveredValue;
+        this._ngZone.run(() => this._changeDetectorRef.markForCheck());
+      }
     }
   }
 
@@ -230,7 +263,7 @@ export class MatCalendarBody implements OnChanges, OnDestroy {
    */
   private _leaveHandler = (event: Event) => {
     // We only need to hit the zone when we're selecting a range.
-    if (this._hoveredValue !== -1 && this._isRange()) {
+    if (this._hoveredValue !== -1 && this._isSelectingRange()) {
       // 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.

src/material/datepicker/calendar.html

@@ -1,4 +1,3 @@
-
 <ng-template [cdkPortalOutlet]="_calendarHeaderPortal"></ng-template>
 
 <div class="mat-calendar-content" [ngSwitch]="currentView" cdkMonitorSubtreeFocus tabindex="-1">
@@ -10,6 +9,8 @@
       [maxDate]="maxDate"
       [minDate]="minDate"
       [dateClass]="dateClass"
+      [comparisonStart]="comparisonStart"
+      [comparisonEnd]="comparisonEnd"
       (selectedChange)="_dateSelected($event)"
       (_userSelection)="_userSelected()">
   </mat-month-view>

src/material/datepicker/calendar.ts

@@ -250,6 +250,12 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
   /** Function that can be used to add custom CSS classes to dates. */
   @Input() dateClass: (date: D) => MatCalendarCellCssClasses;
 
+  /** Start of the comparison range. */
+  @Input() comparisonStart: D | null;
+
+  /** End of the comparison range. */
+  @Input() comparisonEnd: D | null;
+
   /**
    * Emits when the currently selected date changes.
    * @breaking-change 11.0.0 Emitted value to change to `D | null`.

src/material/datepicker/date-range-input.ts

@@ -184,6 +184,12 @@ export class MatDateRangeInput<D> implements MatFormFieldControl<DateRange<D>>,
   /** Separator text to be shown between the inputs. */
   @Input() separator = '–';
 
+  /** Start of the comparison range that should be shown in the calendar. */
+  @Input() comparisonStart: D | null = null;
+
+  /** End of the comparison range that should be shown in the calendar. */
+  @Input() comparisonEnd: D | null = null;
+
   @ContentChild(MatStartDate) _startInput: MatStartDate<D>;
   @ContentChild(MatEndDate) _endInput: MatEndDate<D>;