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

I'll resolve it in 30 min

from ngx-material-timepicker.

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?

from ngx-material-timepicker.

Yeah, I see. I found out the problem. Have you installed the latest version of timepicker?

from ngx-material-timepicker.

Hi is this resolved?

from ngx-material-timepicker.

Have you installed the latest version of timepicker?

Yes, I'm using [email protected] and @angular/[email protected].

from ngx-material-timepicker.

I hope I fixed it. Update timepicker to 2.2.4 and try

from ngx-material-timepicker.

After updating the timepicker to 2.2.4 the behaviour did indeed change, now the input field displays 11:30 PM (now includes the "PM" part). However this is the same behaviour as [format]="12" would be. I am using [format]="24" which I would assume should make the input field display 23:30 in this case.

from ngx-material-timepicker.

Are you setting the value in AM/PM format? Because I set that and it works fine
<input aria-label="default time" [ngxTimepicker]="defaultTime" [value]="'05:11 pm'" [format]="24" readonly> <ngx-material-timepicker #defaultTime></ngx-material-timepicker>

from ngx-material-timepicker.

I'm not setting a value at all, this form should be empty on page load.

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

from ngx-material-timepicker.

So how do you get 11:30 PM ?

from ngx-material-timepicker.

Full example:

I set the form field to 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>

The form field appears correctly, it has a placeholder since there is no value set (which is also correct): ✔️

Clicking on the form field correctly opens the timepicker UI: ✔️

I set it to 11:30 PM which later should translate to 23:30 because I'm using the 24 hour format: ✔️

The value of the field is now set to 11:30 PM instead of 23:30 ❌

The value of 11:30 PM would be correct if I was using the 12 hour format. But I'm using the 24 hour one.

from ngx-material-timepicker.

Look at the demo https://agranom.github.io/ngx-material-timepicker/ there is an example with 24-hours format ant it works fine.

from ngx-material-timepicker.

Look at the demo https://agranom.github.io/ngx-material-timepicker/ there is an example with 24-hours format ant it works fine.

Oh I think I figured out what's happening:

• I'm using ngModel to get the value that the user set
• Upon clicking "OK" on the timepicker UI the value of the is set to 23:30
• At the same time the angular model is updated with the internal value that the timepicker uses, which is 11:30 PM (the format of this internal value is not affected by setting the 24 hour format)
• Since the model now says 11:30 PM that causes angular to update the with the value from the model, setting it to 11:30 PM

If I change [(ngModel)]="input.interview_time" to (ngModel)="input.interview_time" to make it a one-way binding instead of a two-way binding then the correctly says 23:30. However this has a side effect of losing the two-way data binding of course, which is a very convenient feature if you plan on saving and reloading the data in your form multiple times during runtime.

I am aware that I can use the [value] attribute to set the value of the timepicker in this case, but that kinda overlaps with the functionality that the two-way binding would provide by default on an ngModel.

Could you add one more example to that page that would show what is the official way of using this library when someone would also like to leverage ngModel to some degree?

from ngx-material-timepicker.

Just a plain object, I'm not using form controls here.

input = {};

from ngx-material-timepicker.

Ok nevermind I left [value]="input.interview_time" by accident when I tested some stuff for my previous comment.

Yes, it seems to work as expected when I use two-way binding. 👍

Sorry about this and thank you for your help!

from ngx-material-timepicker.

I am using toggle button i need like this but format is not working

                <div class="input-group mb-3 col-sm-8">
                  <input  formControlName="arrivalTime" #arritime  (blur)="validateTime($event,'arrivalTime')"  placeholder="HH:MM" class="form-control form-control-sm" >
             
                  <div class="input-group-append">
                   <span class="input-group-text " id="basic-addon1"><input  *ngIf="arrivalBtn"  (change)="addcurrentTime()" type="checkbox" value="" >
                    <ngx-material-timepicker-toggle   [for]="arrivalTime"></ngx-material-timepicker-toggle>
                    <ngx-material-timepicker   (click)="onChanges(arrivalTime)"  #arrivalTime [format]="24" ></ngx-material-timepicker>
                  </span>
                  </div>
                </div>

from ngx-material-timepicker.

the problem mentioned here from version 5 but in the below versions this problem not exist

from ngx-material-timepicker.