Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
otaran opened this issue May 22, 2017 · 4 comments

Comments

@otaran
Copy link

otaran commented May 22, 2017

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

@NickIliev
Copy link

@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
Copy link

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

@otaran
Copy link
Author

otaran commented May 23, 2017

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

@NickIliev
Copy link

NickIliev commented May 23, 2017

@otaran I have just moved the issue in the plugin's repository.
This issue was moved to NativeScript/nativescript-intl#13

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants