docs(aio): remove unused partial file
This commit is contained in:
parent
1282da1b14
commit
c3247c64a4
|
@ -1,239 +0,0 @@
|
||||||
<header class="hero background-sky"><h1 class="hero-title is-standard-case">DatePipe</h1><span
|
|
||||||
class="badge is-stable">Stable</span>
|
|
||||||
<div class="clear"></div>
|
|
||||||
<h2 class="hero-subtitle">Pipe</h2></header>
|
|
||||||
<article class="l-content-small grid-fluid docs-content">
|
|
||||||
<div layout="row" layout-xs="column" class="row-margin">
|
|
||||||
<div flex="20" flex-xs="100"><h2 class="h2-api-docs">What it does</h2></div>
|
|
||||||
<div flex="80" flex-xs="100"><p>Formats a date according to locale rules.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div layout="row" layout-xs="column" class="row-margin">
|
|
||||||
<div flex="20" flex-xs="100"><h2 class="h2-api-docs">How to use</h2></div>
|
|
||||||
<div flex="80" flex-xs="100"><p><code>date_expression | date[:format]</code></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div layout="row" layout-xs="column" class="row-margin">
|
|
||||||
<div flex="20" flex-xs="100"><h2 class="h2-api-docs">NgModule</h2></div>
|
|
||||||
<div flex="80" flex-xs="100" class="code-links">CommonModule
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div layout="row" layout-xs="column" class="row-margin">
|
|
||||||
<div flex="20" flex-xs="100"><h2 class="h2-api-docs">Description</h2></div>
|
|
||||||
<div flex="80" flex-xs="100" class="code-links"><p>Where:</p>
|
|
||||||
<ul>
|
|
||||||
<li><code>expression</code> is a date object or a number (milliseconds since UTC epoch) or
|
|
||||||
an ISO string
|
|
||||||
(<a href="https://www.w3.org/TR/NOTE-datetime">https://www.w3.org/TR/NOTE-datetime</a>).
|
|
||||||
</li>
|
|
||||||
<li><code>format</code> indicates which date/time components to include. The format can be
|
|
||||||
predifined as
|
|
||||||
shown below or custom as shown in the table.
|
|
||||||
<ul>
|
|
||||||
<li><code>'medium'</code>: equivalent to <code>'yMMMdjms'</code> (e.g.
|
|
||||||
<code>Sep 3, 2010, 12:05:08 PM</code> for <code>en-US</code>)
|
|
||||||
</li>
|
|
||||||
<li><code>'short'</code>: equivalent to <code>'yMdjm'</code> (e.g.
|
|
||||||
<code>9/3/2010, 12:05 PM</code> for <code>en-US</code>)
|
|
||||||
</li>
|
|
||||||
<li><code>'fullDate'</code>: equivalent to <code>'yMMMMEEEEd'</code>
|
|
||||||
(e.g. <code>Friday, September 3, 2010</code> for <code>en-US</code>)
|
|
||||||
</li>
|
|
||||||
<li><code>'longDate'</code>: equivalent to <code>'yMMMMd'</code> (e.g.
|
|
||||||
<code>September 3, 2010</code> for <code>en-US</code>)
|
|
||||||
</li>
|
|
||||||
<li><code>'mediumDate'</code>: equivalent to <code>'yMMMd'</code> (e.g.
|
|
||||||
<code>Sep 3, 2010</code> for <code>en-US</code>)
|
|
||||||
</li>
|
|
||||||
<li><code>'shortDate'</code>: equivalent to <code>'yMd'</code> (e.g.
|
|
||||||
<code>9/3/2010</code> for <code>en-US</code>)
|
|
||||||
</li>
|
|
||||||
<li><code>'mediumTime'</code>: equivalent to <code>'jms'</code> (e.g.
|
|
||||||
<code>12:05:08 PM</code> for <code>en-US</code>)
|
|
||||||
</li>
|
|
||||||
<li><code>'shortTime'</code>: equivalent to <code>'jm'</code> (e.g.
|
|
||||||
<code>12:05 PM</code> for <code>en-US</code>)
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Component</th>
|
|
||||||
<th style="text-align:center">Symbol</th>
|
|
||||||
<th>Narrow</th>
|
|
||||||
<th>Short Form</th>
|
|
||||||
<th>Long Form</th>
|
|
||||||
<th>Numeric</th>
|
|
||||||
<th>2-digit</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>era</td>
|
|
||||||
<td style="text-align:center">G</td>
|
|
||||||
<td>G (A)</td>
|
|
||||||
<td>GGG (AD)</td>
|
|
||||||
<td>GGGG (Anno Domini)</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>year</td>
|
|
||||||
<td style="text-align:center">y</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>y (2015)</td>
|
|
||||||
<td>yy (15)</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>month</td>
|
|
||||||
<td style="text-align:center">M</td>
|
|
||||||
<td>L (S)</td>
|
|
||||||
<td>MMM (Sep)</td>
|
|
||||||
<td>MMMM (September)</td>
|
|
||||||
<td>M (9)</td>
|
|
||||||
<td>MM (09)</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>day</td>
|
|
||||||
<td style="text-align:center">d</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>d (3)</td>
|
|
||||||
<td>dd (03)</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>weekday</td>
|
|
||||||
<td style="text-align:center">E</td>
|
|
||||||
<td>E (S)</td>
|
|
||||||
<td>EEE (Sun)</td>
|
|
||||||
<td>EEEE (Sunday)</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>hour</td>
|
|
||||||
<td style="text-align:center">j</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>j (13)</td>
|
|
||||||
<td>jj (13)</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>hour12</td>
|
|
||||||
<td style="text-align:center">h</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>h (1 PM)</td>
|
|
||||||
<td>hh (01 PM)</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>hour24</td>
|
|
||||||
<td style="text-align:center">H</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>H (13)</td>
|
|
||||||
<td>HH (13)</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>minute</td>
|
|
||||||
<td style="text-align:center">m</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>m (5)</td>
|
|
||||||
<td>mm (05)</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>second</td>
|
|
||||||
<td style="text-align:center">s</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>s (9)</td>
|
|
||||||
<td>ss (09)</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>timezone</td>
|
|
||||||
<td style="text-align:center">z</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>z (Pacific Standard Time)</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>timezone</td>
|
|
||||||
<td style="text-align:center">Z</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>Z (GMT-8:00)</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>timezone</td>
|
|
||||||
<td style="text-align:center">a</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>a (PM)</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>-</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<p>In javascript, only the components specified will be respected (not the ordering,
|
|
||||||
punctuations, ...) and details of the formatting will be dependent on the locale.</p>
|
|
||||||
<p>Timezone of the formatted text will be the local system timezone of the end-user's
|
|
||||||
machine.</p>
|
|
||||||
<p>WARNINGS:</p>
|
|
||||||
<ul>
|
|
||||||
<li>this pipe is marked as pure hence it will not be re-evaluated when the input is mutated.
|
|
||||||
Instead users should treat the date as an immutable object and change the reference when
|
|
||||||
the
|
|
||||||
pipe needs to re-run (this is to avoid reformatting the date on every change detection run
|
|
||||||
which would be an expensive operation).
|
|
||||||
</li>
|
|
||||||
<li>this pipe uses the Internationalization API. Therefore it is only reliable in Chrome and
|
|
||||||
Opera
|
|
||||||
browsers.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h3 id="examples">Examples</h3>
|
|
||||||
<p>Assuming <code>dateObj</code> is (year: 2015, month: 6, day: 15, hour: 21, minute: 43,
|
|
||||||
second: 11)
|
|
||||||
in the <em>local</em> time and locale is 'en-US':</p>
|
|
||||||
<code-example format="linenums" language="js">{{ dateObj | date }} // output is 'Jun 15,
|
|
||||||
2015'
|
|
||||||
{{ dateObj | date:'medium' }} // output is 'Jun 15, 2015, 9:43:11 PM'
|
|
||||||
{{ dateObj | date:'shortTime' }} // output is '9:43 PM'
|
|
||||||
{{ dateObj | date:'mmss' }} // output is '43:11'
|
|
||||||
</code-example>
|
|
||||||
<div class="code-example">
|
|
||||||
<code-example language="ts" format="linenums">@Component({
|
|
||||||
selector: 'date-pipe',
|
|
||||||
template: `<div>
|
|
||||||
<p>Today is {{today | date}}</p>
|
|
||||||
<p>Or if you prefer, {{today | date:'fullDate'}}</p>
|
|
||||||
<p>The time is {{today | date:'jmZ'}}</p>
|
|
||||||
</div>`
|
|
||||||
})
|
|
||||||
export class DatePipeComponent {
|
|
||||||
today: number = Date.now();
|
|
||||||
}
|
|
||||||
</code-example>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="location-badge">exported from <a href="index.html">@angular/common/index</a>
|
|
||||||
defined in <a
|
|
||||||
href="https://github.com/angular/angular/tree/2.2.0-beta.1/modules/@angular/common/src/pipes/date_pipe.ts#L12-L116">@angular/common/src/pipes/date_pipe.ts</a>
|
|
||||||
</p></article>
|
|
Loading…
Reference in New Issue