ngx-material-timepicker: Setting [format]="24" will hide the "AM/PM" from the UI but won't actually use 24 hour format

<mat-form-field>
  <input matInput name="interview_time" [(ngModel)]="input.interview_time" placeholder="Time" [ngxTimepicker]="interview_time" [format]="24">
  <ngx-material-timepicker #interview_time></ngx-material-timepicker>
</mat-form-field>

Expected result:

Setting 11:30 PM using the timepicker UI would set the value of the <input> to 23:30 on the UI.

Actual result:

Setting 11:30 PM using the timepicker UI sets the value of the <input> to 11:30 on the UI. It simply removes the “am/pm” part, making it impossible for the user to tell the difference between them afterwards.

Notes:

It correctly sets the ngModel to string 11:30 PM in both cases.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 17 (7 by maintainers)

Most upvoted comments

I try it with two way binding and it works fine. <input placeholder="24hr format" aria-label="24hr format" [ngxTimepicker]="fullTime" [format]="24" [(ngModel)]="test" readonly> <ngx-material-timepicker #fullTime></ngx-material-timepicker> What does the input mean in your input.interview_time? Is that just object or a form control?

Agranom on Jul 10, 2018

I’ll resolve it in 30 min

Agranom on Jul 10, 2018