title: Multiple Date Select in Material datePicker (Angular)
body: <p>I have a requirement that a user can select multiple dates in a date picker. How can I implement multiple date select functionality in an Angular Material date picker?</p>
  
  <p><a href="https://i.stack.imgur.com/cNsGe.png" rel="noreferrer"><img src="https://i.stack.imgur.com/cNsGe.png" alt="date picker"></a></p>
  
  <p>I tried this through <strong>dateClass</strong>. But, after every date selection the date picker will be closed.</p>
  
  <p>Here's what I tried</p>
  
  <p>HTML code: </p>
  
  <pre><code>&lt;input matInput [matDatepicker]="picker" placeholder="Choose a date"&gt;
  &lt;mat-datepicker-toggle matSuffix [for]="picker"&gt;&lt;/mat-datepicker-toggle&gt;
  &lt;mat-datepicker [dateClass]="dateClass" #picker&gt;&lt;/mat-datepicker&gt;
  </code></pre>
  
  <p>Typescript code:</p>
  
  <pre><code>dateClass = (d: Date) =&gt; {
      const date = d.getDate();
  
      // Highlight the 1st and 20th day of each month.
      return (date === 1 || date === 5 || date === 14 || date === 19 || date === 21 ) ? 'example-custom-date-class' : undefined;
  }
  </code></pre>