Angular material 15 does not have time or datetime picker icon for selection of time or date

Question

When creating angular 15.0.4 project then added angular material from cli command. Steps to reproduce bug(angular 15.0.4)

1. ng new sample_project
2. ng add @angular/material (indigo-pink.css)
3. added MatFormField and MatInputModule in NgModule My code in component
4. added code to html

<mat-form-field>
    <input matInput type="time">
</mat-form-field>

5. ng serve (does not show the clock icon to select time) view image for details

Here is the stackblitz sample app to reproduce bug https://stackblitz.com/edit/angular-hwx3pq?file=src/app/form-field-overview-example.html

but when I remove mat-form-field and matInput in html just plain html element (), the clock icon will show up.

I have tried in version 14, and everything works. The clock icon shows up with the same code and configurations.

Angular 15.0.4 result:image Angular 14 result:image

Anyone can help me?

Answer 1

It seems like the time picker indicator is hidden by css in this version of the material library. See following style:

.mdc-text-field__input::-webkit-calendar-picker-indicator {
  display: none;
}

You can easily overwrite this behavior in the css of your component as follows:

:host ::ng-deep .mdc-text-field__input::-webkit-calendar-picker-indicator {
  display: block;
}

If you want this behavior globally you will need to add it to your application stylesheet without the :host and ::ng-deep selectors and an important! flag to suppress the default behavior.

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

See screenshot from the developer console below with the relevant css marked in red.

See this updated Stackblitz for a working example.