feat(common/datePipe): change date formatter to use correct pattern closes #7008 (#8154)

- add regular expression to parse date parts
- add date part creator function
- replace tokens in pattern to parsed parts

modules/@angular/common/test/pipes/date_pipe_spec.ts

@@ -61,17 +61,25 @@ 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, '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('Mon, 6/15/2015');
           expect(pipe.transform(date, 'MEd')).toEqual('Mon, 6/15');
           expect(pipe.transform(date, 'MMMd')).toEqual('Jun 15');
           expect(pipe.transform(date, 'yMMMMEEEEd')).toEqual('Monday, June 15, 2015');
           expect(pipe.transform(date, 'jms')).toEqual('9:43:11 PM');
           expect(pipe.transform(date, 'ms')).toEqual('43:11');
+          expect(pipe.transform(date, 'jm')).toEqual('9:43');
         });
 
         it('should format with pattern aliases', () => {
           expect(pipe.transform(date, 'medium')).toEqual('Jun 15, 2015, 9:43:11 PM');
           expect(pipe.transform(date, 'short')).toEqual('6/15/2015, 9:43 PM');
+          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, 'fullDate')).toEqual('Monday, June 15, 2015');
           expect(pipe.transform(date, 'longDate')).toEqual('June 15, 2015');
           expect(pipe.transform(date, 'mediumDate')).toEqual('Jun 15, 2015');

modules/@angular/facade/src/intl.ts

@@ -70,78 +70,183 @@ export class NumberFormatter {
     return new Intl.NumberFormat(locale, intlOptions).format(num);
   }
 }
