Angular material timepicker insert a minute gap

Question

I have this material component in Angular 15.

              <mat-form-field appearance="outline">
                <mat-label>{{'DOCTOR_AREA.START_TIME' | translate}} </mat-label>
                <input type="time" matInput  min="08:00" max="20:00" id="StartTime" formControlName="StartTime" [(ngModel)]="currentSlot.StartTime"/>
              </mat-form-field>

I need to insert a minute gap of 30 minutes.

How can I do?

score 0 · Answer 1 · answered Aug 25 '23 at 08:09

0

You need to add step attribute with value of 1800 seconds:

<mat-form-field appearance="outline">
  <mat-label>{{'DOCTOR_AREA.START_TIME' | translate}} </mat-label>
    <input type="time" matInput min="08:00" max="20:00" step="1800" id="StartTime" formControlName="StartTime" [(ngModel)]="currentSlot.StartTime"/>
</mat-form-field>

answered Aug 25 '23 at 08:09

msrumon

1,250
1
10
27

Hi, I try but nothing change – Giulia francalancia Aug 25 '23 at 08:35
Of course something happens. Highlight the minute portion in the field and use keyboard's `↑` or `↓` keys to see it in action. – msrumon Aug 25 '23 at 11:36

Angular material timepicker insert a minute gap

1 Answers1