feat(datepicker): add date range picker

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);
+}