feat(datePipe): support narrow forms for month and weekdays

Closes angular#12294
laskoviymishka · Oct 14, 2016 · dcd199c · dcd199c
1 parent 606e518
commit dcd199c
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 16 deletions.
diff --git 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
@@ -58,9 +58,11 @@ export function main() {
         expect(pipe.transform(date, 'MM')).toEqual('06');
         expect(pipe.transform(date, 'MMM')).toEqual('Jun');
         expect(pipe.transform(date, 'MMMM')).toEqual('June');
+        expect(pipe.transform(date, 'L')).toEqual('J');
         expect(pipe.transform(date, 'd')).toEqual('15');
         expect(pipe.transform(date, 'E')).toEqual('Mon');
         expect(pipe.transform(date, 'EEEE')).toEqual('Monday');
+        expect(pipe.transform(date, 'E')).toEqual('M');
         if (!browserDetection.isOldChrome) {
           expect(pipe.transform(date, 'h')).toEqual('9');
           expect(pipe.transform(date, 'hh')).toEqual('09');

diff --git 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(
@@ -165,9 +166,19 @@ function digitCondition(prop: string, len: number): Intl.DateTimeFormatOptions {
   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';
+  if (len < 4) {
+    if (len > 1) {
+      result[prop] = 'short';
+    } else {
+      result[prop] = 'narrow';
+    }
+  } else {
+    result[prop] = 'long';
+  }
+
   return result;
 }