Date pipe with 'medium' format adds/truncates zero from single-digit hours and seconds

[NickIliev]

From @otaran on May 22, 2017 19:39

Steps to reproduce

1. Create date with hours < 10 and seconds < 10.
2. Display this date with date pipe and medium format:

@Component({
    template: `<Label [text]="now | date:'medium'"></Label>
})
export class DateComponent {
    now = Date.parse('2017-05-22T07:05:09Z');
}

Expected result

The date doesn't have leading zero in hours, has leading zero in seconds and has a comma after year: May 22, 2017, 7:05:09 AM (in UTC timezone).

Actual result

The date has leading zero in hours, doesn't have leading zero in seconds and doesn't have a comma after year: May 22, 2017 07:05:9 AM (in UTC timezone).

Notes

Plunker to demonstrate expected Angular behavior: https://embed.plnkr.co/eF8VFN/
Nativescript app to demonstrate actual behavior: tns-date-pipe.zip

Copied from original issue: NativeScript/nativescript-angular#815

[NickIliev]

@otaran thank you for reporting this one! After creating this test application I can confirm that indeed using Date pipe with format medium or mediumTime is not rendering the expected result.

example:

<Label [text]="now | date:'medium'"></Label> <!-- NOPE (seconds and missing comma after year!) 'medium': equivalent to 'yMMMdjms' (e.g. Sep 3, 2010, 12:05:08 PM for en-US) -->
<Label [text]="now | date:'short'"></Label> <!--OK 'short': equivalent to 'yMdjm' (e.g. 9/3/2010, 12:05 PM for en-US)-->
<Label [text]="now | date:'fullDate'"></Label> <!-- OK'fullDate': equivalent to 'yMMMMEEEEd' (e.g. Friday, September 3, 2010 for en-US)-->
<Label [text]="now | date:'longDate'"></Label> <!--OK 'longDate': equivalent to 'yMMMMd' (e.g. September 3, 2010 for en-US) -->
<Label [text]="now | date:'mediumDate'"></Label> <!--OK 'mediumDate': equivalent to 'yMMMd' (e.g. Sep 3, 2010 for en-US)-->
<Label [text]="now | date:'shortDate'"></Label> <!-- OK 'shortDate': equivalent to 'yMd' (e.g. 9/3/2010 for en-US)-->
<Label [text]="now | date:'mediumTime'"></Label> <!-- NOPE (seconds!) 'mediumTime': equivalent to 'jms' (e.g. 12:05:08 PM for en-US)-->
<Label [text]="now | date:'shortTime'"></Label> <!-- OK 'shortTime': equivalent to 'jm' (e.g. 12:05 PM for en-US) -->

where now is the same as in the above example

now = Date.parse('2017-05-22T07:05:09Z');

[NickIliev]

@otaran indeed this appears to be a limitation coming from nativescript-intl plugin. Currently, you can use all other Date pipes apart from medium and mediumTime where the issue with the seconds appears.

[NickIliev]

From @otaran on May 23, 2017 14:16

@NickIliev thanks for verifying this! Should I report this issue to nativescript-intl project?

[otaran]

@NickIliev just FYI this issue is reproducible on both Android and iOS.