How to set a multi select calendar with Material Angular?

Question

I have a Calendar but i can only set one date and i want to be able to set multiple dates. I dont see anything in the official documentation ( https://material.angular.io/components/datepicker/overview ) and i´m stuck.

My code is that

Ts:

import {Component} from '@angular/core';

@Component({
  selector: 'datepicker-inline-calendar-example',
  templateUrl: 'datepicker-inline-calendar-example.html',
  styleUrls: ['datepicker-inline-calendar-example.css'],
})
export class DatepickerInlineCalendarExample {
  selected: Date | null;
}

And the HTML

<mat-card class="demo-inline-calendar-card">
  <mat-calendar [(selected)]="selected"></mat-calendar>
</mat-card>
<p>Selected date: {{selected}}</p>

In the HTML i can set range picker but i dont know how todo multiple select dates. Thanks

Answer 1

You have to use the Date range selection using, eg (like mentioned in the docs):

 <mat-date-range-input [rangePicker]="picker"> <input matStartDate placeholder="Start date"> <input matEndDate placeholder="End date"> </mat-date-range-input> <mat-date-range-picker #picker></mat-date-range-picker>