Nativescript-angular: 24 hour date format does not work

[ignaciolarranaga]

Problem

The date pipe does not respect the 24 hour format (it always shows 12 hours format)

Context

Verified on iOS emulator / 9.1

• tns-core-modules: 2.3.0
• tns-ios: 2.3.0

How to reproduce it

• Create a sample application (tns create Sample --ng) and for example introduce the same:
  app.component.ts:

import {Component} from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
    public myDate = new Date("Tue Nov 15 2016 21:02:49 GMT-0300 (UYT)");
    ...
}

app.component.html

<StackLayout>
    ...
    <Label [text]="myDate | date:'d/MMM/yy H:m'"></Label>
    <Label [text]="myDate | date:'d/MMM/yy j:m'"></Label>
</StackLayout>

You should see H:m uses 12 hours format instead of 24, check out the screenshot:

Verified on plain angular just in case and it does work:

[ignaciolarranaga]

Please note also the 12 hours format is incorrect, even for 'jm' it appears "09 PM02" instead of "9:02 PM", i.e. PM wrongly placed and 09 instead of just 9.

[NickIliev]

Hey @ignaciolarranaga

In Angular2, there are some predefined DatePipes which you can use.
For example:

<StackLayout>
    <Label [text]="myDate | date"></Label><!-- output is 'Jun 15, 2015' -->
    <Label [text]="myDate | date:'medium'"></Label><!-- output is 'Jun 15, 2015, 9:43:11 PM' equivalent to 'yMMMdjms' (e.g. Sep 3, 2010, 12:05:08 PM for en-US)-->
    <Label [text]="myDate | date:'short'"></Label><!-- output is '9:43 PM' equivalent to 'yMdjm' (e.g. 9/3/2010, 12:05 PM for en-US) -->
    <Label [text]="myDate | date:'shortTime'"></Label><!-- output is '9:43 PM' equivalent to 'jm' (e.g. 12:05 PM for en-US)-->
    <Label [text]="myDate | date:'fullDate'"></Label><!-- equivalent to 'yMMMMEEEEd' (e.g. Friday, September 3, 2010 for en-US)-->
    <Label [text]="myDate | date:'longDate'"></Label><!-- equivalent to 'yMMMMd' (e.g. September 3, 2010 for en-US) -->
    <Label [text]="myDate | date:'mediumDate'"></Label><!-- equivalent to 'yMMMd' (e.g. Sep 3, 2010 for en-US)-->
    <Label [text]="myDate | date:'shortDate'"></Label><!--  equivalent to 'yMd' (e.g. 9/3/2010 for en-US) -->
    <Label [text]="myDate | date:'mediumTime'" ></Label><!-- equivalent to 'jms' (e.g. 12:05:08 PM for en-US) -->

    <Label [text]="myDate | date:'mmss'"></Label><!--  output is '43:11' -->
</StackLayout>

However, it really does not shows the 24 hour format as expected. Will investigate further and post additional info.

[ignaciolarranaga]

Hi @NickIliev, I might not explain it clearly, if you place this:
<Label [text]="myDate | date:'d/MMM/yy H:m'"></Label>
It doesn't show a 24 hour format, but instead the hour in 12 hour format but without the AM/PM

I also include in the same example the other format:
<Label [text]="myDate | date:'d/MMM/yy j:m'"></Label>
to show that the variable actually has the right value (21:02)

[NickIliev]

@ignaciolarranaga Yes it took me a while to get into the problem but now it is clear - the 24format is not working. Furthermore, I've noticed the following at my side (reproducible in both iOS and Android)

if myDate is created with new Date() the result will be the exact hour but always in 12-hour format.

However, if myDate is created with new Date("Tue Nov 15 2016 21:02:49 GMT-0300 (UYT)"); it will be parsed as a totally wrong date (at my side the result is 16.Nov.2016 02.0249 AM

Possibly related to:

viktor.skarlatov [5:31 PM]
The problem is JSON.stringify()
JSON.stringify(new Date(2015, 2, 2, 0)) and new Date(2015, 2, 2, 0).toString() produce completely different results.

and similar issue in telerik-ui data form

[ignaciolarranaga]

Oh, got it. I didn't notice that, probably with the epoch time would be better to reproduce it (but quite less readable).
I didn't put myDate = new Date() because it will depend on the time you executed :)

[nsndeck]

I've just made a fix inside nativescript-intl plugin. Version 0.0.5 should be OK.
@ignaciolarranaga Could you please try it on your side. Please note that nativescript-angular has dependency to this plugin so you have to install 0.0.5 version before installing nativescript-angular (at least with node 6+ it works).

[radhakrishnan0404]

thanks @NickIliev it works great

[mutazmq]

I had the same issue and the below hack got it right

<Label *ngIf="student.created"
    <FormattedString>
        <Span [text]="student.created| date:'d MMM, '" ></Span>
        <Span [text]="student.created| date:'jm'" ></Span>
    </FormattedString>
</Label>

[shaikhspear16]

I face the same issue. Any fix other than Date Pipes?
I want to display my date as dd/mm
Using Pipe gives the same issue {{myDate | date: 'dd/MM'}}

where myDate = "2018-02-10T20:28:58.303"
returns "11/02"

[sanidz]

Solution is really simple, just use 'HH' for 24hour format and 'hh' for 12.
{{"field | date: 'HH.mm'" }}

@shaikhspear16
For custom formats just use multiple interpolations like...
{{myDate | date: 'dd'}}/{{myDate | date: 'MM'}}

[faisalSiddiqui03]

Solution is really simple, just use 'HH' for 24hour format and 'hh' for 12.
{{"field | date: 'HH.mm'" }}

@shaikhspear16
For custom formats just use multiple interpolations like...
{{myDate | date: 'dd'}}/{{myDate | date: 'MM'}}

this solved my issue, thanks. it should have been in the official docs