question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DatePipe filter is giving hours greater than 24 - angular 2

See original GitHub issue

Below snippet is giving the hours value greater than 24 (Jun 02, 2020 24:17) <label class="label-value">{{1591037256657 | date:'MMM dd, y HH:mm'}}</label> I have even tried passing Date() instead of milliseconds, that also did not help. Please find the anuglar dependencies which I am using.

"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"bootstrap": "3.3.6",
"core-js": "2.4.1",
"font-awesome": "4.7.0",
"paysafe-admin-shell-commons": "1.3.3",
"primeng": "1.1.4",
"ng2-ckeditor": "1.2.2",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.37",
"zone.js": "0.6.21"
}

I did google lot of time for the issue before asking here, but nothing helped. I have tried applying datePipe for same milliseconds in online for other angular version, it worked. Currently I am working on a big project and upgrading the version wont be feasible solution. Is there any way we can make this work as it suppose to ?

Thank you for your time.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
LukeFarrawellcommented, Jun 3, 2020

@ThirupathRao Without diving into the source code of Angular 2.0, this might be a browser based bug. I am unsure of how the formatting was done in Angular 2.0, but it was mentioned it was done different then in newer versions of Angular, so I am providing another area for you to research the problem.

Are you seeing the 24:17 in all browsers or just chromium based browsers?

I discovered chromium has a bug in its date formatting a while ago, I went to submit a bug report but it already existed. When using date.toLocalTimeString and passing in the options of { hour12: false }, the output shows 24:XX instead of the expected 00:XX.

See the below example.

let date = new Date();
date.setHours( 0, 15, 15 );
date.toLocaleTimeString( "en", { hour12: false } );
// output: "24:15:15"

You can track this bug here

1reaction
pkozlowski-opensourcecommented, Jun 3, 2020

Thnx for the summary @LukeFarrawell - I agree with your assessment.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular Date Pipe & formatting dates in Angular with examples
Angular date pipe used to format dates in angular according to the given date formats,timezone and country locale information.
Read more >
How to make the time displayed in 24 hour time format?
For 24Hr format, you need to use H instead of h . your filter should be date:'d/MM/yyyy H:mm'. You can find more option...
Read more >
DatePipe - Angular
Field type Format Description Era G, GG & GGG Abbreviated GGGG Wide GGGGG Narrow
Read more >
angular date pipe 24 hour format - Code Grepper
todayDate | date: 'dd/MM/yyyy HH:mm'}} : equivalent to (23/12/2020, 15:03).
Read more >
Angular Tips: Formatting Dates with a Custom Date Pipe (dd ...
The date pipe accepts a format (optional parameter) that can be customized as showed in the code above (day/month/year) and we can also...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found