ngx-timepicker-field 24 hour format Invalid DateTime for 00:00 to 00:59

[ghost]

Hi, I am using your awesome timepicker ngx-timepicker-field in controlOnly mode inside a formArray.

<ngx-timepicker-field
id="{{'openingTime' + i}}"
[format]="24"
formControlName="openingTime"
[controlOnly]="true"
(timeChanged) = "onOpeningOrClosingTimeChanged($event, i)">

When I enter time eg. 00:00 till 00:59, I get Invalid DateTime as value.

Could you please look into it and let me know if I am doing something wrong?

[ghost]

[Agranom]

Hi
Which version do you use?

[ghost]

"ngx-material-timepicker": "^5.3.0",

[Agranom]

Try to update it to 5.4.0. That bug should be fixed

[ghost]

Thanks mate that issue seems fixed with 5.4.0 but when I start updating time eg. HH and I am yet to update minutes, I get error attached.

[Agranom]

I’ll try to fix it today. Keep in touch

[ghost]

sure mate, thanks!

[Agranom]

Can you reproduce it on the demo page?

[ghost]

H
i

Hi, Unfortunately getting some issue on stackblitz to reproduce hence adding images of my project pages.

Basically, I am looping your control in a form array and adding validations on the timeChanged event.

When I start typing hours (and when no minute is added yet), I get the error which I have mentioned in previous message.

Thanks for your prompt help in advance.

[yl-endress]

Hey guys,

I also get this "TypeError: Cannot read property 'replace' of null" error with the latest version 5.4.0:

While having a 24h format and starting with 12:30 o`clock, I click the arrow buttons to 00:30. From 01 -> 00 the error is popping up in a loop.

[nicolas-max492]

Hello, i have got the same issue with ngx-material-timepicker as mention in the first post, I use it like that :

<input placeholder="24hr format" aria-label="24hr format" [ngxTimepicker]="fullTime" [format]="24" readonly>
<ngx-material-timepicker #fullTime>

In the version 5.3.0 when I entered time eg. 00:00 till 00:59, I get Invalid DateTime as value even if I used the clock widget

Now that I have installed the version 5.4.0 it is a bit better but not correct, the time between 00:00 till 00:59 is display like that 24:00 till 24:59

[almeidais]

This timepicker is a great finding.
I agree with @nicolas-max492 regarding the use of 00:00 instead of 24:00.
There are many consistency aspects and business models that would benefit from it.

[Agranom]

@nicolas-max492 @almeidais setting the proper locale will resolve your issue

[Agranom]

@dhirajsonavane @yl-endress can you reproduce it here ? https://agranom.github.io/ngx-material-timepicker/

[ghost]

Hi mate, I am trying to reproduce it on stackblitz but getting some issues with this control.

Here is the link - https://stackblitz.com/edit/angular-4y2qas

[Agranom]

I could reproduce the issue. Will resolve it during this week

[Agranom]

It should be fixed. Update to v5.4.1

[Vatsov]

Yes it's fixed. Thanks a lot.
But the fix is partially.
Initially it's OK and display the correct time, but if enter time eg. 00:00 till 00:59
(timeChanged)="onTimeChanged($event)" return 12:00 till 12:59
It's reproducible on demo page.

[Lorrhanl]

Yes it's fixed. Thanks a lot.
But the fix is partially.
Initially it's OK and display the correct time, but if enter time eg. 00:00 till 00:59
(timeChanged)="onTimeChanged($event)" return 12:00 till 12:59
It's reproducible on demo page.

I also have this problem

[hieung]

Yes it's fixed. Thanks a lot.
But the fix is partially.
Initially it's OK and display the correct time, but if enter time eg. 00:00 till 00:59
(timeChanged)="onTimeChanged($event)" return 12:00 till 12:59
It's reproducible on demo page.

I still have this issues on version 5.4.1

[Agranom]

It's fixed. Update to v5.4.2

[GlitchingCloud]

Still not fixed in v5.4.3

I also don't think picker should not return 24:00 when selecting 00:00

[Agranom]

It's not a picker. It happened after luxon library fixed their formatter. Provide just proper locale like uk-UA

[guliano]

This problem occurs even on a demo page
https://agranom.github.io/ngx-material-timepicker/

Click on second input from top (24h format). This will open popup with picker. Then just cancel it, you will get error like on the screen below:

[Nervniyak]

Not fixed, version 5.4.3, this code is still throwing the error, can confirm that demo page is throwing it too.

<input [ngxTimepicker]="toggleTimepicker" [format]="24">
   <ngx-material-timepicker #toggleTimepicker> </ngx-material-timepicker>

[Agranom]

Please check the issue title. Move your discussion here #311

[Nervniyak]

I'm not sure that the #311 is correct place to discuss it either. This is not a feature request, it's a breaking bug of current package. Should we create a new issue?

[Agranom]

Not need anymore. It's fixed in v5.5.0

[lewis1190]

Doesn't look fixed for me. I'm using 5.5.1 and I'm still getting 24:00 when choosing any time at 12am.

edit: However, users can get 00:00 when using ngx-timepicker-field. I don't believe this is a case of user preference, as it displays 00:00 on one component, then 24:00 on a different component using the same locale.

[LeonPapazoski]

Doesn't look fixed for me. I'm using 5.5.1 and I'm still getting 24:00 when choosing any time at 12am.

ugly fix you can do is:
in HTML: in the input tag add #time and (ngModelChange)="correctTime()"
in ts: add @ViewChild('time', {static: false}) time: ElementRef
and
correctTime(){
let time: string = this.form.controls['time'].value
if(time.startsWith('24:')) {
this.form.controls['time'].setValue(time.replace('24:','00:')) //update form value
this.time.nativeElement.value = time.replace('24:','00:') //update view value
}
}

[Agranom]

You don't need any ugly fixes if you provide a proper locale which supports proper 24hours format

[NupurKinger]

How to set locale/time zone when setting the default value with 24hr format?
this.form.controls['time'].setValue("15:00") throws errror.