How to set text in datetimepicker with ngx-mat-datetime-picker in Angular

Question

I am using the library ngx-mat-datetime-picker from angular-material-components to get datetime selection. It is working well so far, but I need to be able to set text in front of the hours and minutes, like 'HH' and 'MM'.

What I have is:

And what I am looking for is something like this:

Can someone help with that?

This is the code I have:

        <mat-form-field>
          <input matInput [ngxMatDatetimePicker]="dateStart" placeholder="Date Start" [(ngModel)]="dS" disabled>
          <mat-datepicker-toggle matSuffix [for]="dateStart"></mat-datepicker-toggle>
          <ngx-mat-datetime-picker #dateStart disabled="false"></ngx-mat-datetime-picker>
        </mat-form-field>

Alonso Aguet · Accepted Answer · 2022-10-12 15:37:53Z

1

i'm using version @angular-material-components/datetime-picker @7.0.0 and this behavior is included by default, also you can use [stepHour], [stepSecond] and [stepMinute] attributes to control steps size

<ngx-mat-datetime-picker #picker
      [stepHour]="1" 
      [stepSecond]="10" 
      [stepMinute]="5" 
      [enableMeridian]="true">
</ngx-mat-datetime-picker>

answered Oct 12, 2022 at 15:37

Alonso Aguet

111 bronze badge

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

Collectives™ on Stack Overflow

How to set text in datetimepicker with ngx-mat-datetime-picker in Angular

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