From f77ab6a2d223a91f82636aef17e84f3c535241b1 Mon Sep 17 00:00:00 2001 From: Andrei Tserakhau Date: Wed, 19 Oct 2016 20:05:13 +0300 Subject: [PATCH] feat(datePipe): support narrow forms for month and weekdays (#12297) Closes #12294 --- .../@angular/common/src/pipes/date_pipe.ts | 30 +++++++++---------- .../common/test/pipes/date_pipe_spec.ts | 13 ++++---- modules/@angular/facade/src/intl.ts | 15 +++++++--- 3 files changed, 34 insertions(+), 24 deletions(-) diff --git a/modules/@angular/common/src/pipes/date_pipe.ts b/modules/@angular/common/src/pipes/date_pipe.ts index 840b543da4..ba05c354e9 100644 --- a/modules/@angular/common/src/pipes/date_pipe.ts +++ b/modules/@angular/common/src/pipes/date_pipe.ts @@ -33,21 +33,21 @@ import {InvalidPipeArgumentError} from './invalid_pipe_argument_error'; * - `'shortTime'`: equivalent to `'jm'` (e.g. `12:05 PM` for `en-US`) * * - * | Component | Symbol | Short Form | Long Form | Numeric | 2-digit | - * |-----------|:------:|--------------|-------------------|-----------|-----------| - * | era | G | G (AD) | GGGG (Anno Domini)| - | - | - * | year | y | - | - | y (2015) | yy (15) | - * | month | M | MMM (Sep) | MMMM (September) | M (9) | MM (09) | - * | day | d | - | - | d (3) | dd (03) | - * | weekday | E | EEE (Sun) | EEEE (Sunday) | - | - | - * | hour | j | - | - | j (13) | jj (13) | - * | hour12 | h | - | - | h (1 PM) | hh (01 PM)| - * | hour24 | H | - | - | H (13) | HH (13) | - * | minute | m | - | - | m (5) | mm (05) | - * | second | s | - | - | s (9) | ss (09) | - * | timezone | z | - | z (Pacific Standard Time)| - | - | - * | timezone | Z | Z (GMT-8:00) | - | - | - | - * | timezone | a | a (PM) | - | - | - | + * | Component | Symbol | Narrow | Short Form | Long Form | Numeric | 2-digit | + * |-----------|:------:|--------|--------------|-------------------|-----------|-----------| + * | era | G | G (A) | GGG (AD) | GGGG (Anno Domini)| - | - | + * | year | y | - | - | - | y (2015) | yy (15) | + * | month | M | L (S) | MMM (Sep) | MMMM (September) | M (9) | MM (09) | + * | day | d | - | - | - | d (3) | dd (03) | + * | weekday | E | E (S) | EEE (Sun) | EEEE (Sunday) | - | - | + * | hour | j | - | - | - | j (13) | jj (13) | + * | hour12 | h | - | - | - | h (1 PM) | hh (01 PM)| + * | hour24 | H | - | - | - | H (13) | HH (13) | + * | minute | m | - | - | - | m (5) | mm (05) | + * | second | s | - | - | - | s (9) | ss (09) | + * | timezone | z | - | - | z (Pacific Standard Time)| - | - | + * | timezone | Z | - | Z (GMT-8:00) | - | - | - | + * | timezone | a | - | a (PM) | - | - | - | * * In javascript, only the components specified will be respected (not the ordering, * punctuations, ...) and details of the formatting will be dependent on the locale. diff --git a/modules/@angular/common/test/pipes/date_pipe_spec.ts b/modules/@angular/common/test/pipes/date_pipe_spec.ts index 2667f88e1f..f3413e3ae6 100644 --- a/modules/@angular/common/test/pipes/date_pipe_spec.ts +++ b/modules/@angular/common/test/pipes/date_pipe_spec.ts @@ -59,7 +59,7 @@ export function main() { expect(pipe.transform(date, 'MMM')).toEqual('Jun'); expect(pipe.transform(date, 'MMMM')).toEqual('June'); expect(pipe.transform(date, 'd')).toEqual('15'); - expect(pipe.transform(date, 'E')).toEqual('Mon'); + expect(pipe.transform(date, 'EEE')).toEqual('Mon'); expect(pipe.transform(date, 'EEEE')).toEqual('Monday'); if (!browserDetection.isOldChrome) { expect(pipe.transform(date, 'h')).toEqual('9'); @@ -72,6 +72,9 @@ export function main() { if (!browserDetection.isOldChrome) { expect(pipe.transform(date, 'HH')).toEqual('09'); } + + expect(pipe.transform(date, 'E')).toEqual('M'); + expect(pipe.transform(date, 'L')).toEqual('J'); expect(pipe.transform(date, 'm')).toEqual('3'); expect(pipe.transform(date, 's')).toEqual('1'); expect(pipe.transform(date, 'mm')).toEqual('03'); @@ -81,13 +84,13 @@ export function main() { }); it('should format common multi component patterns', () => { - expect(pipe.transform(date, 'E, M/d/y')).toEqual('Mon, 6/15/2015'); - expect(pipe.transform(date, 'E, M/d')).toEqual('Mon, 6/15'); + expect(pipe.transform(date, 'EEE, M/d/y')).toEqual('Mon, 6/15/2015'); + expect(pipe.transform(date, 'EEE, M/d')).toEqual('Mon, 6/15'); expect(pipe.transform(date, 'MMM d')).toEqual('Jun 15'); expect(pipe.transform(date, 'dd/MM/yyyy')).toEqual('15/06/2015'); expect(pipe.transform(date, 'MM/dd/yyyy')).toEqual('06/15/2015'); - expect(pipe.transform(date, 'yMEd')).toEqual('20156Mon15'); - expect(pipe.transform(date, 'MEd')).toEqual('6Mon15'); + expect(pipe.transform(date, 'yMEEEd')).toEqual('20156Mon15'); + expect(pipe.transform(date, 'MEEEd')).toEqual('6Mon15'); expect(pipe.transform(date, 'MMMd')).toEqual('Jun15'); expect(pipe.transform(date, 'yMMMMEEEEd')).toEqual('Monday, June 15, 2015'); // IE and Edge can't format a date to minutes and seconds without hours diff --git a/modules/@angular/facade/src/intl.ts b/modules/@angular/facade/src/intl.ts index 0ebe6b69b5..3ba1fb4edc 100644 --- a/modules/@angular/facade/src/intl.ts +++ b/modules/@angular/facade/src/intl.ts @@ -77,6 +77,7 @@ var DATE_FORMATS = { MM: datePartGetterFactory(digitCondition('month', 2)), M: datePartGetterFactory(digitCondition('month', 1)), LLLL: datePartGetterFactory(nameCondition('month', 4)), + L: datePartGetterFactory(nameCondition('month', 1)), dd: datePartGetterFactory(digitCondition('day', 2)), d: datePartGetterFactory(digitCondition('day', 1)), HH: digitModifier( @@ -161,13 +162,19 @@ function hour12Modify( } function digitCondition(prop: string, len: number): Intl.DateTimeFormatOptions { - var result: {[k: string]: string} = {}; - result[prop] = len == 2 ? '2-digit' : 'numeric'; + const result: {[k: string]: string} = {}; + result[prop] = len === 2 ? '2-digit' : 'numeric'; return result; } + function nameCondition(prop: string, len: number): Intl.DateTimeFormatOptions { - var result: {[k: string]: string} = {}; - result[prop] = len < 4 ? 'short' : 'long'; + const result: {[k: string]: string} = {}; + if (len < 4) { + result[prop] = len > 1 ? 'short' : 'narrow'; + } else { + result[prop] = 'long'; + } + return result; }