TimePicker button for Angular Material Input with type time

Question

The MDC-based MatInput hides the native picker indicator.

I would like to recreate this indicator in a modern way with an input with a button

<mat-form-field appearance="outline">
  <mat-label>Material Input with Button</mat-label>
  <input matInput type="time" value="09:00">
  <button matSuffix mat-icon-button aria-label="TimePicker">
    <mat-icon>schedule</mat-icon>
  </button>
</mat-form-field>

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

Is there any way to toggle the native button function with my MatIconButton? The native Button works but looks very outdated and is also not theming.

Or is there another modern way for picking time?

Answer 1

You need to use the showPicker function

As stated in the doc it works for multiple types of input including "time" so this should resolve your issue

Commonly browsers implement it for inputs of these types: "date", "month", "week", "time", "datetime-local", "color", or "file"