Components: can i use two MdDatepicker in one component?

[arisbro8]

This is my code :

<md-input-container class="example-full-width">
      <input class="full-width" mdInput formControlName="JoinDateUtc" [mdDatepicker]="picker" placeholder="Join Date">
      <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
      <md-datepicker #picker></md-datepicker>
</md-input-container>

<md-input-container class="example-full-width">
      <input class="full-width" mdInput formControlName="LeftDateUtc" [mdDatepicker]="picker" placeholder="Left Date">
      <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
      <md-datepicker #picker></md-datepicker>
</md-input-container>

and i get an error :
Error: An MdDatepicker can only be associated with a single input.

[arisbro8]

solved. thanks

[vtt-lair]

@arisbro8 How did you solve it?

[willshowell]

@Werner-Dohse probably by creating two separate mat-datepickers and assigning them different template references.

[ziaongit]

@willshowell just use different ID for each
Example:

<md-input-container class="example-full-width">
      <input class="full-width" mdInput formControlName="JoinDateUtc" [mdDatepicker]="picker" placeholder="Join Date">
      <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
      <md-datepicker #picker></md-datepicker>
</md-input-container>

<md-input-container class="example-full-width">
      <input class="full-width" mdInput formControlName="LeftDateUtc" [mdDatepicker]="pickerTo" placeholder="Left Date">
      <md-datepicker-toggle mdSuffix [for]="pickerTo"></md-datepicker-toggle>
      <md-datepicker #pickerTo></md-datepicker>
</md-input-container>

I changed the ID to pickerTo at three places

[mdDatepicker]="pickerTo"
mdSuffix [for]="pickerTo"
<md-datepicker #pickerTo>

[jabbar86]

Use like this :
<mat-form-field> <input matInput [matDatepicker]="picker1" placeholder="Choose a start date" [(ngModel)]="inputStartDate"> <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle> <mat-datepicker #picker1 [startAt]="startDate"></mat-datepicker> </mat-form-field>

<mat-form-field> <input matInput [matDatepicker]="picker2" placeholder="Choose an end date" [(ngModel)]="inputEndDate"> <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle> <mat-datepicker #picker2 [startAt]="endDate"></mat-datepicker> </mat-form-field>

[manojadams]

The problem is solved after using the code like this:

(i.e.) Changing picker to picker2 when used for the second time.

<md-input-container class="example-full-width">
      <input class="full-width" mdInput formControlName="JoinDateUtc" [mdDatepicker]="picker" placeholder="Join Date">
      <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
      <md-datepicker #picker></md-datepicker>
</md-input-container>

<md-input-container class="example-full-width">
      <input class="full-width" mdInput formControlName="LeftDateUtc" [mdDatepicker]="picker2" placeholder="Left Date">
      <md-datepicker-toggle mdSuffix [for]="picker2"></md-datepicker-toggle>
      <md-datepicker #picker2></md-datepicker>
</md-input-container>

[VSV6]

Thank you so much. It helped me :)

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}