<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
The date pipe output is incorrect when custom formats are used with various locales. The current implementation will use Intl.DateTimeFormat to localize DateTime information, and then use string manipulation to extract individual components as the output is not granular enough. The bugs come mainly from assumptions about how the format looks across all locales.</p>
<p dir="auto">I've provided unit tests as a repro- the expected results are valid on Chrome, but not necessarily IE - (different browsers format locales differently, including the order of components, number system and alphabets used.) See the full tests created while investigating the issue at <a href="https://gist.github.com/gary-b/bdc67fae4767c7da08ee93965a955fa5">https://gist.github.com/gary-b/bdc67fae4767c7da08ee93965a955fa5</a></p>
<p dir="auto">assume date = new Date(2015, 5, 15, 9, 3, 1);<br>
1.The day part ('a') output fails in various locales</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// When Intl.DateTimeFormat puts the day part in front of the hour for the locale
pipe = new DatePipe('hu');
expect(pipe.transform(date, 'a')).toEqual('de.'); // outputs 9
// When Intl.DateTimeFormat has a space in the day part string itself for the locale
pipe = new DatePipe('sr');
expect(pipe.transform(date, 'a')).toEqual('пре подне'); // outputs npe"><pre class="notranslate"><code class="notranslate">// When Intl.DateTimeFormat puts the day part in front of the hour for the locale
pipe = new DatePipe('hu');
expect(pipe.transform(date, 'a')).toEqual('de.'); // outputs 9
// When Intl.DateTimeFormat has a space in the day part string itself for the locale
pipe = new DatePipe('sr');
expect(pipe.transform(date, 'a')).toEqual('пре подне'); // outputs npe
</code></pre></div>
<p dir="auto">See the Intl.ts hourClockExtractor function.</p>
<p dir="auto">2.The 2 digit formatting (eg "hh") outputs a mix of numbering systems</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="pipe = new DatePipe('mr');
expect(pipe.transform(date, 'hh')).toEqual('०९'); // outputs 0९"><pre class="notranslate"><code class="notranslate">pipe = new DatePipe('mr');
expect(pipe.transform(date, 'hh')).toEqual('०९'); // outputs 0९
</code></pre></div>
<p dir="auto">The '0' is hard coded into angular's Intl.js digitModifier function.</p>
<p dir="auto">3.The timezone output fails with certain locales</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// When the browser puts the hour after the timezone for the locale
pipe = new DatePipe('zh');
expect(pipe.transform(date, 'Z')).toEqual('GMT+1'); // outputs +19时
// When Intl.DateTimeFormat outputs an hour identifier between the hour and the timezone for the locale, eg for fr you get 09 h UTC+1
pipe = new DatePipe('fr');
expect(pipe.transform(date, 'Z')).toEqual('UTC+1'); // outputs h UTC+1"><pre class="notranslate"><code class="notranslate">// When the browser puts the hour after the timezone for the locale
pipe = new DatePipe('zh');
expect(pipe.transform(date, 'Z')).toEqual('GMT+1'); // outputs +19时
// When Intl.DateTimeFormat outputs an hour identifier between the hour and the timezone for the locale, eg for fr you get 09 h UTC+1
pipe = new DatePipe('fr');
expect(pipe.transform(date, 'Z')).toEqual('UTC+1'); // outputs h UTC+1
</code></pre></div>
<p dir="auto">See the Intl.ts timeZoneGetter function.</p>
<p dir="auto">4.The era output doesn't work on any locale I tried</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="expect(pipe.transform(date, 'G')).toEqual('A');//outputs 6 15, 2015 A"><pre class="notranslate"><code class="notranslate">expect(pipe.transform(date, 'G')).toEqual('A');//outputs 6 15, 2015 A
</code></pre></div>
<p dir="auto">Angular's Intl.ts assumes the Intl.DateTimeFormat object will output the era on its own, it doesn't.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Broken.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Windows 10</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
Angular master</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]<br>
Chrome (also have details of IE output in the gist)</p>
</li>
</ul>
<p dir="auto">Here is the list of features / fixes planned for i18n.</p>
<p dir="auto">If you want new i18n features to be added to Angular, don't hesitate to ask below and I'll let you know if that's feasible and if you should open an issue for it.<br>
If you have a bug, open an issue (no need to discuss about it here).</p>
<h1 dir="auto">For Ivy</h1>
<p dir="auto"><em>Note: runtime translations and most of the new features will only be available with ivy</em></p>
<h3 dir="auto">Features</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Runtime i18n (one bundle for all locales with AOT) - [<strong>working on it</strong>]</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ID migration tool (for when we break ID generation) - [PR <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="218214763" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/15621" data-hovercard-type="pull_request" data-hovercard-url="/angular/angular/pull/15621/hovercard" href="https://github.com/angular/angular/pull/15621">#15621</a>]</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Use translation strings outside of a template - <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="175439759" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/11405" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/11405/hovercard" href="https://github.com/angular/angular/issues/11405">#11405</a> - [<strong>working on it</strong>]</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Generate the same ID for xmb/xlf - <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="213978995" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/15136" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/15136/hovercard" href="https://github.com/angular/angular/issues/15136">#15136</a> [<strong>breaking change</strong> PR <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="218214763" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/15621" data-hovercard-type="pull_request" data-hovercard-url="/angular/angular/pull/15621/hovercard" href="https://github.com/angular/angular/pull/15621">#15621</a>]</li>
</ul>
<h3 dir="auto">Issues</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Ignore ph/ICU expressions when generating i18n ids - <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="217791085" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/15573" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/15573/hovercard" href="https://github.com/angular/angular/issues/15573">#15573</a> [<strong>breaking change</strong> PR <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="218214763" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/15621" data-hovercard-type="pull_request" data-hovercard-url="/angular/angular/pull/15621/hovercard" href="https://github.com/angular/angular/pull/15621">#15621</a>, <strong>blocked</strong>]</li>
</ul>
<h1 dir="auto">Not prioritized</h1>
<h3 dir="auto">Features</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Allow ICU messages in attributes - <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="289452162" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/21615" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/21615/hovercard" href="https://github.com/angular/angular/issues/21615">#21615</a> [<strong>blocked</strong>, requires an update of the parser]</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Improve Html Parser (add a new INTERPOLATION_TOKEN to the lexer output for interpolations) - <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="161032108" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/9340" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/9340/hovercard" href="https://github.com/angular/angular/issues/9340">#9340</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Opt out of translation (use translate="false" attribute) - <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="144329935" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/7814" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/7814/hovercard" href="https://github.com/angular/angular/issues/7814">#7814</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> I18nPluralPipe should localize numbers when using "#" - <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="178106709" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/11761" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/11761/hovercard" href="https://github.com/angular/angular/issues/11761">#11761</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ICU plural format (add offset &amp; #) - <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="159464914" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/9117" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/9117/hovercard" href="https://github.com/angular/angular/issues/9117">#9117</a> [<strong>blocked</strong>, requires "Allow escaping ICU messages - <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="160791495" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/9286" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/9286/hovercard" href="https://github.com/angular/angular/issues/9286">#9286</a>"]</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Implement ICU ordinal messages</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Auto detect TRANSLATIONS_FORMAT - <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="177638650" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/11695" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/11695/hovercard" href="https://github.com/angular/angular/issues/11695">#11695</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Providing TRANSLATIONS at NgModule level - <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="175687310" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/11431" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/11431/hovercard" href="https://github.com/angular/angular/issues/11431">#11431</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Add scientific number pipe - <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="244631254" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/18276" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/18276/hovercard" href="https://github.com/angular/angular/issues/18276">#18276</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Opening the API - [PR <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="205159165" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/14281" data-hovercard-type="pull_request" data-hovercard-url="/angular/angular/pull/14281/hovercard" href="https://github.com/angular/angular/pull/14281">#14281</a>]</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Throw during i18n extraction if two different contents have the same @<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/id/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/id">@id</a> - <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="244598460" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/18272" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/18272/hovercard" href="https://github.com/angular/angular/issues/18272">#18272</a></li>
</ul>
<h3 dir="auto">Issues</h3>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Ignore leading and trailing spaces - <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="191946966" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/13114" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/13114/hovercard" href="https://github.com/angular/angular/issues/13114">#13114</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> allow numbers for select-icu - <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="238993590" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/17799" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/17799/hovercard" href="https://github.com/angular/angular/issues/17799">#17799</a></li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Allow escaping ICU messages - <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="160791495" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/9286" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/9286/hovercard" href="https://github.com/angular/angular/issues/9286">#9286</a> [<strong>blocked</strong>, requires an update of the parser]</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Template Parser: Error when passing object literal as pipe parameter - <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="162159077" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/9571" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/9571/hovercard" href="https://github.com/angular/angular/issues/9571">#9571</a></li>
</ul>