Search code examples
angulardatetimeangular-materialdatetimepickerangular15

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

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>

Agnular 14
Angular 14

Angular 15 and Material MDC migration
Angular 15 with Material MDC migration

Solution

  • 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;
}