feat(material/datepicker): Support drag and drop to adjust date ranges

Author: kseamon

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

@@ -2,7 +2,7 @@ import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
 import {Component} from '@angular/core';
 import {MatCalendarBody, MatCalendarCell, MatCalendarUserEvent} from './calendar-body';
 import {By} from '@angular/platform-browser';
-import {dispatchMouseEvent, dispatchFakeEvent} from '../../cdk/testing/private';
+import {dispatchMouseEvent, dispatchFakeEvent, dispatchTouchEvent} from '../../cdk/testing/private';
 
 describe('MatCalendarBody', () => {
   beforeEach(waitForAsync(() => {
@@ -630,6 +630,53 @@ describe('MatCalendarBody', () => {
         }),
       ).toBe(false);
     });
+
+    describe('drag and drop ranges', () => {
+      beforeEach(() => {
+        // Pre-select a range to drag.
+        fixture.componentInstance.startValue = 4;
+        fixture.componentInstance.endValue = 6;
+        fixture.detectChanges();
+      });
+
+      it('triggers and previews a drag (mouse)', () => {
+        dispatchMouseEvent(cells[3], 'mousedown');
+        fixture.detectChanges();
+        expect(fixture.componentInstance.drag).not.toBe(null);
+
+        // Expand to earlier.
+        dispatchMouseEvent(cells[2], 'mouseenter');
+        fixture.detectChanges();
+        expect(cells[2].classList).toContain(previewStartClass);
+        expect(cells[3].classList).toContain(inPreviewClass);
+        expect(cells[4].classList).toContain(inPreviewClass);
+        expect(cells[5].classList).toContain(previewEndClass);
+
+        // End drag.
+        dispatchMouseEvent(cells[2], 'mouseup');
+        expect(fixture.componentInstance.drag).toBe(null);
+      });
+
+      it('triggers and previews a drag (touch)', () => {
+        dispatchTouchEvent(cells[3], 'touchstart');
+        fixture.detectChanges();
+        expect(fixture.componentInstance.drag).not.toBe(null);
+
+        // Expand to earlier.
+        const rect = cells[2].getBoundingClientRect();
+
+        dispatchTouchEvent(cells[2], 'touchmove', rect.left, rect.top, rect.left, rect.top);
+        fixture.detectChanges();
+        expect(cells[2].classList).toContain(previewStartClass);
+        expect(cells[3].classList).toContain(inPreviewClass);
+        expect(cells[4].classList).toContain(inPreviewClass);
+        expect(cells[5].classList).toContain(previewEndClass);
+
+        // End drag.
+        dispatchTouchEvent(cells[2], 'touchend', rect.left, rect.top, rect.left, rect.top);
+        expect(fixture.componentInstance.drag).toBe(null);
+      });
+    });
   });
 });
 
