177 lines
5.2 KiB
Markdown
177 lines
5.2 KiB
Markdown
|
## .dateToPartsFormatter( [options] ) ➜ function( value )
|
||
|
|
||
|
Return a function that formats a date into parts tokens according to the given `options`. The default formatting is numeric year, month, and day (i.e., `{ skeleton: "yMd" }`.
|
||
|
|
||
|
The returned function is invoked with one argument: the Date instance `value` to be formatted.
|
||
|
|
||
|
### Parameters
|
||
|
|
||
|
#### options
|
||
|
|
||
|
Please, see [.dateFormatter() options](./date-formatter.md#parameters).
|
||
|
|
||
|
#### value
|
||
|
|
||
|
Date instance to be formatted, eg. `new Date()`;
|
||
|
|
||
|
### Returns
|
||
|
|
||
|
An Array of objects containing the formatted date in parts. The returned structure looks like this:
|
||
|
|
||
|
```js
|
||
|
[
|
||
|
{ type: "day", value: "17" },
|
||
|
{ type: "weekday", value: "Monday" }
|
||
|
]
|
||
|
```
|
||
|
|
||
|
Possible types are the following:
|
||
|
|
||
|
- `day`
|
||
|
|
||
|
The string used for the day, e.g., `"17"`, `"١٦"`.
|
||
|
|
||
|
- `dayperiod`
|
||
|
|
||
|
The string used for the day period, e.g., `"AM"`, `"PM"`.
|
||
|
|
||
|
- `era`
|
||
|
|
||
|
The string used for the era, e.g., `"AD"`, `"d. C."`.
|
||
|
|
||
|
- `hour`
|
||
|
|
||
|
The string used for the hour, e.g., `"3"`, `"03"`.
|
||
|
|
||
|
- `literal`
|
||
|
|
||
|
The string used for separating date and time values, e.g., `"/"`, `", "`,
|
||
|
`"o'clock"`, `" de "`.
|
||
|
|
||
|
- `minute`
|
||
|
|
||
|
The string used for the minute, e.g., `"00"`.
|
||
|
|
||
|
- `month`
|
||
|
|
||
|
The string used for the month, e.g., `"12"`.
|
||
|
|
||
|
- `second`
|
||
|
|
||
|
The string used for the second, e.g., `"07"` or `"42"`.
|
||
|
|
||
|
- `zone`
|
||
|
|
||
|
The string used for the name of the time zone, e.g., `"EST".`
|
||
|
|
||
|
- `weekday`
|
||
|
|
||
|
The string used for the weekday, e.g., `"M"`, `"Monday"`, `"Montag".`
|
||
|
|
||
|
- `year`
|
||
|
|
||
|
The string used for the year, e.g., `"2012"`, `"96".`
|
||
|
|
||
|
|
||
|
### Example
|
||
|
|
||
|
Prior to using any date methods, you must load `cldr/main/{locale}/ca-gregorian.json`, `cldr/main/{locale}/timeZoneNames.json`, `cldr/supplemental/timeData.json`, `cldr/supplemental/weekData.json`, and the CLDR content required by the number module. Read [CLDR content][] if you need more information.
|
||
|
|
||
|
[CLDR content]: ../../../README.md#2-cldr-content
|
||
|
|
||
|
You can use the static method `Globalize.dateToPartsFormatter()`, which uses the default locale.
|
||
|
|
||
|
```javascript
|
||
|
var formatter;
|
||
|
|
||
|
Globalize.locale( "en" );
|
||
|
formatter = Globalize.dateToPartsFormatter();
|
||
|
|
||
|
formatter( new Date( 2010, 10, 30 ) );
|
||
|
// > [
|
||
|
// { "type": "month", "value": "11" },
|
||
|
// { "type": "literal", "value": "/" },
|
||
|
// { "type": "day", "value": "30" },
|
||
|
// { "type": "literal", "value": "/" },
|
||
|
// { "type": "year", "value": "2010" }
|
||
|
// ]
|
||
|
```
|
||
|
|
||
|
You can use the instance method `.dateToPartsFormatter()`, which uses the instance locale.
|
||
|
|
||
|
```javascript
|
||
|
var enFormatter = Globalize( "en" ).dateToPartsFormatter(),
|
||
|
deFormatter = Globalize( "de" ).dateToPartsFormatter();
|
||
|
|
||
|
enFormatter( new Date( 2010, 10, 30 ) );
|
||
|
// > [
|
||
|
// { "type": "month", "value": "11" },
|
||
|
// { "type": "literal", "value": "/" },
|
||
|
// { "type": "day", "value": "30" },
|
||
|
// { "type": "literal", "value": "/" },
|
||
|
// { "type": "year", "value": "2010" }
|
||
|
// ]
|
||
|
|
||
|
deFormatter( new Date( 2010, 10, 30 ) );
|
||
|
// > [
|
||
|
// { type: 'day', value: '30' },
|
||
|
// { type: 'literal', value: '.' },
|
||
|
// { type: 'month', value: '11' },
|
||
|
// { type: 'literal', value: '.' },
|
||
|
// { type: 'year', value: '2010' }
|
||
|
// ]
|
||
|
```
|
||
|
|
||
|
The information is available separately and it can be formatted and concatenated again in a customized way. For example by using [`Array.prototype.map()`][], [arrow functions][], a [switch statement][], [template literals][], and [`Array.prototype.reduce()`][].
|
||
|
|
||
|
[`Array.prototype.map()`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
|
||
|
[arrow functions]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
|
||
|
[switch statement]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch
|
||
|
[template literals]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
|
||
|
[`Array.prototype.reduce()`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
|
||
|
|
||
|
```javascript
|
||
|
var formatter;
|
||
|
|
||
|
Globalize.locale( "en" );
|
||
|
formatter = Globalize.dateToPartsFormatter({datetime: "short"});
|
||
|
|
||
|
formatter( new Date( 2010, 10, 30, 17, 55 ) ).map(({type, value}) => {
|
||
|
switch ( type ) {
|
||
|
case "year": return `<strong>${value}</strong>`;
|
||
|
default: return value;
|
||
|
}
|
||
|
}).join( "" );
|
||
|
// > "11/30/<strong>10</strong>, 5:55 PM"
|
||
|
```
|
||
|
|
||
|
Please, see [.dateFormatter() example](./date-formatter.md#example) for additional examples such as using `date`, `time`, `datetime`, and `skeleton` options.
|
||
|
|
||
|
For improved performance on iterations, first create the formatter. Then, reuse it on each loop.
|
||
|
|
||
|
```javascript
|
||
|
// In an application, this array could have a few hundred entries
|
||
|
var dates = [ new Date( 2010, 10, 30, 17, 55 ), new Date( 2015, 3, 18, 4, 25 ) ];
|
||
|
var formatter = Globalize( "en" ).dateToPartsFormatter({ time: "short" });
|
||
|
|
||
|
var formattedDates = dates.map(function( date ) {
|
||
|
return formatter( date );
|
||
|
});
|
||
|
// > [
|
||
|
// [
|
||
|
// { "type": "hour", "value": "5" },
|
||
|
// { "type": "literal", "value": ":" },
|
||
|
// { "type": "minute", "value": "55" },
|
||
|
// { "type": "literal", "value": " " },
|
||
|
// { "type": "dayperiod", "value": "PM" }
|
||
|
// ],
|
||
|
// [
|
||
|
// { "type": "hour", "value": "4" },
|
||
|
// { "type": "literal", "value": ":" },
|
||
|
// { "type": "minute", "value": "25" },
|
||
|
// { "type": "literal", "value": " " },
|
||
|
// { "type": "dayperiod", "value": "AM" }
|
||
|
// ]
|
||
|
// ]
|
||
|
```
|