Angular material 15 matInput type datetime-local is missing native datetime picker

Question

I'm using in a mat-form-field the input filed (with mat-input) with type "datetime-local" and until Angular 14 there was a button for a native datetime Picker. But since I upgraded to Angular 15 and did the Material MDC migration this button is missing and can't find any option to bring this datetime picker back.

I googled but found nothing. I would like to continue using the datetime picker

This is my code:

https://stackblitz.com/edit/angular-ivy-jzgzsq

<mat-form-field class="half-width" appearance="fill">
  <mat-label>Donwtime Start</mat-label>
  <input
    matInput
    placeholder="dd.MM.yyyy hh:mm"
    formControlName="startDateInput"
    type="datetime-local"
    [value]="startDate | date : 'yyyy-MM-ddTHH:mm'"
    (change)="convertStartDate($event)"
    required
    tabindex="1"
  />
  <mat-error *ngIf="controlGroup.get('startDateInput').invalid">
    Bitte wähle ein Startdatum für die Downtime aus
  </mat-error>
</mat-form-field>

Angular 14

Angular 15 with Material MDC migration

Answer 1

The button is there in the underlying native input element but hidden for some reason, maybe browser compatibility. For our purposes the application only has to work in modern webkit browsers so we can restore the button with the following global style:

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