Search code examples
htmlangularformsangular-materialtimepicker

TimePicker button for Angular Material Input with type time

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?

enter image description here

Solution

  • 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"