@angular/material 10.1.1 → 10.2.0

package/fesm2015/datepicker.js

@@ -173,8 +173,8 @@ class MatCalendarBody {
         }
     }
     /** Returns whether a cell should be marked as selected. */
-    _isSelected(cell) {
-        return this.startValue === cell.compareValue || this.endValue === cell.compareValue;
+    _isSelected(value) {
+        return this.startValue === value || this.endValue === value;
     }
     ngOnChanges(changes) {
         const columnChanges = changes['numCols'];
@@ -208,7 +208,7 @@ class MatCalendarBody {
     /** Focuses the active cell after the microtask queue is empty. */
     _focusActiveCell(movePreview = true) {
         this._ngZone.runOutsideAngular(() => {
-            this._ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
+            this._ngZone.onStable.pipe(take(1)).subscribe(() => {
                 const activeCell = this._elementRef.nativeElement.querySelector('.mat-calendar-body-active');
                 if (activeCell) {
                     if (!movePreview) {
@@ -267,6 +267,21 @@ class MatCalendarBody {
     _isInComparisonRange(value) {
         return isInRange(value, this.comparisonStart, this.comparisonEnd, this.isRange);
     }
+    /**
+     * Gets whether a value is the same as the start and end of the comparison range.
+     * For context, the functions that we use to determine whether something is the start/end of
+     * a range don't allow for the start and end to be on the same day, because we'd have to use
+     * much more specific CSS selectors to style them correctly in all scenarios. This is fine for
+     * the regular range, because when it happens, the selected styles take over and still show where
+     * the range would've been, however we don't have these selected styles for a comparison range.
+     * This function is used to apply a class that serves the same purpose as the one for selected
+     * dates, but it only applies in the context of a comparison range.
+     */
+    _isComparisonIdentical(value) {
+        // Note that we don't need to null check the start/end
+        // here, because the `value` will always be defined.
+        return this.comparisonStart === this.comparisonEnd && value === this.comparisonStart;
+    }
     /** Gets whether a value is the start of the preview range. */
     _isPreviewStart(value) {
         return isStart(value, this.previewStart, this.previewEnd);
@@ -301,7 +316,7 @@ class MatCalendarBody {
 MatCalendarBody.decorators = [
     { type: Component, args: [{
                 selector: '[mat-calendar-body]',
-                template: "<!--\n  If there's not enough space in the first row, create a separate label row. We mark this row as\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\">\n  <td class=\"mat-calendar-body-label\"\n      [attr.colspan]=\"numCols\"\n      [style.paddingTop]=\"_cellPadding\"\n      [style.paddingBottom]=\"_cellPadding\">\n    {{label}}\n  </td>\n</tr>\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\n  <!--\n    We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n    The aspect ratio of the table cells is maintained by setting the top and bottom padding as a\n    percentage of the width (a variant of the trick described here:\n    https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n  -->\n  <td *ngIf=\"rowIndex === 0 && _firstRowOffset\"\n      aria-hidden=\"true\"\n      class=\"mat-calendar-body-label\"\n      [attr.colspan]=\"_firstRowOffset\"\n      [style.paddingTop]=\"_cellPadding\"\n      [style.paddingBottom]=\"_cellPadding\">\n    {{_firstRowOffset >= labelMinRequiredCells ? label : ''}}\n  </td>\n  <td *ngFor=\"let item of row; let colIndex = index\"\n      role=\"gridcell\"\n      class=\"mat-calendar-body-cell\"\n      [ngClass]=\"item.cssClasses\"\n      [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n      [attr.data-mat-row]=\"rowIndex\"\n      [attr.data-mat-col]=\"colIndex\"\n      [class.mat-calendar-body-disabled]=\"!item.enabled\"\n      [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n      [class.mat-calendar-body-range-start]=\"_isRangeStart(item.compareValue)\"\n      [class.mat-calendar-body-range-end]=\"_isRangeEnd(item.compareValue)\"\n      [class.mat-calendar-body-in-range]=\"_isInRange(item.compareValue)\"\n      [class.mat-calendar-body-comparison-bridge-start]=\"_isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)\"\n      [class.mat-calendar-body-comparison-bridge-end]=\"_isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)\"\n      [class.mat-calendar-body-comparison-start]=\"_isComparisonStart(item.compareValue)\"\n      [class.mat-calendar-body-comparison-end]=\"_isComparisonEnd(item.compareValue)\"\n      [class.mat-calendar-body-in-comparison-range]=\"_isInComparisonRange(item.compareValue)\"\n      [class.mat-calendar-body-preview-start]=\"_isPreviewStart(item.compareValue)\"\n      [class.mat-calendar-body-preview-end]=\"_isPreviewEnd(item.compareValue)\"\n      [class.mat-calendar-body-in-preview]=\"_isInPreview(item.compareValue)\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.aria-disabled]=\"!item.enabled || null\"\n      [attr.aria-selected]=\"_isSelected(item)\"\n      (click)=\"_cellClicked(item, $event)\"\n      [style.width]=\"_cellWidth\"\n      [style.paddingTop]=\"_cellPadding\"\n      [style.paddingBottom]=\"_cellPadding\">\n      <div class=\"mat-calendar-body-cell-content mat-focus-indicator\"\n        [class.mat-calendar-body-selected]=\"_isSelected(item)\"\n        [class.mat-calendar-body-today]=\"todayValue === item.compareValue\">\n        {{item.displayValue}}\n      </div>\n      <div class=\"mat-calendar-body-cell-preview\"></div>\n  </td>\n</tr>\n",
+                template: "<!--\n  If there's not enough space in the first row, create a separate label row. We mark this row as\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\">\n  <td class=\"mat-calendar-body-label\"\n      [attr.colspan]=\"numCols\"\n      [style.paddingTop]=\"_cellPadding\"\n      [style.paddingBottom]=\"_cellPadding\">\n    {{label}}\n  </td>\n</tr>\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\n  <!--\n    We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n    The aspect ratio of the table cells is maintained by setting the top and bottom padding as a\n    percentage of the width (a variant of the trick described here:\n    https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).\n  -->\n  <td *ngIf=\"rowIndex === 0 && _firstRowOffset\"\n      aria-hidden=\"true\"\n      class=\"mat-calendar-body-label\"\n      [attr.colspan]=\"_firstRowOffset\"\n      [style.paddingTop]=\"_cellPadding\"\n      [style.paddingBottom]=\"_cellPadding\">\n    {{_firstRowOffset >= labelMinRequiredCells ? label : ''}}\n  </td>\n  <td *ngFor=\"let item of row; let colIndex = index\"\n      role=\"gridcell\"\n      class=\"mat-calendar-body-cell\"\n      [ngClass]=\"item.cssClasses\"\n      [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n      [attr.data-mat-row]=\"rowIndex\"\n      [attr.data-mat-col]=\"colIndex\"\n      [class.mat-calendar-body-disabled]=\"!item.enabled\"\n      [class.mat-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n      [class.mat-calendar-body-range-start]=\"_isRangeStart(item.compareValue)\"\n      [class.mat-calendar-body-range-end]=\"_isRangeEnd(item.compareValue)\"\n      [class.mat-calendar-body-in-range]=\"_isInRange(item.compareValue)\"\n      [class.mat-calendar-body-comparison-bridge-start]=\"_isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)\"\n      [class.mat-calendar-body-comparison-bridge-end]=\"_isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)\"\n      [class.mat-calendar-body-comparison-start]=\"_isComparisonStart(item.compareValue)\"\n      [class.mat-calendar-body-comparison-end]=\"_isComparisonEnd(item.compareValue)\"\n      [class.mat-calendar-body-in-comparison-range]=\"_isInComparisonRange(item.compareValue)\"\n      [class.mat-calendar-body-preview-start]=\"_isPreviewStart(item.compareValue)\"\n      [class.mat-calendar-body-preview-end]=\"_isPreviewEnd(item.compareValue)\"\n      [class.mat-calendar-body-in-preview]=\"_isInPreview(item.compareValue)\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.aria-disabled]=\"!item.enabled || null\"\n      [attr.aria-selected]=\"_isSelected(item.compareValue)\"\n      (click)=\"_cellClicked(item, $event)\"\n      [style.width]=\"_cellWidth\"\n      [style.paddingTop]=\"_cellPadding\"\n      [style.paddingBottom]=\"_cellPadding\">\n      <div class=\"mat-calendar-body-cell-content mat-focus-indicator\"\n        [class.mat-calendar-body-selected]=\"_isSelected(item.compareValue)\"\n        [class.mat-calendar-body-comparison-identical]=\"_isComparisonIdentical(item.compareValue)\"\n        [class.mat-calendar-body-today]=\"todayValue === item.compareValue\">\n        {{item.displayValue}}\n      </div>\n      <div class=\"mat-calendar-body-cell-preview\"></div>\n  </td>\n</tr>\n",
                 host: {
                     'class': 'mat-calendar-body',
                     'role': 'grid',
@@ -380,7 +395,7 @@ class MatDateSelectionModel {
         this._adapter = _adapter;
         this._selectionChanged = new Subject();
         /** Emits when the selection has changed. */
-        this.selectionChanged = this._selectionChanged.asObservable();
+        this.selectionChanged = this._selectionChanged;
         this.selection = selection;
     }
     /**
@@ -555,6 +570,16 @@ DefaultMatCalendarRangeStrategy.decorators = [
 DefaultMatCalendarRangeStrategy.ctorParameters = () => [
     { type: DateAdapter }
 ];
+/** @docs-private */
+function MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY(parent, adapter) {
+    return parent || new DefaultMatCalendarRangeStrategy(adapter);
+}
+/** @docs-private */
+const MAT_CALENDAR_RANGE_STRATEGY_PROVIDER = {
+    provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
+    deps: [[new Optional(), new SkipSelf(), MAT_DATE_RANGE_SELECTION_STRATEGY], DateAdapter],
+    useFactory: MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY,
+};
 
 /**
  * @license
@@ -582,11 +607,13 @@ class MatMonthView {
         this._userSelection = new EventEmitter();
         /** Emits when any date is activated. */
         this.activeDateChange = new EventEmitter();
-        if (!this._dateAdapter) {
-            throw createMissingDateImplError('DateAdapter');
-        }
-        if (!this._dateFormats) {
-            throw createMissingDateImplError('MAT_DATE_FORMATS');
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            if (!this._dateAdapter) {
+                throw createMissingDateImplError('DateAdapter');
+            }
+            if (!this._dateFormats) {
+                throw createMissingDateImplError('MAT_DATE_FORMATS');
+            }
         }
         this._activeDate = this._dateAdapter.today();
     }
@@ -596,7 +623,7 @@ class MatMonthView {
     get activeDate() { return this._activeDate; }
     set activeDate(value) {
         const oldActiveDate = this._activeDate;
-        const validDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
+        const validDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
         this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);
         if (!this._hasSameMonthAndYear(oldActiveDate, this._activeDate)) {
             this._init();
@@ -609,25 +636,31 @@ class MatMonthView {
             this._selected = value;
         }
         else {
-            this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+            this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
         }
         this._setRanges(this._selected);
     }
     /** The minimum selectable date. */
     get minDate() { return this._minDate; }
     set minDate(value) {
-        this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+        this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     }
     /** The maximum selectable date. */
     get maxDate() { return this._maxDate; }
     set maxDate(value) {
-        this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+        this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     }
     ngAfterContentInit() {
         this._rerenderSubscription = this._dateAdapter.localeChanges
             .pipe(startWith(null))
             .subscribe(() => this._init());
     }
+    ngOnChanges(changes) {
+        const comparisonChange = changes['comparisonStart'] || changes['comparisonEnd'];
+        if (comparisonChange && !comparisonChange.firstChange) {
+            this._setRanges(this.selected);
+        }
+    }
     ngOnDestroy() {
         this._rerenderSubscription.unsubscribe();
     }
@@ -776,7 +809,7 @@ class MatMonthView {
             const date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate), i + 1);
             const enabled = this._shouldEnableDate(date);
             const ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel);
-            const cellClasses = this.dateClass ? this.dateClass(date) : undefined;
+            const cellClasses = this.dateClass ? this.dateClass(date, 'month') : undefined;
             this._weeks[this._weeks.length - 1].push(new MatCalendarCell(i + 1, dateNames[i], ariaLabel, enabled, cellClasses, this._getCellCompareValue(date), date));
         }
     }
@@ -812,13 +845,6 @@ class MatMonthView {
         }
         return null;
     }
-    /**
-     * @param obj The object to check.
-     * @returns The given object if it is both a date instance and valid, otherwise null.
-     */
-    _getValidDateOrNull(obj) {
-        return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
-    }
     /** Determines whether the user has the RTL layout direction. */
     _isRtl() {
         return this._dir && this._dir.value === 'rtl';
@@ -894,7 +920,7 @@ class MatMultiYearView {
         this.yearSelected = new EventEmitter();
         /** Emits when any date is activated. */
         this.activeDateChange = new EventEmitter();
-        if (!this._dateAdapter) {
+        if (!this._dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw createMissingDateImplError('DateAdapter');
         }
         this._activeDate = this._dateAdapter.today();
@@ -903,7 +929,7 @@ class MatMultiYearView {
     get activeDate() { return this._activeDate; }
     set activeDate(value) {
         let oldActiveDate = this._activeDate;
-        const validDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
+        const validDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
         this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);
         if (!isSameMultiYearView(this._dateAdapter, oldActiveDate, this._activeDate, this.minDate, this.maxDate)) {
             this._init();
@@ -916,19 +942,19 @@ class MatMultiYearView {
             this._selected = value;
         }
         else {
-            this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+            this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
         }
         this._setSelectedYear(value);
     }
     /** The minimum selectable date. */
     get minDate() { return this._minDate; }
     set minDate(value) {
-        this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+        this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     }
     /** The maximum selectable date. */
     get maxDate() { return this._maxDate; }
     set maxDate(value) {
-        this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+        this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     }
     ngAfterContentInit() {
         this._rerenderSubscription = this._dateAdapter.localeChanges
@@ -1021,8 +1047,10 @@ class MatMultiYearView {
     }
     /** Creates an MatCalendarCell for the given year. */
     _createCellForYear(year) {
-        let yearName = this._dateAdapter.getYearName(this._dateAdapter.createDate(year, 0, 1));
-        return new MatCalendarCell(year, yearName, yearName, this._shouldEnableYear(year));
+        const date = this._dateAdapter.createDate(year, 0, 1);
+        const yearName = this._dateAdapter.getYearName(date);
+        const cellClasses = this.dateClass ? this.dateClass(date, 'multi-year') : undefined;
+        return new MatCalendarCell(year, yearName, yearName, this._shouldEnableYear(year), cellClasses);
     }
     /** Whether the given year is enabled. */
     _shouldEnableYear(year) {
@@ -1045,13 +1073,6 @@ class MatMultiYearView {
         }
         return false;
     }
-    /**
-     * @param obj The object to check.
-     * @returns The given object if it is both a date instance and valid, otherwise null.
-     */
-    _getValidDateOrNull(obj) {
-        return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
-    }
     /** Determines whether the user has the RTL layout direction. */
     _isRtl() {
         return this._dir && this._dir.value === 'rtl';
@@ -1090,6 +1111,7 @@ MatMultiYearView.propDecorators = {
     minDate: [{ type: Input }],
     maxDate: [{ type: Input }],
     dateFilter: [{ type: Input }],
+    dateClass: [{ type: Input }],
     selectedChange: [{ type: Output }],
     yearSelected: [{ type: Output }],
     activeDateChange: [{ type: Output }],
@@ -1155,11 +1177,13 @@ class MatYearView {
         this.monthSelected = new EventEmitter();
         /** Emits when any date is activated. */
         this.activeDateChange = new EventEmitter();
-        if (!this._dateAdapter) {
-            throw createMissingDateImplError('DateAdapter');
-        }
-        if (!this._dateFormats) {
-            throw createMissingDateImplError('MAT_DATE_FORMATS');
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            if (!this._dateAdapter) {
+                throw createMissingDateImplError('DateAdapter');
+            }
+            if (!this._dateFormats) {
+                throw createMissingDateImplError('MAT_DATE_FORMATS');
+            }
         }
         this._activeDate = this._dateAdapter.today();
     }
@@ -1167,7 +1191,7 @@ class MatYearView {
     get activeDate() { return this._activeDate; }
     set activeDate(value) {
         let oldActiveDate = this._activeDate;
-        const validDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
+        const validDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
         this._activeDate = this._dateAdapter.clampDate(validDate, this.minDate, this.maxDate);
         if (this._dateAdapter.getYear(oldActiveDate) !== this._dateAdapter.getYear(this._activeDate)) {
             this._init();
@@ -1180,19 +1204,19 @@ class MatYearView {
             this._selected = value;
         }
         else {
-            this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+            this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
         }
         this._setSelectedMonth(value);
     }
     /** The minimum selectable date. */
     get minDate() { return this._minDate; }
     set minDate(value) {
-        this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+        this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     }
     /** The maximum selectable date. */
     get maxDate() { return this._maxDate; }
     set maxDate(value) {
-        this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+        this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     }
     ngAfterContentInit() {
         this._rerenderSubscription = this._dateAdapter.localeChanges
@@ -1283,8 +1307,10 @@ class MatYearView {
     }
     /** Creates an MatCalendarCell for the given month. */
     _createCellForMonth(month, monthName) {
-        let ariaLabel = this._dateAdapter.format(this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1), this._dateFormats.display.monthYearA11yLabel);
-        return new MatCalendarCell(month, monthName.toLocaleUpperCase(), ariaLabel, this._shouldEnableMonth(month));
+        const date = this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1);
+        const ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.monthYearA11yLabel);
+        const cellClasses = this.dateClass ? this.dateClass(date, 'year') : undefined;
+        return new MatCalendarCell(month, monthName.toLocaleUpperCase(), ariaLabel, this._shouldEnableMonth(month), cellClasses);
     }
     /** Whether the given month is enabled. */
     _shouldEnableMonth(month) {
@@ -1330,13 +1356,6 @@ class MatYearView {
         }
         return false;
     }
-    /**
-     * @param obj The object to check.
-     * @returns The given object if it is both a date instance and valid, otherwise null.
-     */
-    _getValidDateOrNull(obj) {
-        return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
-    }
     /** Determines whether the user has the RTL layout direction. */
     _isRtl() {
         return this._dir && this._dir.value === 'rtl';
@@ -1373,6 +1392,7 @@ MatYearView.propDecorators = {
     minDate: [{ type: Input }],
     maxDate: [{ type: Input }],
     dateFilter: [{ type: Input }],
+    dateClass: [{ type: Input }],
     selectedChange: [{ type: Output }],
     monthSelected: [{ type: Output }],
     activeDateChange: [{ type: Output }],
@@ -1531,11 +1551,13 @@ class MatCalendar {
          * Emits whenever there is a state change that the header may need to respond to.
          */
         this.stateChanges = new Subject();
-        if (!this._dateAdapter) {
-            throw createMissingDateImplError('DateAdapter');
-        }
-        if (!this._dateFormats) {
-            throw createMissingDateImplError('MAT_DATE_FORMATS');
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            if (!this._dateAdapter) {
+                throw createMissingDateImplError('DateAdapter');
+            }
+            if (!this._dateFormats) {
+                throw createMissingDateImplError('MAT_DATE_FORMATS');
+            }
         }
         this._intlChanges = _intl.changes.subscribe(() => {
             _changeDetectorRef.markForCheck();
@@ -1545,7 +1567,7 @@ class MatCalendar {
     /** A date representing the period (month or year) to start the calendar in. */
     get startAt() { return this._startAt; }
     set startAt(value) {
-        this._startAt = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+        this._startAt = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     }
     /** The currently selected date. */
     get selected() { return this._selected; }
@@ -1554,18 +1576,18 @@ class MatCalendar {
             this._selected = value;
         }
         else {
-            this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+            this._selected = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
         }
     }
     /** The minimum selectable date. */
     get minDate() { return this._minDate; }
     set minDate(value) {
-        this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+        this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     }
     /** The maximum selectable date. */
     get maxDate() { return this._maxDate; }
     set maxDate(value) {
-        this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+        this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     }
     /**
      * The current active date. This determines which time period is shown and which date is
@@ -1655,13 +1677,6 @@ class MatCalendar {
         this.activeDate = date;
         this.currentView = view;
     }
-    /**
-     * @param obj The object to check.
-     * @returns The given object if it is both a date instance and valid, otherwise null.
-     */
-    _getValidDateOrNull(obj) {
-        return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
-    }
     /** Returns the component instance that corresponds to the current calendar view. */
     _getCurrentViewComponent() {
         return this.monthView || this.yearView || this.multiYearView;
@@ -1670,7 +1685,7 @@ class MatCalendar {
 MatCalendar.decorators = [
     { type: Component, args: [{
                 selector: 'mat-calendar',
-                template: "<ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n\n<div class=\"mat-calendar-content\" [ngSwitch]=\"currentView\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n  <mat-month-view\n      *ngSwitchCase=\"'month'\"\n      [(activeDate)]=\"activeDate\"\n      [selected]=\"selected\"\n      [dateFilter]=\"dateFilter\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [dateClass]=\"dateClass\"\n      [comparisonStart]=\"comparisonStart\"\n      [comparisonEnd]=\"comparisonEnd\"\n      (_userSelection)=\"_dateSelected($event)\">\n  </mat-month-view>\n\n  <mat-year-view\n      *ngSwitchCase=\"'year'\"\n      [(activeDate)]=\"activeDate\"\n      [selected]=\"selected\"\n      [dateFilter]=\"dateFilter\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      (monthSelected)=\"_monthSelectedInYearView($event)\"\n      (selectedChange)=\"_goToDateInView($event, 'month')\">\n  </mat-year-view>\n\n  <mat-multi-year-view\n      *ngSwitchCase=\"'multi-year'\"\n      [(activeDate)]=\"activeDate\"\n      [selected]=\"selected\"\n      [dateFilter]=\"dateFilter\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      (yearSelected)=\"_yearSelectedInMultiYearView($event)\"\n      (selectedChange)=\"_goToDateInView($event, 'year')\">\n  </mat-multi-year-view>\n</div>\n",
+                template: "<ng-template [cdkPortalOutlet]=\"_calendarHeaderPortal\"></ng-template>\n\n<div class=\"mat-calendar-content\" [ngSwitch]=\"currentView\" cdkMonitorSubtreeFocus tabindex=\"-1\">\n  <mat-month-view\n      *ngSwitchCase=\"'month'\"\n      [(activeDate)]=\"activeDate\"\n      [selected]=\"selected\"\n      [dateFilter]=\"dateFilter\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [dateClass]=\"dateClass\"\n      [comparisonStart]=\"comparisonStart\"\n      [comparisonEnd]=\"comparisonEnd\"\n      (_userSelection)=\"_dateSelected($event)\">\n  </mat-month-view>\n\n  <mat-year-view\n      *ngSwitchCase=\"'year'\"\n      [(activeDate)]=\"activeDate\"\n      [selected]=\"selected\"\n      [dateFilter]=\"dateFilter\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [dateClass]=\"dateClass\"\n      (monthSelected)=\"_monthSelectedInYearView($event)\"\n      (selectedChange)=\"_goToDateInView($event, 'month')\">\n  </mat-year-view>\n\n  <mat-multi-year-view\n      *ngSwitchCase=\"'multi-year'\"\n      [(activeDate)]=\"activeDate\"\n      [selected]=\"selected\"\n      [dateFilter]=\"dateFilter\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [dateClass]=\"dateClass\"\n      (yearSelected)=\"_yearSelectedInMultiYearView($event)\"\n      (selectedChange)=\"_goToDateInView($event, 'year')\">\n  </mat-multi-year-view>\n</div>\n",
                 host: {
                     'class': 'mat-calendar',
                 },
@@ -1849,7 +1864,7 @@ class MatDatepickerContent extends _MatDatepickerContentMixinBase {
 MatDatepickerContent.decorators = [
     { type: Component, args: [{
                 selector: 'mat-datepicker-content',
-                template: "<mat-calendar cdkTrapFocus\n    [id]=\"datepicker.id\"\n    [ngClass]=\"datepicker.panelClass\"\n    [startAt]=\"datepicker.startAt\"\n    [startView]=\"datepicker.startView\"\n    [minDate]=\"datepicker._minDate\"\n    [maxDate]=\"datepicker._maxDate\"\n    [dateFilter]=\"datepicker._dateFilter\"\n    [headerComponent]=\"datepicker.calendarHeaderComponent\"\n    [selected]=\"_getSelected()\"\n    [dateClass]=\"datepicker.dateClass\"\n    [comparisonStart]=\"comparisonStart\"\n    [comparisonEnd]=\"comparisonEnd\"\n    [@fadeInCalendar]=\"'enter'\"\n    (yearSelected)=\"datepicker._selectYear($event)\"\n    (monthSelected)=\"datepicker._selectMonth($event)\"\n    (_userSelection)=\"_handleUserSelection($event)\">\n</mat-calendar>\n",
+                template: "<mat-calendar cdkTrapFocus\n    [id]=\"datepicker.id\"\n    [ngClass]=\"datepicker.panelClass\"\n    [startAt]=\"datepicker.startAt\"\n    [startView]=\"datepicker.startView\"\n    [minDate]=\"datepicker._getMinDate()\"\n    [maxDate]=\"datepicker._getMaxDate()\"\n    [dateFilter]=\"datepicker._getDateFilter()\"\n    [headerComponent]=\"datepicker.calendarHeaderComponent\"\n    [selected]=\"_getSelected()\"\n    [dateClass]=\"datepicker.dateClass\"\n    [comparisonStart]=\"comparisonStart\"\n    [comparisonEnd]=\"comparisonEnd\"\n    [@fadeInCalendar]=\"'enter'\"\n    (yearSelected)=\"datepicker._selectYear($event)\"\n    (monthSelected)=\"datepicker._selectMonth($event)\"\n    (_userSelection)=\"_handleUserSelection($event)\">\n</mat-calendar>\n",
                 host: {
                     'class': 'mat-datepicker-content',
                     '[@transformPanel]': '_animationState',
@@ -1915,9 +1930,11 @@ class MatDatepickerBase {
         this.id = `mat-datepicker-${datepickerUid++}`;
         /** The element that was focused before the datepicker was opened. */
         this._focusedElementBeforeOpen = null;
+        /** Unique class that will be added to the backdrop so that the test harnesses can look it up. */
+        this._backdropHarnessClass = `${this.id}-backdrop`;
         /** Emits when the datepicker's state changes. */
         this._stateChanges = new Subject();
-        if (!this._dateAdapter) {
+        if (!this._dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw createMissingDateImplError('DateAdapter');
         }
         this._scrollStrategy = scrollStrategy;
@@ -1929,7 +1946,7 @@ class MatDatepickerBase {
         return this._startAt || (this._datepickerInput ? this._datepickerInput.getStartValue() : null);
     }
     set startAt(value) {
-        this._startAt = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+        this._startAt = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
     }
     /** Color palette to use on the datepicker's calendar. */
     get color() {
@@ -1961,16 +1978,18 @@ class MatDatepickerBase {
     }
     /** Whether the calendar is open. */
     get opened() { return this._opened; }
-    set opened(value) { value ? this.open() : this.close(); }
+    set opened(value) {
+        coerceBooleanProperty(value) ? this.open() : this.close();
+    }
     /** The minimum selectable date. */
-    get _minDate() {
+    _getMinDate() {
         return this._datepickerInput && this._datepickerInput.min;
     }
     /** The maximum selectable date. */
-    get _maxDate() {
+    _getMaxDate() {
         return this._datepickerInput && this._datepickerInput.max;
     }
-    get _dateFilter() {
+    _getDateFilter() {
         return this._datepickerInput && this._datepickerInput.dateFilter;
     }
     ngOnChanges(changes) {
@@ -2007,7 +2026,7 @@ class MatDatepickerBase {
      * @returns Selection model that the input should hook itself up to.
      */
     _registerInput(input) {
-        if (this._datepickerInput) {
+        if (this._datepickerInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw Error('A MatDatepicker can only be associated with a single input.');
         }
         this._inputStateChanges.unsubscribe();
@@ -2021,7 +2040,7 @@ class MatDatepickerBase {
         if (this._opened || this.disabled) {
             return;
         }
-        if (!this._datepickerInput) {
+        if (!this._datepickerInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw Error('Attempted to open an MatDatepicker with no associated input.');
         }
         if (this._document) {
@@ -2085,6 +2104,7 @@ class MatDatepickerBase {
             // datepicker dialog behaves consistently even if the user changed the defaults.
             hasBackdrop: true,
             disableClose: false,
+            backdropClass: ['cdk-overlay-dark-backdrop', this._backdropHarnessClass],
             width: '',
             height: '',
             minWidth: '',
@@ -2112,7 +2132,7 @@ class MatDatepickerBase {
         this._popupComponentRef = this._popupRef.attach(portal);
         this._forwardContentValues(this._popupComponentRef.instance);
         // Update the position once the calendar has rendered.
-        this._ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
+        this._ngZone.onStable.pipe(take(1)).subscribe(() => {
             this._popupRef.updatePosition();
         });
     }
@@ -2132,7 +2152,7 @@ class MatDatepickerBase {
         const overlayConfig = new OverlayConfig({
             positionStrategy: this._setConnectedPositions(positionStrategy),
             hasBackdrop: true,
-            backdropClass: 'mat-overlay-transparent-backdrop',
+            backdropClass: ['mat-overlay-transparent-backdrop', this._backdropHarnessClass],
             direction: this._dir,
             scrollStrategy: this._scrollStrategy(),
             panelClass: 'mat-datepicker-popup',
@@ -2190,13 +2210,6 @@ class MatDatepickerBase {
             }
         ]);
     }
-    /**
-     * @param obj The object to check.
-     * @returns The given object if it is both a date instance and valid, otherwise null.
-     */
-    _getValidDateOrNull(obj) {
-        return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
-    }
 }
 MatDatepickerBase.decorators = [
     { type: Directive }
@@ -2303,14 +2316,14 @@ class MatDatepickerInputBase {
         };
         /** The form control validator for the date filter. */
         this._filterValidator = (control) => {
-            const controlValue = this._getValidDateOrNull(this._dateAdapter.deserialize(control.value));
+            const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
             const dateFilter = this._getDateFilter();
             return !dateFilter || !controlValue || dateFilter(controlValue) ?
                 null : { 'matDatepickerFilter': true };
         };
         /** The form control validator for the min date. */
         this._minValidator = (control) => {
-            const controlValue = this._getValidDateOrNull(this._dateAdapter.deserialize(control.value));
+            const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
             const min = this._getMinDate();
             return (!min || !controlValue ||
                 this._dateAdapter.compareDate(min, controlValue) <= 0) ?
@@ -2318,7 +2331,7 @@ class MatDatepickerInputBase {
         };
         /** The form control validator for the max date. */
         this._maxValidator = (control) => {
-            const controlValue = this._getValidDateOrNull(this._dateAdapter.deserialize(control.value));
+            const controlValue = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
             const max = this._getMaxDate();
             return (!max || !controlValue ||
                 this._dateAdapter.compareDate(max, controlValue) >= 0) ?
@@ -2326,11 +2339,13 @@ class MatDatepickerInputBase {
         };
         /** Whether the last value set on the input was valid. */
         this._lastValueValid = false;
-        if (!this._dateAdapter) {
-            throw createMissingDateImplError('DateAdapter');
-        }
-        if (!this._dateFormats) {
-            throw createMissingDateImplError('MAT_DATE_FORMATS');
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            if (!this._dateAdapter) {
+                throw createMissingDateImplError('DateAdapter');
+            }
+            if (!this._dateFormats) {
+                throw createMissingDateImplError('MAT_DATE_FORMATS');
+            }
         }
         // Update the displayed date when the locale changes.
         this._localeSubscription = _dateAdapter.localeChanges.subscribe(() => {
@@ -2344,7 +2359,7 @@ class MatDatepickerInputBase {
     set value(value) {
         value = this._dateAdapter.deserialize(value);
         this._lastValueValid = this._isValidValue(value);
-        value = this._getValidDateOrNull(value);
+        value = this._dateAdapter.getValidDateOrNull(value);
         const oldDate = this.value;
         this._assignValue(value);
         this._formatValue(value);
@@ -2450,7 +2465,7 @@ class MatDatepickerInputBase {
         const lastValueWasValid = this._lastValueValid;
         let date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
         this._lastValueValid = this._isValidValue(date);
-        date = this._getValidDateOrNull(date);
+        date = this._dateAdapter.getValidDateOrNull(date);
         if (!this._dateAdapter.sameDate(date, this.value)) {
             this._assignValue(date);
             this._cvaOnChange(date);
@@ -2484,13 +2499,6 @@ class MatDatepickerInputBase {
         this._elementRef.nativeElement.value =
             value ? this._dateAdapter.format(value, this._dateFormats.display.dateInput) : '';
     }
-    /**
-     * @param obj The object to check.
-     * @returns The given object if it is both a date instance and valid, otherwise null.
-     */
-    _getValidDateOrNull(obj) {
-        return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
-    }
     /** Assigns a value to the model. */
     _assignValue(value) {
         // We may get some incoming values before the model was
@@ -2566,13 +2574,13 @@ class MatDatepickerInput extends MatDatepickerInputBase {
     /** The minimum valid date. */
     get min() { return this._min; }
     set min(value) {
-        this._min = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+        this._min = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
         this._validatorOnChange();
     }
     /** The maximum valid date. */
     get max() { return this._max; }
     set max(value) {
-        this._max = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+        this._max = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
         this._validatorOnChange();
     }
     /** Function that can be used to filter out dates within the datepicker. */
@@ -2642,10 +2650,14 @@ MatDatepickerInput.decorators = [
                     { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MatDatepickerInput },
                 ],
                 host: {
+                    'class': 'mat-datepicker-input',
                     '[attr.aria-haspopup]': '_datepicker ? "dialog" : null',
                     '[attr.aria-owns]': '(_datepicker?.opened && _datepicker.id) || null',
                     '[attr.min]': 'min ? _dateAdapter.toIso8601(min) : null',
                     '[attr.max]': 'max ? _dateAdapter.toIso8601(max) : null',
+                    // Used by the test harness to tie this input to its calendar. We can't depend on
+                    // `aria-owns` for this, because it's only defined while the calendar is open.
+                    '[attr.data-mat-calendar]': '_datepicker ? _datepicker.id : null',
                     '[disabled]': 'disabled',
                     '(input)': '_onInput($event.target.value)',
                     '(change)': '_onChange()',
@@ -2741,6 +2753,8 @@ MatDatepickerToggle.decorators = [
                     '[class.mat-datepicker-toggle-active]': 'datepicker && datepicker.opened',
                     '[class.mat-accent]': 'datepicker && datepicker.color === "accent"',
                     '[class.mat-warn]': 'datepicker && datepicker.color === "warn"',
+                    // Used by the test harness to tie this toggle to its datepicker.
+                    '[attr.data-mat-calendar]': 'datepicker ? datepicker.id : null',
                     '(focus)': '_button.focus()',
                 },
                 exportAs: 'matDatepickerToggle',
@@ -2874,7 +2888,7 @@ class MatStartDate extends _MatDateRangeInputBase {
         super(rangeInput, elementRef, defaultErrorStateMatcher, injector, parentForm, parentFormGroup, dateAdapter, dateFormats);
         /** Validator that checks that the start date isn't after the end date. */
         this._startValidator = (control) => {
-            const start = this._getValidDateOrNull(this._dateAdapter.deserialize(control.value));
+            const start = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
             const end = this._model ? this._model.selection.end : null;
             return (!start || !end ||
                 this._dateAdapter.compareDate(start, end) <= 0) ?
@@ -2911,7 +2925,7 @@ MatStartDate.decorators = [
     { type: Directive, args: [{
                 selector: 'input[matStartDate]',
                 host: {
-                    'class': 'mat-date-range-input-inner',
+                    'class': 'mat-start-date mat-date-range-input-inner',
                     '[disabled]': 'disabled',
                     '(input)': '_onInput($event.target.value)',
                     '(change)': '_onChange()',
@@ -2949,7 +2963,7 @@ class MatEndDate extends _MatDateRangeInputBase {
         super(rangeInput, elementRef, defaultErrorStateMatcher, injector, parentForm, parentFormGroup, dateAdapter, dateFormats);
         /** Validator that checks that the end date isn't before the start date. */
         this._endValidator = (control) => {
-            const end = this._getValidDateOrNull(this._dateAdapter.deserialize(control.value));
+            const end = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(control.value));
             const start = this._model ? this._model.selection.start : null;
             return (!end || !start ||
                 this._dateAdapter.compareDate(end, start) >= 0) ?
@@ -2982,7 +2996,7 @@ MatEndDate.decorators = [
     { type: Directive, args: [{
                 selector: 'input[matEndDate]',
                 host: {
-                    'class': 'mat-date-range-input-inner',
+                    'class': 'mat-end-date mat-date-range-input-inner',
                     '[disabled]': 'disabled',
                     '(input)': '_onInput($event.target.value)',
                     '(change)': '_onChange()',
@@ -3039,7 +3053,10 @@ MatDateRangePicker.decorators = [
                 exportAs: 'matDateRangePicker',
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
-                providers: [MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER]
+                providers: [
+                    MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER,
+                    MAT_CALENDAR_RANGE_STRATEGY_PROVIDER,
+                ]
             },] }
 ];
 
@@ -3076,7 +3093,7 @@ class MatDateRangeInput {
         this.comparisonEnd = null;
         /** Emits when the input's state changes. */
         this._stateChanges = new Subject();
-        if (!_dateAdapter) {
+        if (!_dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {
             throw createMissingDateImplError('DateAdapter');
         }
         // TODO(crisbeto): remove `as any` after #18206 lands.
@@ -3124,13 +3141,13 @@ class MatDateRangeInput {
     /** The minimum valid date. */
     get min() { return this._min; }
     set min(value) {
-        this._min = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+        this._min = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
         this._revalidate();
     }
     /** The maximum valid date. */
     get max() { return this._max; }
     set max(value) {
-        this._max = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+        this._max = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
         this._revalidate();
     }
     /** Whether the input is disabled. */
@@ -3181,11 +3198,13 @@ class MatDateRangeInput {
         }
     }
     ngAfterContentInit() {
-        if (!this._startInput) {
-            throw Error('mat-date-range-input must contain a matStartDate input');
-        }
-        if (!this._endInput) {
-            throw Error('mat-date-range-input must contain a matEndDate input');
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            if (!this._startInput) {
+                throw Error('mat-date-range-input must contain a matStartDate input');
+            }
+            if (!this._endInput) {
+                throw Error('mat-date-range-input must contain a matEndDate input');
+            }
         }
         if (this._model) {
             this._registerModel(this._model);
@@ -3243,13 +3262,6 @@ class MatDateRangeInput {
         const formField = this._formField;
         return formField && formField._hasFloatingLabel() ? formField._labelId : null;
     }
-    /**
-     * @param obj The object to check.
-     * @returns The given object if it is both a date instance and valid, otherwise null.
-     */
-    _getValidDateOrNull(obj) {
-        return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
-    }
     /** Re-runs the validators on the start/end inputs. */
     _revalidate() {
         if (this._startInput) {
@@ -3277,10 +3289,14 @@ MatDateRangeInput.decorators = [
                 host: {
                     'class': 'mat-date-range-input',
                     '[class.mat-date-range-input-hide-placeholders]': '_shouldHidePlaceholders()',
+                    '[class.mat-date-range-input-required]': 'required',
                     '[attr.id]': 'null',
                     'role': 'group',
                     '[attr.aria-labelledby]': '_getAriaLabelledby()',
                     '[attr.aria-describedby]': '_ariaDescribedBy',
+                    // Used by the test harness to tie this input to its calendar. We can't depend on
+                    // `aria-owns` for this, because it's only defined while the calendar is open.
+                    '[attr.data-mat-calendar]': 'rangePicker ? rangePicker.id : null',
                 },
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
@@ -3368,11 +3384,7 @@ MatDatepickerModule.decorators = [
                 ],
                 providers: [
                     MatDatepickerIntl,
-                    MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER,
-                    {
-                        provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
-                        useClass: DefaultMatCalendarRangeStrategy
-                    }
+                    MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER
                 ],
                 entryComponents: [
                     MatDatepickerContent,
@@ -3393,5 +3405,5 @@ MatDatepickerModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { DateRange, DefaultMatCalendarRangeStrategy, MAT_DATEPICKER_SCROLL_STRATEGY, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MAT_DATEPICKER_VALIDATORS, MAT_DATEPICKER_VALUE_ACCESSOR, MAT_DATE_RANGE_SELECTION_STRATEGY, MAT_RANGE_DATE_SELECTION_MODEL_FACTORY, MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER, MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY, MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER, MatCalendar, MatCalendarBody, MatCalendarCell, MatCalendarHeader, MatDateRangeInput, MatDateRangePicker, MatDateSelectionModel, MatDatepicker, MatDatepickerContent, MatDatepickerInput, MatDatepickerInputEvent, MatDatepickerIntl, MatDatepickerModule, MatDatepickerToggle, MatDatepickerToggleIcon, MatEndDate, MatMonthView, MatMultiYearView, MatRangeDateSelectionModel, MatSingleDateSelectionModel, MatStartDate, MatYearView, matDatepickerAnimations, yearsPerPage, yearsPerRow, MatDatepickerBase as ɵangular_material_src_material_datepicker_datepicker_a, MatDatepickerInputBase as ɵangular_material_src_material_datepicker_datepicker_b, MAT_DATE_RANGE_INPUT_PARENT as ɵangular_material_src_material_datepicker_datepicker_c };
+export { DateRange, DefaultMatCalendarRangeStrategy, MAT_DATEPICKER_SCROLL_STRATEGY, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY, MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, MAT_DATEPICKER_VALIDATORS, MAT_DATEPICKER_VALUE_ACCESSOR, MAT_DATE_RANGE_SELECTION_STRATEGY, MAT_RANGE_DATE_SELECTION_MODEL_FACTORY, MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER, MAT_SINGLE_DATE_SELECTION_MODEL_FACTORY, MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER, MatCalendar, MatCalendarBody, MatCalendarCell, MatCalendarHeader, MatDateRangeInput, MatDateRangePicker, MatDateSelectionModel, MatDatepicker, MatDatepickerContent, MatDatepickerInput, MatDatepickerInputEvent, MatDatepickerIntl, MatDatepickerModule, MatDatepickerToggle, MatDatepickerToggleIcon, MatEndDate, MatMonthView, MatMultiYearView, MatRangeDateSelectionModel, MatSingleDateSelectionModel, MatStartDate, MatYearView, matDatepickerAnimations, yearsPerPage, yearsPerRow, MAT_CALENDAR_RANGE_STRATEGY_PROVIDER_FACTORY as ɵangular_material_src_material_datepicker_datepicker_a, MAT_CALENDAR_RANGE_STRATEGY_PROVIDER as ɵangular_material_src_material_datepicker_datepicker_b, MatDatepickerBase as ɵangular_material_src_material_datepicker_datepicker_c, MatDatepickerInputBase as ɵangular_material_src_material_datepicker_datepicker_d, MAT_DATE_RANGE_INPUT_PARENT as ɵangular_material_src_material_datepicker_datepicker_e };
 //# sourceMappingURL=datepicker.js.map