Multiple date select in Angular material 7

Question

Scenario: Need to select multiple date in the date picker in angular material.

currently this scenario is not there in the official documentation in DatePicker Examples

Question : How can I implement the multiple date select with the material design?

I though of modifying the existing implementation of angular material, but have no idea where to start.

Any leads would be very helpful.

Use primeng Date range picker https://www.primefaces.org/primeng/#/calendar — Pardeep Jain, Dec 11 '18 at 05:56
Yeah, thought of that, but I want to go with angular material. — Ranjith Varatharajan, Dec 11 '18 at 05:58
I meant, I want with the material design. ngPrime uses bootstrap right. — Ranjith Varatharajan, Dec 11 '18 at 06:04
Actually this app was built using angular material. so it would be better to go in that way. — Ranjith Varatharajan, Dec 11 '18 at 06:41
This question is outdated. Client went with single date selection. Thanks again. — Ranjith Varatharajan, Feb 14 '19 at 12:07

score 0 · Answer 1 · answered Nov 05 '19 at 03:39

you have to name the datepickers seperately like picker1 and picker2 like below.

<mat-form-field>
  <input matInput [matDatepicker]="picker1" placeholder="Start date">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

<mat-form-field>
  <input matInput [matDatepicker]="picker2" placeholder="End date">
  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
  <mat-datepicker #picker2></mat-datepicker>
</mat-form-field>

like this you can have multiple date select in single page.

seawave_23 · Answer 2 · 2019-09-12T17:28:53.650

-1

Finally, this helped me out: mat-datepicker inside *ngFor. Take an ngFor and use the index as reference for the date-picker. In case, the real index - not the datepicker's viewRef - is needed, too, the index has to be saved in another variable:

<div *ngFor="let date of formArray.controls; let datePickerViewRef = index; let i = index" class="date">
         <input matInput [matDatepicker]="datePickerViewRef" placeholder="Choose a date" readonly [formControl]="date">
         <mat-datepicker-toggle matSuffix [for]="datePickerViewRef"></mat-datepicker-toggle>
         <mat-datepicker #datePickerViewRef></mat-datepicker>
         <button(click)="removeDate(i)">delete</button>
</div><button (click)="addDate()"></button>

edited Sep 12 '19 at 17:28

answered Jul 10 '19 at 16:07

seawave_23

1,169
2
12
23

can you add some explaination – shyam_ Sep 07 '19 at 21:15
You basically just implement a list of inputs (datepickers) with this, and the whole formArray will return you an array of dates in the end, which you want to have as I understood. So when the user wants to add a date, he will get a new datepicker input by clicking the addDate button (behind has to be a function which will push a new formcontrol into the array) and can enter the new date there. If he wants to delete a date, he can just use the delete button visible in the example above. – seawave_23 Sep 12 '19 at 17:27

Multiple date select in Angular material 7

2 Answers2