title: Angular material datepicker limit the range selection
body: <p>I have an angular material date picker of ranges (start date and end date).</p>
  <p>Currently, it is free-selection. Meaning, I can choose any start date and any end date. I'd like to change it a bit. I want it to limit up to 7 days difference. I do not want to allow the user to choose 2 dates with the difference in days is more than 7.</p>
  <p>So inside the calendar: <a href="https://i.stack.imgur.com/5Zgkx.png" rel="noreferrer">it looks something like this</a></p>
  <p>As you can see, 5th October is the start date, and it allows us to choose 17th October as the end date. But I want the user to be limited to choose the end date only in the range of 5th October to 12th October (7 days difference maximum).</p>
  <p>Is there a way?</p>
  <p>This is my HTML:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;mat-form-field class=&quot;datepicker&quot; appearance=&quot;fill&quot;&gt;
      &lt;mat-label&gt;Enter a date range&lt;/mat-label&gt;
      &lt;mat-date-range-input [formGroup]=&quot;rangeForm&quot; [rangePicker]=&quot;picker&quot; [max]=&quot;maxDate&quot;&gt;
          &lt;input matStartDate formControlName=&quot;start&quot; placeholder=&quot;Start date&quot; readonly&gt;
          &lt;input matEndDate formControlName=&quot;end&quot; placeholder=&quot;End date&quot; readonly&gt;
      &lt;/mat-date-range-input&gt;
  </code></pre>
  <p>Typescript:</p>
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { FormControl, FormGroup } from '@angular/forms';
  import * as moment from 'moment';
  
  @Component({
      selector: 'app-chart',
      templateUrl: './chart.component.html',
      styleUrls: ['./chart.component.scss']
  })
  export class ChartComponent implements OnInit {
      private _startDate: moment.Moment = moment().subtract(6, 'days');
      private _endData: moment.Moment = moment();
      
      public maxDate: Date = this._endData.toDate();
      public rangeForm: FormGroup = new FormGroup({
          start: new FormControl(this._startDate.toDate()),
          end: new FormControl(this._endData.toDate()),
      });
      
      constructor() { }
      
      ngOnInit(): void {
      }
      
      /**
      * Getter for start date
      * @returns string
      */
      public getStartDate(): string {
          return this._startDate.format('DD/MM/YYYY');
      }
      
      /**
      * Getter for end date
      * @returns string
      */
      public getEndDate(): string {
          return this._endData.format('DD/MM/YYYY');
      }
      
  }
  </code></pre>