Within the same form, I have two input fields stacked under each other. One is an ngx-mat-datetime-picker and the other is a mat-datepicker. Individually, they function correctly. However, when I open them for the second time, the one I opened first appears with distorted CSS.
Here's the code snippet:
<div class="row">
<div class="col-3">
<mat-form-field appearance="outline">
<mat-label>Schlusstag</mat-label>
<input matInput [ngxMatDatetimePicker]="schlusstag" placeholder="schlusstag"
[formControl]="fc.schlusstag" />
<mat-datepicker-toggle matSuffix [for]="schlusstag"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #schlusstag></ngx-mat-datetime-picker>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-3">
<mat-form-field appearance="outline">
<mat-label>Valuta</mat-label>
<input matInput [formControl]="fc.valuta" placeholder="Valuta" maxlength="10" [matDatepicker]="valuta"
autocomplete="off" />
<mat-datepicker-toggle matSuffix [for]="valuta"></mat-datepicker-toggle>
<mat-datepicker #valuta></mat-datepicker>
</mat-form-field>
</div>
</div>
Scenario 1: I open the ngx-mat-datetime-picker, select a date, then click apply. Next, I open the mat-datepicker, select a time, and everything functions properly. However, upon reopening the ngx-mat-datetime-picker, it displays incorrectly as shown in this image:.
Scenario 2: After selecting a value using the mat-datepicker, I open the ngx-mat-datetime-picker and make another selection. Upon returning to the mat-datepicker, its CSS is disrupted as depicted here:.
I have not encountered any errors in the console and am uncertain why their CSS interferes with one another.