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?

bmtheo · Accepted Answer · 2023-11-24 09:56:29Z

2

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"

edited Nov 24, 2023 at 9:56

answered Nov 24, 2023 at 9:51

bmtheo

1,2391 gold badge11 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TimePicker button for Angular Material Input with type time

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related