8

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.

Ranjith Varatharajan
  • 1,596
  • 1
  • 33
  • 76

2 Answers2

0

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.

Shankarlal D
  • 169
  • 1
  • 7
-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>
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