ngxDaterangepickerMd is not visible after migrating to MDC-based Angular Material Components

I am using also ngx-daterangepicker-material library, and I have updated with angular material v15 from legacy components to MDC components. After this migration the date picker is no longer visible, or it does not work.

I have tried adding appearance="outline" in the mat-form-field and at least it is visible but underneath everything. Even so I don't want it to be outline, but without adding an appearance o with appearance="fill" it does not appear.

<mat-form-field>
<mat-label></mat-label>
<input matInput placeholder="Date" ngxDaterangepickerMd [(ngModel)]="initialDates"
[locale]="locale" [ranges]="ranges" [minDate]="minDate" [alwaysShowCalendars]="true" [autoApply]="true"
[showDropdowns]="true" [showWeekNumbers]="true" opens="center" [linkedCalendars]="false" readonly="true"
(rangeClicked)="rangeClicked($event)" (startDateChanged)="setStart($event)"
(endDateChanged)="setEnd($event)" (datesUpdated)="onClose()"/>
</mat-form-field>


I have also tried adding the following rule:

input.mat-mdc-input-element::-webkit-calendar-picker-indicator {
display: block !important;
}


In addition to this one which is the one suggested in the migration guide:

.mdc-text-field__input::-webkit-calendar-picker-indicator {
display: block !important;
}

Continue reading...