@@ -672,7 +719,10 @@ class StandardCalendarBody {
           [previewStart]="previewStart"
           [previewEnd]="previewEnd"
           (selectedValueChange)="onSelect($event)"
-          (previewChange)="previewChanged($event)">
+          (previewChange)="previewChanged($event)"
+          (dragStarted)="dragStarted($event)"
+          (dragEnded)="dragEnded($event)"
+          >
     </table>`,
 })
 class RangeCalendarBody {
@@ -683,6 +733,7 @@ class RangeCalendarBody {
   comparisonEnd: number | null;
   previewStart: number | null;
   previewEnd: number | null;
+  drag: MatCalendarUserEvent<unknown> | null = null;
 
   onSelect(event: MatCalendarUserEvent<number>) {
     const value = event.value;
@@ -699,6 +750,20 @@ class RangeCalendarBody {
   previewChanged(event: MatCalendarUserEvent<MatCalendarCell<Date> | null>) {
     this.previewStart = this.startValue;
     this.previewEnd = event.value?.compareValue || null;
+
+    if (this.drag) {
+      // For sake of testing, hardcode a preview for drags.
+      this.previewStart = this.startValue! - 1;
+      this.previewEnd = this.endValue;
+    }
+  }
+
+  dragStarted(event: MatCalendarUserEvent<unknown>) {
+    this.drag = event;
+  }
+
+  dragEnded(event: MatCalendarUserEvent<unknown>) {
+    this.drag = null;
   }
 }
 
@@ -728,6 +793,8 @@ function createCalendarCells(weeks: number): MatCalendarCell[][] {
         `${cell}-label`,
         true,
         cell % 2 === 0 ? 'even' : undefined,
+        cell,
+        cell,
       );
     }),
   );

src/material/datepicker/calendar-body.ts

@@ -70,7 +70,7 @@ let calendarBodyId = 1;
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
+export class MatCalendarBody<D = any> implements OnChanges, OnDestroy, AfterViewChecked {
   /**
    * Used to skip the next focus event when rendering the preview range.
    * We need a flag like this, because some browsers fire focus events asynchronously.
@@ -150,6 +150,12 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
 
   @Output() readonly activeDateChange = new EventEmitter<MatCalendarUserEvent<number>>();
 
+  /** Emits the date at the possible start of a drag event. */
+  @Output() readonly dragStarted = new EventEmitter<MatCalendarUserEvent<D>>();
+
+  /** Emits the date at the conclusion of a drag, or null if mouse was not released on a date. */
+  @Output() readonly dragEnded = new EventEmitter<MatCalendarUserEvent<D | null>>();
+
   /** The number of blank cells to put at the beginning for the first row. */
   _firstRowOffset: number;
 
@@ -159,18 +165,31 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
   /** Width of an individual cell. */
   _cellWidth: string;
 
+  private _didDragSinceMouseDown = false;
+
   constructor(private _elementRef: ElementRef<HTMLElement>, private _ngZone: NgZone) {
     _ngZone.runOutsideAngular(() => {
       const element = _elementRef.nativeElement;
       element.addEventListener('mouseenter', this._enterHandler, true);
+      element.addEventListener('touchmove', this._touchmoveHandler, true);
       element.addEventListener('focus', this._enterHandler, true);
       element.addEventListener('mouseleave', this._leaveHandler, true);
       element.addEventListener('blur', this._leaveHandler, true);
+      element.addEventListener('mousedown', this._mousedownHandler);
+      element.addEventListener('touchstart', this._mousedownHandler);
+      window.addEventListener('mouseup', this._mouseupHandler);
+      window.addEventListener('touchend', this._touchendHandler);
     });
   }
 
   /** Called when a cell is clicked. */
   _cellClicked(cell: MatCalendarCell, event: MouseEvent): void {
+    // Ignore "clicks" that are actually canceled drags (eg the user dragged
+    // off and then went back to this cell to undo).
+    if (this._didDragSinceMouseDown) {
+      return;
+    }
+
     if (cell.enabled) {
       this.selectedValueChange.emit({value: cell.value, event});
     }
@@ -207,9 +226,14 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
   ngOnDestroy() {
     const element = this._elementRef.nativeElement;
     element.removeEventListener('mouseenter', this._enterHandler, true);
+    element.removeEventListener('touchmove', this._touchmoveHandler, true);
     element.removeEventListener('focus', this._enterHandler, true);
     element.removeEventListener('mouseleave', this._leaveHandler, true);
     element.removeEventListener('blur', this._leaveHandler, true);
+    element.removeEventListener('mousedown', this._mousedownHandler);
+    element.removeEventListener('touchstart', this._mousedownHandler);
+    window.removeEventListener('mouseup', this._mouseupHandler);
+    window.removeEventListener('touchend', this._touchendHandler);
   }
 
   /** Returns whether a cell is active. */
@@ -400,13 +424,28 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
     }
   };
 
+  private _touchmoveHandler = (event: TouchEvent) => {
+    const target = getActualTouchTarget(event);
+    const cell = target ? this._getCellFromElement(target as HTMLElement) : null;
+
+    if (target !== event.target) {
+      this._didDragSinceMouseDown = true;
+    }
+
+    this._ngZone.run(() => this.previewChange.emit({value: cell?.enabled ? cell : null, event}));
+  };
+
   /**
    * 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.previewEnd !== null && this.isRange) {
+      if (event.type !== 'blur') {
+        this._didDragSinceMouseDown = true;
+      }
+
       // Only reset the preview end 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.
@@ -416,15 +455,61 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
     }
   };
 
-  /** Finds the MatCalendarCell that corresponds to a DOM node. */
-  private _getCellFromElement(element: HTMLElement): MatCalendarCell | null {
-    let cell: HTMLElement | undefined;
+  /**
+   * Triggered on mousedown or touchstart on a date cell.
+   * Respsonsible for starting a drag sequence.
+   */
+  private _mousedownHandler = (event: Event) => {
+    this._didDragSinceMouseDown = false;
+    // Begin a drag if a cell within the current range was targeted.
+    const cell = event.target && this._getCellFromElement(event.target as HTMLElement);
+    if (!cell || !this._isInRange(cell.rawValue)) {
+      return;
+    }
+
+    this._ngZone.run(() => {
+      this.dragStarted.emit({
+        value: cell.rawValue,
+        event,
+      });
+    });
+  };
+
+  /** Triggered on mouseup anywhere. Respsonsible for ending a drag sequence. */
+  private _mouseupHandler = (event: Event) => {
+    const cellElement = getCellElement(event.target as HTMLElement);
+    if (!cellElement) {
+      // Mouseup happened outside of datepicker. Cancel drag.
+      this._ngZone.run(() => {
+        this.dragEnded.emit({value: null, event});
+      });
+      return;
+    }
+
+    if (cellElement.closest('.mat-calendar-body') !== this._elementRef.nativeElement) {
+      // Mouseup happened inside a different month instance.
+      // Allow it to handle the event.
+      return;
+    }
 
-    if (isTableCell(element)) {
-      cell = element;
-    } else if (isTableCell(element.parentNode!)) {
-      cell = element.parentNode as HTMLElement;
+    this._ngZone.run(() => {
+      const cell = this._getCellFromElement(cellElement);
+      this.dragEnded.emit({value: cell?.rawValue ?? null, event});
+    });
+  };
+
+  /** Triggered on touchend anywhere. Respsonsible for ending a drag sequence. */
+  private _touchendHandler = (event: TouchEvent) => {
+    const target = getActualTouchTarget(event);
+
+    if (target) {
+      this._mouseupHandler({target} as unknown as Event);
     }
+  };
+
+  /** Finds the MatCalendarCell that corresponds to a DOM node. */
+  private _getCellFromElement(element: HTMLElement): MatCalendarCell | null {
+    const cell = getCellElement(element);
 
     if (cell) {
       const row = cell.getAttribute('data-mat-row');
@@ -446,8 +531,25 @@ export class MatCalendarBody implements OnChanges, OnDestroy, AfterViewChecked {
 }
 
 /** Checks whether a node is a table cell element. */
-function isTableCell(node: Node): node is HTMLTableCellElement {
-  return node.nodeName === 'TD';
+function isTableCell(node: Node | undefined | null): node is HTMLTableCellElement {
+  return node?.nodeName === 'TD';
+}
+
+/**
+ * Gets the date table cell element that is or contains the specified element.
+ * Or returns null if element is not part of a date cell.
+ */
+function getCellElement(element: HTMLElement): HTMLElement | null {
+  let cell: HTMLElement | undefined;
+  if (isTableCell(element)) {
+    cell = element;
+  } else if (isTableCell(element.parentNode)) {
+    cell = element.parentNode as HTMLElement;
+  } else if (isTableCell(element.parentNode?.parentNode)) {
+    cell = element.parentNode!.parentNode as HTMLElement;
+  }
+
+  return cell?.getAttribute('data-mat-row') != null ? cell : null;
 }
 
 /** Checks whether a value is the start of a range. */
@@ -476,3 +578,12 @@ function isInRange(
     value <= end
   );
 }
+
+/**
+ * Extracts the element that actually corresponds to a touch event's location
+ * (rather than the element that initiated the sequence of touch events).
+ */
+function getActualTouchTarget(event: TouchEvent): Element | null {
+  const touchLocation = event.changedTouches[0];
+  return document.elementFromPoint(touchLocation.clientX, touchLocation.clientY);
+}

src/material/datepicker/calendar.html

@@ -13,7 +13,11 @@
       [comparisonEnd]="comparisonEnd"
       [startDateAccessibleName]="startDateAccessibleName"
       [endDateAccessibleName]="endDateAccessibleName"
-      (_userSelection)="_dateSelected($event)">
+      (_userSelection)="_dateSelected($event)"
+      (dragStarted)="_dragStarted($event)"
+      (dragEnded)="_dragEnded($event)"
+      [activeDrag]="_activeDrag"
+      >
   </mat-month-view>
 
   <mat-year-view

src/material/datepicker/calendar.ts

@@ -342,6 +342,9 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
   @Output() readonly _userSelection: EventEmitter<MatCalendarUserEvent<D | null>> =
     new EventEmitter<MatCalendarUserEvent<D | null>>();
 
+  /** Emits a new date range value when the user completes a drag drop operation. */
+  @Output() readonly _userDragDrop = new EventEmitter<MatCalendarUserEvent<DateRange<D>>>();
+
   /** Reference to the current month view component. */
   @ViewChild(MatMonthView) monthView: MatMonthView<D>;
 
@@ -380,6 +383,9 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
   }
   private _currentView: MatCalendarView;
 
+  /** Origin of active drag, or null when dragging is not active. */
+  protected _activeDrag: MatCalendarUserEvent<D> | null = null;
+
   /**
    * Emits whenever there is a state change that the header may need to respond to.
    */
@@ -498,6 +504,25 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
     this.currentView = view;
   }
 
+  /** Called when the user starts dragging to change a date range. */
+  _dragStarted(event: MatCalendarUserEvent<D>) {
+    this._activeDrag = event;
+  }
+
+  /**
+   * Called when a drag completes. It may end in cancelation or in the selection
+   * of a new range.
+   */
+  _dragEnded(event: MatCalendarUserEvent<DateRange<D> | null>) {
+    if (!this._activeDrag) return;
+
+    if (event.value) {
+      this._userDragDrop.emit(event as MatCalendarUserEvent<DateRange<D>>);
+    }
+
+    this._activeDrag = null;
+  }
+
   /** Returns the component instance that corresponds to the current calendar view. */
   private _getCurrentViewComponent(): MatMonthView<D> | MatYearView<D> | MatMultiYearView<D> {
     // The return type is explicitly written as a union to ensure that the Closure compiler does