0

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.

enter image description here

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

soyjavierdev
  • 31
  • 4
  • it's a bit old, but https://stackoverflow.com/questions/59133977/multiple-date-select-in-material-datepicker-angular/59136402#59136402 – Eliseo Dec 21 '22 at 11:14

1 Answers1

1

You have to use the Date range selection using, e.g. (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>
tuemerkan
  • 58
  • 6