+var DATE_FORMATS_SPLIT =
+    /((?:[^yMLdHhmsaZEwGjJ']+)|(?:'(?:[^']|'')*')|(?:E+|y+|M+|L+|d+|H+|h+|J+|j+|m+|s+|a|Z|G+|w+))(.*)/;
 
-function digitCondition(len: number): string {
+var PATTERN_ALIASES = {
-  return len == 2 ? '2-digit' : 'numeric';
+  yMMMdjms: datePartGetterFactory(combine([
-}
+    digitCondition('year', 1),
-function nameCondition(len: number): string {
+    nameCondition('month', 3),
-  return len < 4 ? 'short' : 'long';
+    digitCondition('day', 1),
-}
+    digitCondition('hour', 1),
-function extractComponents(pattern: string): Intl.DateTimeFormatOptions {
+    digitCondition('minute', 1),
-  var ret: Intl.DateTimeFormatOptions = {};
+    digitCondition('second', 1),
-  var i = 0, j;
+  ])),
-  while (i < pattern.length) {
+  yMdjm: datePartGetterFactory(combine([
-    j = i;
+    digitCondition('year', 1),
-    while (j < pattern.length && pattern[j] == pattern[i]) j++;
+    digitCondition('month', 1),
-    let len = j - i;
+    digitCondition('day', 1),
-    switch (pattern[i]) {
+    digitCondition('hour', 1),
-      case 'G':
+    digitCondition('minute', 1)
-        ret.era = nameCondition(len);
+  ])),
-        break;
+  yMMMMEEEEd: datePartGetterFactory(combine([
-      case 'y':
+    digitCondition('year', 1),
-        ret.year = digitCondition(len);
+    nameCondition('month', 4),
-        break;
+    nameCondition('weekday', 4),
-      case 'M':
+    digitCondition('day', 1)
-        if (len >= 3)
+  ])),
-          ret.month = nameCondition(len);
+  yMMMMd: datePartGetterFactory(
-        else
+      combine([digitCondition('year', 1), nameCondition('month', 4), digitCondition('day', 1)])),
-          ret.month = digitCondition(len);
+  yMMMd: datePartGetterFactory(
-        break;
+      combine([digitCondition('year', 1), nameCondition('month', 3), digitCondition('day', 1)])),
-      case 'd':
+  yMd: datePartGetterFactory(
-        ret.day = digitCondition(len);
+      combine([digitCondition('year', 1), digitCondition('month', 1), digitCondition('day', 1)])),
-        break;
+  jms: datePartGetterFactory(combine(
-      case 'E':
+      [digitCondition('hour', 1), digitCondition('second', 1), digitCondition('minute', 1)])),
-        ret.weekday = nameCondition(len);
+  jm: datePartGetterFactory(combine([digitCondition('hour', 1), digitCondition('minute', 1)]))
-        break;
+};
-      case 'j':
+
-        ret.hour = digitCondition(len);
+var DATE_FORMATS = {
-        break;
+  yyyy: datePartGetterFactory(digitCondition('year', 4)),
-      case 'h':
+  yy: datePartGetterFactory(digitCondition('year', 2)),
-        ret.hour = digitCondition(len);
+  y: datePartGetterFactory(digitCondition('year', 1)),
-        ret.hour12 = true;
+  MMMM: datePartGetterFactory(nameCondition('month', 4)),
-        break;
+  MMM: datePartGetterFactory(nameCondition('month', 3)),
-      case 'H':
+  MM: datePartGetterFactory(digitCondition('month', 2)),
-        ret.hour = digitCondition(len);
+  M: datePartGetterFactory(digitCondition('month', 1)),
-        ret.hour12 = false;
+  LLLL: datePartGetterFactory(nameCondition('month', 4)),
-        break;
+  dd: datePartGetterFactory(digitCondition('day', 2)),
-      case 'm':
+  d: datePartGetterFactory(digitCondition('day', 1)),
-        ret.minute = digitCondition(len);
+  HH: hourExtracter(datePartGetterFactory(hour12Modify(digitCondition('hour', 2), false))),
-        break;
+  H: hourExtracter(datePartGetterFactory(hour12Modify(digitCondition('hour', 1), false))),
-      case 's':
+  hh: hourExtracter(datePartGetterFactory(hour12Modify(digitCondition('hour', 2), true))),
-        ret.second = digitCondition(len);
+  h: hourExtracter(datePartGetterFactory(hour12Modify(digitCondition('hour', 1), true))),
-        break;
+  jj: datePartGetterFactory(digitCondition('hour', 2)),
-      case 'z':
+  j: datePartGetterFactory(digitCondition('hour', 1)),
-        ret.timeZoneName = 'long';
+  mm: datePartGetterFactory(digitCondition('minute', 2)),
-        break;
+  m: datePartGetterFactory(digitCondition('minute', 1)),
-      case 'Z':
+  ss: datePartGetterFactory(digitCondition('second', 2)),
-        ret.timeZoneName = 'short';
+  s: datePartGetterFactory(digitCondition('second', 1)),
-        break;
+  // while ISO 8601 requires fractions to be prefixed with `.` or `,`
-    }
+  // we can be just safely rely on using `sss` since we currently don't support single or two digit
-    i = j;
+  // fractions
-  }
+  sss: datePartGetterFactory(digitCondition('second', 3)),
-  return ret;
+  EEEE: datePartGetterFactory(nameCondition('weekday', 4)),
+  EEE: datePartGetterFactory(nameCondition('weekday', 3)),
+  EE: datePartGetterFactory(nameCondition('weekday', 2)),
+  E: datePartGetterFactory(nameCondition('weekday', 1)),
+  a: hourClockExtracter(datePartGetterFactory(hour12Modify(digitCondition('hour', 1), true))),
+  Z: datePartGetterFactory({timeZoneName: 'long'}),
+  z: datePartGetterFactory({timeZoneName: 'short'}),
+  ww: datePartGetterFactory({}),  // Week of year, padded (00-53). Week 01 is the week with the
+                                  // first Thursday of the year. not support ?
+  w: datePartGetterFactory({}),   // Week of year (0-53). Week 1 is the week with the first Thursday
+                                  // of the year not support ?
+  G: datePartGetterFactory(nameCondition('era', 1)),
+  GG: datePartGetterFactory(nameCondition('era', 2)),
+  GGG: datePartGetterFactory(nameCondition('era', 3)),
+  GGGG: datePartGetterFactory(nameCondition('era', 4))
+};
+
+
+function hourClockExtracter(inner: (date: Date, locale: string) => string): (
+    date: Date, locale: string) => string {
+  return function(date: Date, locale: string): string {
+    var result = inner(date, locale);
+
+    return result.split(' ')[1];
+  };
 }
 
-var dateFormatterCache: Map<string, Intl.DateTimeFormat> = new Map<string, Intl.DateTimeFormat>();
+function hourExtracter(inner: (date: Date, locale: string) => string): (date: Date,
+                                                                        locale: string) => string {
+  return function(date: Date, locale: string): string {
+    var result = inner(date, locale);
+
+    return result.split(' ')[0];
+  };
+}
+
+function hour12Modify(options: Intl.DateTimeFormatOptions,
+                      value: boolean): Intl.DateTimeFormatOptions {
+  options.hour12 = value;
+  return options;
+}
+
+function digitCondition(prop: string, len: number): Intl.DateTimeFormatOptions {
+  var result = {};
+  result[prop] = len == 2 ? '2-digit' : 'numeric';
+  return result;
+}
+function nameCondition(prop: string, len: number): Intl.DateTimeFormatOptions {
+  var result = {};
+  result[prop] = len < 4 ? 'short' : 'long';
+  return result;
+}
+
+function combine(options: Intl.DateTimeFormatOptions[]): Intl.DateTimeFormatOptions {
+  var result = {};
+
+  options.forEach(option => { (<any>Object).assign(result, option); });
+
+  return result;
+}
+
+function datePartGetterFactory(ret: Intl.DateTimeFormatOptions): (date: Date, locale: string) =>
+    string {
+  return function(date: Date, locale: string): string {
+    return new Intl.DateTimeFormat(locale, ret).format(date);
+  };
+}
+
+
+var datePartsFormatterCache: Map<string, string[]> = new Map<string, string[]>();
+
+function dateFormatter(format: string, date: Date, locale: string): string {
+  var text = '';
+  var match;
+  var fn;
+  var parts: string[] = [];
+  if (PATTERN_ALIASES[format]) {
+    return PATTERN_ALIASES[format](date, locale);
+  }
+
+
+  if (datePartsFormatterCache.has(format)) {
+    parts = datePartsFormatterCache.get(format);
+  } else {
+    var matchs = DATE_FORMATS_SPLIT.exec(format);
+
+    while (format) {
+      match = DATE_FORMATS_SPLIT.exec(format);
+      if (match) {
+        parts = concat(parts, match, 1);
+        format = parts.pop();
+      } else {
+        parts.push(format);
+        format = null;
+      }
+    }
+
+    datePartsFormatterCache.set(format, parts);
+  }
+
+  parts.forEach(part => {
+    fn = DATE_FORMATS[part];
+    text += fn ? fn(date, locale) :
+                 part === "''" ? "'" : part.replace(/(^'|'$)/g, '').replace(/''/g, "'");
+  });
+
+  return text;
+}
+
+var slice = [].slice;
+function concat(array1, array2, index): string[] {
+  return array1.concat(slice.call(array2, index));
+}
 
 export class DateFormatter {
   static format(date: Date, locale: string, pattern: string): string {
-    var key = locale + pattern;
+    return dateFormatter(pattern, date, locale);
-    if (dateFormatterCache.has(key)) {
-      return dateFormatterCache.get(key).format(date);
-    }
-    var formatter = new Intl.DateTimeFormat(locale, extractComponents(pattern));
-    dateFormatterCache.set(key, formatter);
-    return formatter.format(date);
   }
 }