I have an Input of type 'datetime-local' inside a matFormField, like this:
<mat-form-field>
<input
formControlName="dateTimeSelect"
matInput
type="datetime-local"
id="date"
name="date"
required
/>
</mat-form-field>
The form should have a calender icon as a suffix that, upon click, opens the date/time picker something like this:
This was working fine when I was using Angular v14, but since upgrading my app to Angular v16 it has stopped working.
If I remove the input from its matFormField wrapper, it works as expected. However, inside the matFormField the suffix icon doesn't appear.
I've tried changing my global styling of .mat-mdc-form-field and .mat-mdc-form-field-icon-suffix to see if the suffix icon is perhaps hidden, but it seems that the suffix has been completely removed from the input since updating Angular.
I understand that one solution would be to use a matDatepicker, but I'm trying to avoid that because it doesn't offer a time picker option.
For some reasons the button is hidden somehow but it is still there. In order to show it just add this CSS:
.mdc-text-field__input::-webkit-calendar-picker-indicator {
display: block !important;
}