feat(datepicker): add date range picker (#19125)

* refactor(datepicker): implement date selection model provider  (#18090)

* Adds a date selection model (#17363)

* Adds a date selection model

* Adds a date selection model

* Use MatDateSelectionModel to model the selected value in MatDatepickerInput (#17497)

* Make the selection model injectable and add an `overlaps` method (#17766)

* Adds a date selection model (#17363)

* Adds a date selection model

* Adds a date selection model

* Add overlaps function to date selection model

* Trying to incorporate the new type definition (#17942)

* incoporate new type definition

* fix test and clean up the types a bit

* update api gold

* fix some nits

* fix lint

Co-authored-by: mmalerba <[email protected]>

* refactor(datepicker): implement date selection model provider

Reworks the datepicker-related directives to move the source of the value into the new datepicker selection provider.

Co-authored-by: xlou978 <[email protected]>
Co-authored-by: jaguima <[email protected]>
Co-authored-by: mmalerba <[email protected]>
Co-authored-by: roboshoes <[email protected]>
Co-authored-by: goldblatt <[email protected]>

* feat(datepicker): set up input for date range picker (#18159)

Sets up the UI and most of the boilerplate that we'll need for the input that is associated with a date range picker. Doesn't include any interactions with the datepicker itself yet.

* refactor: move common date input logic into base class (#18213)

Moves the common logic for a date input into a base class and implements it for the range inputs.

* refactor(datepicker): implement range selection model (#18247)

Implements the date range selection model in the individual range inputs.

* refactor: clean up datepicker base class abstract methods (#18278)

I had to do some hacky workarounds in order, because I couldn't figure out how to deal with an abstract class that was being passed into a mixin. These changes clean up the workarounds.

* refactor(datepicker): set up date range picker classes (#18292)

Moves some things around to set up the date range picker. Includes:
* Moves all of the datepicker logic into a base class so that it can be reused between the single and range selection.
* Makes the input being passed into a datepicker generic so that we can strongly type `MatDatepicker` to `MatDatepickerInput` and `MatDateRangePicker` to `MatDateRangeInput`.
* Sets up min, max and date filter validation for the date range picker.
* Hooks up the date range picker to the date range input.
* Makes it so that a generic datepicker can be passed to a datepicker toggle.
* Adds a `DateFilterFn` type so we don't have to repeat the signature for the filter function everywhere.

Note that while picking a date range somewhat works now, it's still a bit broken. The primary goal of these changes was to have all of components in place and wired up so that we can start working on the UI in follow-up PRs.

* 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.

* fix(datepicker): handle date ranges across multiple months (#18404)

Currently we don't handle date ranges across months, because we store the date cell's value as the date in the current month. These changes add another value that will be used comparisons and which is based on the time since epoch.

* feat(datepicker): polish up date range selector (#18531)

Makes a bunch of changes to polish up the behavior of the date range picker.

- Makes the range selection logic a bit smarter about when to pick start/end so that it's more intuitive.
- Fixes hovering over disabled cells triggering the range selection styles.
- Fixes a "changed after checked" error when selecting a range using the keyboard.
- Implements validation that the start isn't after the end, and that the end isn't before the start.
- Adds the missing ARIA attributes.
- Fixes being able to select the placeholders of a disabled range input.
- Adds the ability to disable the entire range input.
- Fixes the inputs not greying out their values when they're disabled.
- Makes the range input a bit smarter about which input to focus on click.

* chore: fix grammar

* fix(datepicker): cancel current range selection when pressing escape (#18630)

Adds some extra logic so that the user can abort the current range selection if they press the escape key.

* fix(datepicker): add gap between range rows and handle rtl (#18660)

* Makes the range background shorter so that there's a gap when a range spans across multiple rows. This makes it easier to see what's going on.
* Fixes the range styles not accounting for RTL layouts.

* feat(datepicker): implement comparison and overlap ranges (#18753)

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.

* fix(datepicker): resolve visual inconsistencies with comparison ranges (#18819)

Fixes some extra circles showing up when they're not supposed to when hovering over the start of the range or when the starts/ends of ranges are the same. Also clears out a few selectors that aren't necessary anymore.

* test(datepicker): add unit tests for the date range input (#18874)

Sets up unit tests for the `mat-date-range-input` component.

* test(datepicker): add tests for the date range picker (#18884)

Adds more tests for the date range picker functionality. These cover the logic for displaying and selecting the range, as well as the integration between the range input, range picker and calendar.

Also fixes a couple of smaller issues that were revealed while I was writing the tests.

* refactor(datepicker): clean up date selection model (#18943)

- Removes some methods from the date selection model that were put in place under the assumption that they'd be used, but we never ended up using them.
- Moves the selection model out of `core` and into `datepicker`. I decided to do it, because it seems very tightly coupled to the datepicker and I don't see us needing it in other components in the future.

* refactor(datepicker): align preview range appearance with Material Design spec (#18936)

Our current approach to styling the preview range in the same way as the selected range is discouraged by the Material Design spec and may make it hard in the future if we made it possible to have both a preview and selected range at the same time. These changes align with the spec by using a dashed outline instead.

* build: fix ci issues

* feat(datepicker): allow for date range selection logic to be customized (#18980)

As discussed, adds a provider that allows the consumer to customize how the range is changed after the user has selected a value. For now it only has one method (`selectionFinished`), but the interface should allow us to add more later on.

* fix(datepicker): range input label pointing to non-existent id (#19031)

This is something that I put the code in for in the beginning, but forgot to wire up. The `aria-owns` of the `label` in the `mat-form-field` needs to point to the id of the start input, but it didn't have an id.

* fix(datepicker): allow same start and end dates for range (#19098)

Allows for a range to have the same start and end dates.

* feat(datepicker): allow for the preview range logic to be customized (#19088)

Moves some things around so that the preview range can be controlled through the `MatCalendarRangeSelectionStrategy`.

* fix(datepicker): don't render invalid ranges and clean up range display logic (#19111)

No longer shows dates on the calendar if the range is invalid. Also moves out some common range logic that was being repeated in multiple places.

* fix: golden failure

* fix: remove unused method

* fix(datepicker): changed after checked error when moving preview between months (#19174)

Fixes a "changed after checked" error being thrown if the user has an active preview and they move to a different month using the keyboard. This is something that we had a fix for, but after #19088 it has to be moved one component up, because the binding that changes is in a different view.

* fix(datepicker): clearing completed range when pressing escape (#19179)

The check for when pressing escape should clear a range wasn't quite right which meant that pressing escape would clear a completed range. The intention was to only clear the range if the user has a start, but not an end.

* fix(datepicker): end input reset on load when bound through ngModel (#19176)

This is something I found while I was writing the live examples. When both the start and end inputs have an initial value bound through `ngModel`, the start resets the end, because the end's value wasn't yet defined at the time the start was assigning its value. These changes fix the issue by treating the entire input as a single unit when it comes to change events.

* fix(datepicker): change event dispatched before value is formatted (#19187)

Fixes the `dateChange` event being fired before the value is assigned to the native input value.

* fix(datepicker): calendar dispatching change event on non-user interactions

The calendar was changed to dispatch its `selectedChange` event for some non-user interactions. These changes restore the old behavior.

* fix(datepicker): unable to type in range inputs

In a previous fix I added some changes so that typing in an input counts as typing inside the entire date range input. The problem is that this causes some extra events to be fired which result in the user's typed value being overwritten as they're typing. These changes revert the previous fix and resolve the issue in a different way.

* fix(datepicker): user selection event not emitting value when clicking on the selected date (#19211)

If the user clicks on the selected date, we were emitting null instead of the actual value.

* refactor(datepicker): move date range selection logic out of calendar (#19219)

There are some projects that expect that the `mat-calendar` doesn't assign the value itself, but only renders it out and emits an event when something is selected. These changes move the date selection logic out into the `MatDatepickerContent`.

Also renames the calendar range selection strategy since it doesn't have much to do with the calendar anymore.

* fix(datepicker): move focus into start input when pressing backspace on end input (#19239)

Makes it so that pressing backspace on an empty end input moves focus into the start input. This makes the two separate inputs feel a bit more like a single input.

* docs(datepicker): add docs and live example for date range picker (#19170)

Sets up some live examples and adds docs for the date range picker.

Co-authored-by: xlou978 <[email protected]>
Co-authored-by: jaguima <[email protected]>
Co-authored-by: mmalerba <[email protected]>
Co-authored-by: roboshoes <[email protected]>
Co-authored-by: goldblatt <[email protected]>

Author: 6 people

goldens/ts-circular-deps.json

@@ -52,6 +52,10 @@
     "src/material/core/ripple/ripple-ref.ts",
     "src/material/core/ripple/ripple-renderer.ts"
   ],
+  [
+    "src/material/datepicker/date-range-input.ts",
+    "src/material/datepicker/date-range-picker.ts"
+  ],
   [
     "src/material/datepicker/datepicker-input.ts",
     "src/material/datepicker/datepicker.ts"

src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.css

@@ -0,0 +1,3 @@
+.example-form-field {
+  margin: 0 8px 16px 0;
+}

src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.html

@@ -0,0 +1,27 @@
+<mat-form-field class="example-form-field">
+  <mat-label>First campaign</mat-label>
+  <mat-date-range-input
+    [formGroup]="campaignOne"
+    [rangePicker]="campaignOnePicker"
+    [comparisonStart]="campaignTwo.value.start"
+    [comparisonEnd]="campaignTwo.value.end">
+    <input matStartDate matInput placeholder="Start date" formControlName="start">
+    <input matEndDate matInput placeholder="End date" formControlName="end">
+  </mat-date-range-input>
+  <mat-datepicker-toggle matSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
+  <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
+</mat-form-field>
+
+<mat-form-field class="example-form-field">
+  <mat-label>Second campaign</mat-label>
+  <mat-date-range-input
+    [formGroup]="campaignTwo"
+    [rangePicker]="campaignTwoPicker"
+    [comparisonStart]="campaignOne.value.start"
+    [comparisonEnd]="campaignOne.value.end">
+    <input matStartDate matInput placeholder="Start date" formControlName="start">
+    <input matEndDate matInput placeholder="End date" formControlName="end">
+  </mat-date-range-input>
+  <mat-datepicker-toggle matSuffix [for]="campaignTwoPicker"></mat-datepicker-toggle>
+  <mat-date-range-picker #campaignTwoPicker></mat-date-range-picker>
+</mat-form-field>

src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.ts

@@ -0,0 +1,29 @@
+import {Component} from '@angular/core';
+import {FormGroup, FormControl} from '@angular/forms';
+
+/** @title Date range picker comparison ranges */
+@Component({
+  selector: 'date-range-picker-comparison-example',
+  templateUrl: 'date-range-picker-comparison-example.html',
+  styleUrls: ['date-range-picker-comparison-example.css'],
+})
+export class DateRangePickerComparisonExample {
+  campaignOne: FormGroup;
+  campaignTwo: FormGroup;
+
+  constructor() {
+    const today = new Date();
+    const month = today.getMonth();
+    const year = today.getFullYear();
+
+    this.campaignOne = new FormGroup({
+      start: new FormControl(new Date(year, month, 13)),
+      end: new FormControl(new Date(year, month, 16))
+    });
+
+    this.campaignTwo = new FormGroup({
+      start: new FormControl(new Date(year, month, 15)),
+      end: new FormControl(new Date(year, month, 19))
+    });
+  }
+}

src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.html

@@ -0,0 +1,14 @@
+<mat-form-field>
+  <mat-label>Enter a date range</mat-label>
+  <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
+    <input matStartDate matInput formControlName="start" placeholder="Start date">
+    <input matEndDate matInput formControlName="end" placeholder="End date">
+  </mat-date-range-input>
+  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-date-range-picker #picker></mat-date-range-picker>
+
+  <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
+  <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
+</mat-form-field>
+
+<p>Selected range: {{range.value | json}}</p>

src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.ts

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {FormGroup, FormControl} from '@angular/forms';
+
+/** @title Date range picker forms integration */
+@Component({
+  selector: 'date-range-picker-forms-example',
+  templateUrl: 'date-range-picker-forms-example.html',
+  styleUrls: ['date-range-picker-forms-example.css'],
+})
+export class DateRangePickerFormsExample {
+  range = new FormGroup({
+    start: new FormControl(),
+    end: new FormControl()
+  });
+}

src/components-examples/material/datepicker/date-range-picker-overview/date-range-picker-overview-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/components-examples/material/datepicker/date-range-picker-overview/date-range-picker-overview-example.html

@@ -0,0 +1,9 @@
+<mat-form-field>
+  <mat-label>Enter a date range</mat-label>
+  <mat-date-range-input [rangePicker]="picker">
+    <input matStartDate matInput placeholder="Start date">
+    <input matEndDate matInput placeholder="End date">
+  </mat-date-range-input>
+  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-date-range-picker #picker></mat-date-range-picker>
+</mat-form-field>

src/components-examples/material/datepicker/date-range-picker-overview/date-range-picker-overview-example.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+/** @title Basic date range picker */
+@Component({
+  selector: 'date-range-picker-overview-example',
+  templateUrl: 'date-range-picker-overview-example.html',
+  styleUrls: ['date-range-picker-overview-example.css'],
+})
+export class DateRangePickerOverviewExample {}

src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.html

@@ -0,0 +1,9 @@
+<mat-form-field>
+  <mat-label>Enter a date range</mat-label>
+  <mat-date-range-input [rangePicker]="picker">
+    <input matStartDate matInput placeholder="Start date">
+    <input matEndDate matInput placeholder="End date">
+  </mat-date-range-input>
+  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-date-range-picker #picker></mat-date-range-picker>
+</mat-form-field>

src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.ts

@@ -0,0 +1,42 @@
+import {Component, Injectable} from '@angular/core';
+import {DateAdapter} from '@angular/material/core';
+import {
+  MatDateRangeSelectionStrategy,
+  DateRange,
+  MAT_DATE_RANGE_SELECTION_STRATEGY,
+} from '@angular/material/datepicker';
+
+@Injectable()
+export class FiveDayRangeSelectionStrategy<D> implements MatDateRangeSelectionStrategy<D> {
+  constructor(private _dateAdapter: DateAdapter<D>) {}
+
+  selectionFinished(date: D | null): DateRange<D> {
+    return this._createFiveDayRange(date);
+  }
+
+  createPreview(activeDate: D | null): DateRange<D> {
+    return this._createFiveDayRange(activeDate);
+  }
+
+  private _createFiveDayRange(date: D | null): DateRange<D> {
+    if (date) {
+      const start = this._dateAdapter.addCalendarDays(date, -2);
+      const end = this._dateAdapter.addCalendarDays(date, 2);
+      return new DateRange<D>(start, end);
+    }
+
+    return new DateRange<D>(null, null);
+  }
+}
+
+/** @title Date range picker with custom a selection strategy */
+@Component({
+  selector: 'date-range-picker-selection-strategy-example',
+  templateUrl: 'date-range-picker-selection-strategy-example.html',
+  styleUrls: ['date-range-picker-selection-strategy-example.css'],
+  providers: [{
+    provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
+    useClass: FiveDayRangeSelectionStrategy
+  }]
+})
+export class DateRangePickerSelectionStrategyExample {}

src/components-examples/material/datepicker/index.ts

@@ -1,6 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {ReactiveFormsModule} from '@angular/forms';
+import {ReactiveFormsModule, FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatNativeDateModule} from '@angular/material/core';
 import {MatDatepickerModule} from '@angular/material/datepicker';
@@ -29,6 +29,18 @@ import {DatepickerValueExample} from './datepicker-value/datepicker-value-exampl
 import {
   DatepickerViewsSelectionExample
 } from './datepicker-views-selection/datepicker-views-selection-example';
+import {
+  DateRangePickerOverviewExample
+} from './date-range-picker-overview/date-range-picker-overview-example';
+import {
+  DateRangePickerFormsExample
+} from './date-range-picker-forms/date-range-picker-forms-example';
+import {
+  DateRangePickerComparisonExample
+} from './date-range-picker-comparison/date-range-picker-comparison-example';
+import {
+  DateRangePickerSelectionStrategyExample
+} from './date-range-picker-selection-strategy/date-range-picker-selection-strategy-example';
 
 export {
   DatepickerApiExample,
@@ -48,6 +60,10 @@ export {
   DatepickerTouchExample,
   DatepickerValueExample,
   DatepickerViewsSelectionExample,
+  DateRangePickerOverviewExample,
+  DateRangePickerFormsExample,
+  DateRangePickerComparisonExample,
+  DateRangePickerSelectionStrategyExample,
   ExampleHeader,
 };
 
@@ -69,6 +85,10 @@ const EXAMPLES = [
   DatepickerTouchExample,
   DatepickerValueExample,
   DatepickerViewsSelectionExample,
+  DateRangePickerOverviewExample,
+  DateRangePickerFormsExample,
+  DateRangePickerComparisonExample,
+  DateRangePickerSelectionStrategyExample,
   ExampleHeader,
 ];
 
@@ -81,6 +101,7 @@ const EXAMPLES = [
     MatIconModule,
     MatNativeDateModule,
     ReactiveFormsModule,
+    FormsModule,
   ],
   declarations: EXAMPLES,
   exports: EXAMPLES,

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-module.ts

@@ -18,7 +18,12 @@ import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
 import {MatSelectModule} from '@angular/material/select';
 import {RouterModule} from '@angular/router';
-import {CustomHeader, CustomHeaderNgContent, DatepickerDemo} from './datepicker-demo';
+import {
+  CustomHeader,
+  CustomHeaderNgContent,
+  DatepickerDemo,
+  CustomRangeStrategy,
+} from './datepicker-demo';
 
 @NgModule({
   imports: [
@@ -35,7 +40,7 @@ import {CustomHeader, CustomHeaderNgContent, DatepickerDemo} from './datepicker-
     ReactiveFormsModule,
     RouterModule.forChild([{path: '', component: DatepickerDemo}]),
   ],
-  declarations: [CustomHeader, CustomHeaderNgContent, DatepickerDemo],
+  declarations: [CustomHeader, CustomHeaderNgContent, DatepickerDemo, CustomRangeStrategy],
 })
 export class DatepickerDemoModule {
 }

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

@@ -169,3 +169,92 @@ <h2>Datepicker with custom header extending the default header</h2>
     <mat-datepicker #customHeaderNgContentPicker [calendarHeaderComponent]="customHeaderNgContent"></mat-datepicker>
   </mat-form-field>
 </p>
+
+<h2>Range picker</h2>
+
+<div class="demo-range-group">
+  <mat-form-field>
+    <mat-label>Enter a date range</mat-label>
+    <mat-date-range-input
+      [formGroup]="range1"
+      [rangePicker]="range1Picker"
+      [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"/>
+    </mat-date-range-input>
+    <mat-datepicker-toggle [for]="range1Picker" matSuffix></mat-datepicker-toggle>
+    <mat-date-range-picker
+      [touchUi]="touch"
+      [disabled]="datepickerDisabled"
+      #range1Picker></mat-date-range-picker>
+  </mat-form-field>
+  <div>{{range1.value | json}}</div>
+</div>
+
+<div class="demo-range-group">
+  <mat-form-field appearance="fill">
+    <mat-label>Enter a date range</mat-label>
+    <mat-date-range-input
+      [formGroup]="range2"
+      [rangePicker]="range2Picker"
+      [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"/>
+    </mat-date-range-input>
+    <mat-datepicker-toggle [for]="range2Picker" matSuffix></mat-datepicker-toggle>
+    <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>
+</div>
+
+<div class="demo-range-group">
+  <mat-form-field appearance="outline">
+    <mat-label>Enter a date range</mat-label>
+    <mat-date-range-input
+      [formGroup]="range3"
+      [rangePicker]="range3Picker"
+      [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"/>
+    </mat-date-range-input>
+    <mat-datepicker-toggle [for]="range3Picker" matSuffix></mat-datepicker-toggle>
+    <mat-date-range-picker
+      [touchUi]="touch"
+      [disabled]="datepickerDisabled"
+      #range3Picker></mat-date-range-picker>
+  </mat-form-field>
+  <div>{{range3.value | json}}</div>
+</div>
+
+
+<h2>Range picker with custom selection strategy</h2>
+<div class="demo-range-group">
+  <mat-form-field>
+    <mat-label>Enter a date range</mat-label>
+    <mat-date-range-input [rangePicker]="range4Picker">
+      <input matStartDate placeholder="Start date"/>
+      <input matEndDate placeholder="End date"/>
+    </mat-date-range-input>
+    <mat-datepicker-toggle [for]="range4Picker" matSuffix></mat-datepicker-toggle>
+    <mat-date-range-picker customRangeStrategy #range4Picker></mat-date-range-picker>
+  </mat-form-field>
+</div>

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

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