5 lines
37 KiB
JSON
5 lines
37 KiB
JSON
{
|
|
"id": "api/common/DatePipe",
|
|
"title": "DatePipe",
|
|
"contents": "\n\n<article>\n <div class=\"breadcrumb-container\">\n <div class=\"breadcrumb\">\n <script type=\"application/ld+json\">\n {\n \"@context\": \"http://schema.org\",\n \"@type\": \"BreadcrumbList\",\n \"itemListElement\": [\n { \"@type\": \"ListItem\", \"position\": 1, \"item\": { \"@id\": \"https://angular.io//api\", \"name\": \"API\" } },\n { \"@type\": \"ListItem\", \"position\": 2, \"item\": { \"@id\": \"https://angular.io/api/common\", \"name\": \"@angular/common\" } },\n { \"@type\": \"ListItem\", \"position\": 3, \"item\": { \"@id\": \"https://angular.io/api/common/DatePipe\", \"name\": \"DatePipe\" } }\n ]\n }\n </script>\n <a href=\"/api\">API</a> > <a href=\"api/common\">@angular/common</a>\n </div>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/common/src/pipes/date_pipe.ts?message=docs(common)%3A%20describe%20your%20change...#L12-L193\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/common/src/pipes/date_pipe.ts#L12-L193\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n \n <header class=\"api-header\">\n <h1 id=\"datepipe\">DatePipe<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DatePipe#datepipe\"><i class=\"material-icons\">link</i></a></h1>\n \n <label class=\"api-type-label pipe\">pipe</label>\n \n \n \n </header>\n \n <aio-toc class=\"embedded\"></aio-toc>\n\n <div class=\"api-body\">\n \n <section class=\"short-description\">\n <p>Formats a date value according to locale rules.</p>\n\n <p><a href=\"api/common/DatePipe#description\">See more...</a></p>\n </section>\n \n \n \n<section class=\"pipe-overview\">\n <code-example hidecopy=\"true\" class=\"no-box api-heading\">{{ value_expression | <span class=\"kwd nocode\">date</span> [ : format [ : timezone [ : locale ] ] ] }}</code-example>\n\n <h2 id=\"ngmodule\">NgModule<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DatePipe#ngmodule\"><i class=\"material-icons\">link</i></a></h2>\n<ul class=\"ngmodule-list\">\n\n <li>\n <a href=\"api/common/CommonModule\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">CommonModule</code-example>\n </a>\n </li>\n \n</ul>\n\n\n\n \n <h2 id=\"input-value\">Input value<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DatePipe#input-value\"><i class=\"material-icons\">link</i></a></h2>\n <table class=\"is-full-width list-table parameters-table pipe-parameters\">\n <tbody>\n \n <tr class=\"pipe-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>value</code>\n </td>\n <td class=\"param-type\"><code>string | <a href=\"api/common/DecimalPipe\" class=\"code-anchor\">number</a> | Date</code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n </tbody>\n</table>\n \n \n <h2 id=\"parameters\">Parameters<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DatePipe#parameters\"><i class=\"material-icons\">link</i></a></h2>\n <table class=\"is-full-width list-table parameters-table pipe-parameters\">\n <tbody>\n \n <tr class=\"pipe-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>format</code>\n </td>\n <td class=\"param-type\"><code>string</code></td>\n <td class=\"param-description\">\n <p>Optional. Default is <code>'mediumDate'</code>.</p>\n \n </td>\n </tr>\n <tr class=\"pipe-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>timezone</code>\n </td>\n <td class=\"param-type\"><code>string</code></td>\n <td class=\"param-description\">\n <p>Optional. Default is <code>undefined</code>.</p>\n \n </td>\n </tr>\n <tr class=\"pipe-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>locale</code>\n </td>\n <td class=\"param-type\"><code>string</code></td>\n <td class=\"param-description\">\n <p>Optional. Default is <code>undefined</code>.</p>\n \n </td>\n </tr>\n </tbody>\n</table>\n \n</section>\n\n\n \n<section class=\"see-also\">\n <h2 id=\"see-also\">See also<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DatePipe#see-also\"><i class=\"material-icons\">link</i></a></h2>\n <ul>\n \n <li><p><code><a href=\"api/common/formatDate\" class=\"code-anchor\">formatDate</a>()</code></p>\n</li>\n </ul>\n</section>\n\n\n \n\n<section class=\"description\">\n <h2 id=\"description\">Description<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DatePipe#description\"><i class=\"material-icons\">link</i></a></h2>\n <p>Only the <code>en-US</code> locale data comes with Angular. To localize dates\nin another language, you must import the corresponding locale data.\nSee the <a href=\"guide/i18n#i18n-pipes\">I18n guide</a> for more information.</p>\n\n <p>Further information available in the <a href=\"api/common/DatePipe#usage-notes\">Usage Notes</a>...</p>\n</section>\n\n\n \n<section class=\"usage-notes\">\n <h2 id=\"usage-notes\">Usage notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DatePipe#usage-notes\"><i class=\"material-icons\">link</i></a></h2>\n <p>The result of this pipe is not reevaluated when the input is mutated. To avoid the need to\nreformat the date on every change-detection cycle, treat the date as an immutable object\nand change the reference when the pipe needs to run again.</p>\n<h3 id=\"pre-defined-format-options\">Pre-defined format options<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DatePipe#pre-defined-format-options\"><i class=\"material-icons\">link</i></a></h3>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Equivalent to</th>\n<th>Examples (given in <code>en-US</code> locale)</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>'short'</code></td>\n<td><code>'M/d/yy, h:mm a'</code></td>\n<td><code>6/15/15, 9:03 AM</code></td>\n</tr>\n<tr>\n<td><code>'medium'</code></td>\n<td><code>'MMM d, y, h:mm:ss a'</code></td>\n<td><code>Jun 15, 2015, 9:03:01 AM</code></td>\n</tr>\n<tr>\n<td><code>'long'</code></td>\n<td><code>'MMMM d, y, h:mm:ss a z'</code></td>\n<td><code>June 15, 2015 at 9:03:01 AM GMT+1</code></td>\n</tr>\n<tr>\n<td><code>'full'</code></td>\n<td><code>'EEEE, MMMM d, y, h:mm:ss a zzzz'</code></td>\n<td><code>Monday, June 15, 2015 at 9:03:01 AM GMT+01:00</code></td>\n</tr>\n<tr>\n<td><code>'shortDate'</code></td>\n<td><code>'M/d/yy'</code></td>\n<td><code>6/15/15</code></td>\n</tr>\n<tr>\n<td><code>'mediumDate'</code></td>\n<td><code>'MMM d, y'</code></td>\n<td><code>Jun 15, 2015</code></td>\n</tr>\n<tr>\n<td><code>'longDate'</code></td>\n<td><code>'MMMM d, y'</code></td>\n<td><code>June 15, 2015</code></td>\n</tr>\n<tr>\n<td><code>'fullDate'</code></td>\n<td><code>'EEEE, MMMM d, y'</code></td>\n<td><code>Monday, June 15, 2015</code></td>\n</tr>\n<tr>\n<td><code>'shortTime'</code></td>\n<td><code>'h:mm a'</code></td>\n<td><code>9:03 AM</code></td>\n</tr>\n<tr>\n<td><code>'mediumTime'</code></td>\n<td><code>'h:mm:ss a'</code></td>\n<td><code>9:03:01 AM</code></td>\n</tr>\n<tr>\n<td><code>'longTime'</code></td>\n<td><code>'h:mm:ss a z'</code></td>\n<td><code>9:03:01 AM GMT+1</code></td>\n</tr>\n<tr>\n<td><code>'fullTime'</code></td>\n<td><code>'h:mm:ss a zzzz'</code></td>\n<td><code>9:03:01 AM GMT+01:00</code></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"custom-format-options\">Custom format options<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DatePipe#custom-format-options\"><i class=\"material-icons\">link</i></a></h3>\n<p>You can construct a format string using symbols to specify the components\nof a date-time value, as described in the following table.\nFormat details depend on the locale.\nFields marked with (*) are only available in the extra data set for the given locale.</p>\n<table>\n<thead>\n<tr>\n<th>Field type</th>\n<th>Format</th>\n<th>Description</th>\n<th>Example Value</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Era</td>\n<td>G, GG & GGG</td>\n<td>Abbreviated</td>\n<td>AD</td>\n</tr>\n<tr>\n<td></td>\n<td>GGGG</td>\n<td>Wide</td>\n<td>Anno Domini</td>\n</tr>\n<tr>\n<td></td>\n<td>GGGGG</td>\n<td>Narrow</td>\n<td>A</td>\n</tr>\n<tr>\n<td>Year</td>\n<td>y</td>\n<td>Numeric: minimum digits</td>\n<td>2, 20, 201, 2017, 20173</td>\n</tr>\n<tr>\n<td></td>\n<td>yy</td>\n<td>Numeric: 2 digits + zero padded</td>\n<td>02, 20, 01, 17, 73</td>\n</tr>\n<tr>\n<td></td>\n<td>yyy</td>\n<td>Numeric: 3 digits + zero padded</td>\n<td>002, 020, 201, 2017, 20173</td>\n</tr>\n<tr>\n<td></td>\n<td>yyyy</td>\n<td>Numeric: 4 digits or more + zero padded</td>\n<td>0002, 0020, 0201, 2017, 20173</td>\n</tr>\n<tr>\n<td>Week-numbering year</td>\n<td>Y</td>\n<td>Numeric: minimum digits</td>\n<td>2, 20, 201, 2017, 20173</td>\n</tr>\n<tr>\n<td></td>\n<td>YY</td>\n<td>Numeric: 2 digits + zero padded</td>\n<td>02, 20, 01, 17, 73</td>\n</tr>\n<tr>\n<td></td>\n<td>YYY</td>\n<td>Numeric: 3 digits + zero padded</td>\n<td>002, 020, 201, 2017, 20173</td>\n</tr>\n<tr>\n<td></td>\n<td>YYYY</td>\n<td>Numeric: 4 digits or more + zero padded</td>\n<td>0002, 0020, 0201, 2017, 20173</td>\n</tr>\n<tr>\n<td>Month</td>\n<td>M</td>\n<td>Numeric: 1 digit</td>\n<td>9, 12</td>\n</tr>\n<tr>\n<td></td>\n<td>MM</td>\n<td>Numeric: 2 digits + zero padded</td>\n<td>09, 12</td>\n</tr>\n<tr>\n<td></td>\n<td>MMM</td>\n<td>Abbreviated</td>\n<td>Sep</td>\n</tr>\n<tr>\n<td></td>\n<td>MMMM</td>\n<td>Wide</td>\n<td>September</td>\n</tr>\n<tr>\n<td></td>\n<td>MMMMM</td>\n<td>Narrow</td>\n<td>S</td>\n</tr>\n<tr>\n<td>Month standalone</td>\n<td>L</td>\n<td>Numeric: 1 digit</td>\n<td>9, 12</td>\n</tr>\n<tr>\n<td></td>\n<td>LL</td>\n<td>Numeric: 2 digits + zero padded</td>\n<td>09, 12</td>\n</tr>\n<tr>\n<td></td>\n<td>LLL</td>\n<td>Abbreviated</td>\n<td>Sep</td>\n</tr>\n<tr>\n<td></td>\n<td>LLLL</td>\n<td>Wide</td>\n<td>September</td>\n</tr>\n<tr>\n<td></td>\n<td>LLLLL</td>\n<td>Narrow</td>\n<td>S</td>\n</tr>\n<tr>\n<td>Week of year</td>\n<td>w</td>\n<td>Numeric: minimum digits</td>\n<td>1... 53</td>\n</tr>\n<tr>\n<td></td>\n<td>ww</td>\n<td>Numeric: 2 digits + zero padded</td>\n<td>01... 53</td>\n</tr>\n<tr>\n<td>Week of month</td>\n<td>W</td>\n<td>Numeric: 1 digit</td>\n<td>1... 5</td>\n</tr>\n<tr>\n<td>Day of month</td>\n<td>d</td>\n<td>Numeric: minimum digits</td>\n<td>1</td>\n</tr>\n<tr>\n<td></td>\n<td>dd</td>\n<td>Numeric: 2 digits + zero padded</td>\n<td>01</td>\n</tr>\n<tr>\n<td>Week day</td>\n<td>E, EE & EEE</td>\n<td>Abbreviated</td>\n<td>Tue</td>\n</tr>\n<tr>\n<td></td>\n<td>EEEE</td>\n<td>Wide</td>\n<td>Tuesday</td>\n</tr>\n<tr>\n<td></td>\n<td>EEEEE</td>\n<td>Narrow</td>\n<td>T</td>\n</tr>\n<tr>\n<td></td>\n<td>EEEEEE</td>\n<td>Short</td>\n<td>Tu</td>\n</tr>\n<tr>\n<td>Week day standalone</td>\n<td>c, cc</td>\n<td>Numeric: 1 digit</td>\n<td>2</td>\n</tr>\n<tr>\n<td></td>\n<td>ccc</td>\n<td>Abbreviated</td>\n<td>Tue</td>\n</tr>\n<tr>\n<td></td>\n<td>cccc</td>\n<td>Wide</td>\n<td>Tuesday</td>\n</tr>\n<tr>\n<td></td>\n<td>ccccc</td>\n<td>Narrow</td>\n<td>T</td>\n</tr>\n<tr>\n<td></td>\n<td>cccccc</td>\n<td>Short</td>\n<td>Tu</td>\n</tr>\n<tr>\n<td>Period</td>\n<td>a, aa & aaa</td>\n<td>Abbreviated</td>\n<td>am/pm or AM/PM</td>\n</tr>\n<tr>\n<td></td>\n<td>aaaa</td>\n<td>Wide (fallback to <code><a href=\"api/router/RouterLinkWithHref\" class=\"code-anchor\">a</a></code> when missing)</td>\n<td>ante meridiem/post meridiem</td>\n</tr>\n<tr>\n<td></td>\n<td>aaaaa</td>\n<td>Narrow</td>\n<td>a/p</td>\n</tr>\n<tr>\n<td>Period*</td>\n<td>B, BB & BBB</td>\n<td>Abbreviated</td>\n<td>mid.</td>\n</tr>\n<tr>\n<td></td>\n<td>BBBB</td>\n<td>Wide</td>\n<td>am, pm, midnight, noon, morning, afternoon, evening, night</td>\n</tr>\n<tr>\n<td></td>\n<td>BBBBB</td>\n<td>Narrow</td>\n<td>md</td>\n</tr>\n<tr>\n<td>Period standalone*</td>\n<td>b, bb & bbb</td>\n<td>Abbreviated</td>\n<td>mid.</td>\n</tr>\n<tr>\n<td></td>\n<td>bbbb</td>\n<td>Wide</td>\n<td>am, pm, midnight, noon, morning, afternoon, evening, night</td>\n</tr>\n<tr>\n<td></td>\n<td>bbbbb</td>\n<td>Narrow</td>\n<td>md</td>\n</tr>\n<tr>\n<td>Hour 1-12</td>\n<td>h</td>\n<td>Numeric: minimum digits</td>\n<td>1, 12</td>\n</tr>\n<tr>\n<td></td>\n<td>hh</td>\n<td>Numeric: 2 digits + zero padded</td>\n<td>01, 12</td>\n</tr>\n<tr>\n<td>Hour 0-23</td>\n<td>H</td>\n<td>Numeric: minimum digits</td>\n<td>0, 23</td>\n</tr>\n<tr>\n<td></td>\n<td>HH</td>\n<td>Numeric: 2 digits + zero padded</td>\n<td>00, 23</td>\n</tr>\n<tr>\n<td>Minute</td>\n<td>m</td>\n<td>Numeric: minimum digits</td>\n<td>8, 59</td>\n</tr>\n<tr>\n<td></td>\n<td>mm</td>\n<td>Numeric: 2 digits + zero padded</td>\n<td>08, 59</td>\n</tr>\n<tr>\n<td>Second</td>\n<td>s</td>\n<td>Numeric: minimum digits</td>\n<td>0... 59</td>\n</tr>\n<tr>\n<td></td>\n<td>ss</td>\n<td>Numeric: 2 digits + zero padded</td>\n<td>00... 59</td>\n</tr>\n<tr>\n<td>Fractional seconds</td>\n<td>S</td>\n<td>Numeric: 1 digit</td>\n<td>0... 9</td>\n</tr>\n<tr>\n<td></td>\n<td>SS</td>\n<td>Numeric: 2 digits + zero padded</td>\n<td>00... 99</td>\n</tr>\n<tr>\n<td></td>\n<td>SSS</td>\n<td>Numeric: 3 digits + zero padded (= milliseconds)</td>\n<td>000... 999</td>\n</tr>\n<tr>\n<td>Zone</td>\n<td>z, zz & zzz</td>\n<td>Short specific non location format (fallback to O)</td>\n<td>GMT-8</td>\n</tr>\n<tr>\n<td></td>\n<td>zzzz</td>\n<td>Long specific non location format (fallback to OOOO)</td>\n<td>GMT-08:00</td>\n</tr>\n<tr>\n<td></td>\n<td>Z, ZZ & ZZZ</td>\n<td>ISO8601 basic format</td>\n<td>-0800</td>\n</tr>\n<tr>\n<td></td>\n<td>ZZZZ</td>\n<td>Long localized GMT format</td>\n<td>GMT-8:00</td>\n</tr>\n<tr>\n<td></td>\n<td>ZZZZZ</td>\n<td>ISO8601 extended format + Z indicator for offset 0 (= XXXXX)</td>\n<td>-08:00</td>\n</tr>\n<tr>\n<td></td>\n<td>O, OO & OOO</td>\n<td>Short localized GMT format</td>\n<td>GMT-8</td>\n</tr>\n<tr>\n<td></td>\n<td>OOOO</td>\n<td>Long localized GMT format</td>\n<td>GMT-08:00</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"format-examples\">Format examples<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DatePipe#format-examples\"><i class=\"material-icons\">link</i></a></h3>\n<p>These examples transform a date into various formats,\nassuming that <code>dateObj</code> is a JavaScript <code>Date</code> object for\nyear: 2015, month: 6, day: 15, hour: 21, minute: 43, second: 11,\ngiven in the local time for the <code>en-US</code> locale.</p>\n<code-example>\n{{ dateObj | <a href=\"api/common/DatePipe\" class=\"code-anchor\">date</a> }} // output is 'Jun 15, 2015'\n{{ dateObj | <a href=\"api/common/DatePipe\" class=\"code-anchor\">date</a>:'medium' }} // output is 'Jun 15, 2015, 9:43:11 PM'\n{{ dateObj | <a href=\"api/common/DatePipe\" class=\"code-anchor\">date</a>:'shortTime' }} // output is '9:43 PM'\n{{ dateObj | <a href=\"api/common/DatePipe\" class=\"code-anchor\">date</a>:'mm:ss' }} // output is '43:11'\n</code-example>\n<h3 id=\"usage-example\">Usage example<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/common/DatePipe#usage-example\"><i class=\"material-icons\">link</i></a></h3>\n<p>The following component uses a date pipe to display the current date in different formats.</p>\n<code-example>\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'date-pipe',\n template: `<div>\n <p>Today is {{today | <a href=\"api/common/DatePipe\" class=\"code-anchor\">date</a>}}</p>\n <p>Or if you prefer, {{today | <a href=\"api/common/DatePipe\" class=\"code-anchor\">date</a>:'fullDate'}}</p>\n <p>The time is {{today | <a href=\"api/common/DatePipe\" class=\"code-anchor\">date</a>:'h:mm a z'}}</p>\n </div>`\n})\n// Get the current date and time as a date-time value.\nexport class DatePipeComponent {\n today: number = Date.now();\n}\n</code-example>\n\n</section>\n\n\n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/common\n - api/common/CommonModule\n - api/common/formatDate\n - api/core/PipeTransform\n - guide/ajs-quick-reference\n - guide/architecture-components\n - guide/glossary\n - guide/i18n\n - guide/pipes\n - guide/updating-to-version-11\n-->\n<!-- links from this doc:\n - /api\n - api/common\n - api/common/CommonModule\n - api/common/DatePipe#custom-format-options\n - api/common/DatePipe#datepipe\n - api/common/DatePipe#description\n - api/common/DatePipe#format-examples\n - api/common/DatePipe#input-value\n - api/common/DatePipe#ngmodule\n - api/common/DatePipe#parameters\n - api/common/DatePipe#pre-defined-format-options\n - api/common/DatePipe#see-also\n - api/common/DatePipe#usage-example\n - api/common/DatePipe#usage-notes\n - api/common/DecimalPipe\n - api/common/formatDate\n - api/core/Component\n - api/router/RouterLinkWithHref\n - guide/i18n#i18n-pipes\n - https://github.com/angular/angular/edit/master/packages/common/src/pipes/date_pipe.ts?message=docs(common)%3A%20describe%20your%20change...#L12-L193\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/common/src/pipes/date_pipe.ts#L12-L193\n-->"
|
|
} |