fix(format): resolve formatDate replacements overlapping

* Fix formatDate replacements overlapping

* Change REGEX_FORMAT to prevent matching yyy format

* Add DateUtils test to check whether formatting rules do not overlap

Author: BobbieGoede

src/utils/DateUtils.js

@@ -203,17 +203,22 @@ const utils = {
     const year = this.getFullYear(date)
     const month = this.getMonth(date) + 1
     const day = this.getDate(date)
-    return formatStr
-      .replace(/dd/, (`0${day}`).slice(-2))
-      .replace(/d/, day)
-      .replace(/yyyy/, year)
-      .replace(/yy/, String(year).slice(2))
-      .replace(/MMMM/, this.getMonthName(this.getMonth(date), translationTemp.months))
-      .replace(/MMM/, this.getMonthNameAbbr(this.getMonth(date), translationTemp.monthsAbbr))
-      .replace(/MM/, (`0${month}`).slice(-2))
-      .replace(/M(?![aäe])/, month)
-      .replace(/o/, this.getNthSuffix(this.getDate(date)))
-      .replace(/E(?![eéi])/, this.getDayNameAbbr(date, translationTemp.days))
+
+    const matches = {
+      dd: (`0${day}`).slice(-2),
+      d: day,
+      yyyy: year,
+      yy: String(year).slice(2),
+      MMMM: this.getMonthName(this.getMonth(date), translationTemp.months),
+      MMM: this.getMonthNameAbbr(this.getMonth(date), translationTemp.monthsAbbr),
+      MM: (`0${month}`).slice(-2),
+      M: month,
+      o: this.getNthSuffix(this.getDate(date)),
+      E: this.getDayNameAbbr(date, translationTemp.days),
+    }
+
+    const REGEX_FORMAT = /y{4}|y{2}|M{1,4}(?![aäe])|d{1,2}|o{1}|E{1}(?![eéi])/g
+    return formatStr.replace(REGEX_FORMAT, (match) => matches[match] || match)
   },
 
   /**

test/unit/specs/DateUtils.spec.js

@@ -44,6 +44,22 @@ describe('DateUtils', () => {
     expect(DateUtils.formatDate(new Date(2016, 11, 2), 'dd MMM yyyy')).toEqual('02 Dec 2016')
   })
 
+  // issue: https://github.com/sumcumo/vue-datepicker/issues/29
+  it('should format date strings without formatting issues like 03 Nrdv 2016 instead of 03 Nov 2016', () => {
+    expect(DateUtils.formatDate(new Date(2016, 0, 12), 'd MMM yyyy')).toEqual('12 Jan 2016')
+    expect(DateUtils.formatDate(new Date(2016, 1, 12), 'd MMM yyyy')).toEqual('12 Feb 2016')
+    expect(DateUtils.formatDate(new Date(2016, 2, 12), 'd MMM yyyy')).toEqual('12 Mar 2016')
+    expect(DateUtils.formatDate(new Date(2016, 3, 12), 'd MMM yyyy')).toEqual('12 Apr 2016')
+    expect(DateUtils.formatDate(new Date(2016, 4, 12), 'd MMM yyyy')).toEqual('12 May 2016')
+    expect(DateUtils.formatDate(new Date(2016, 5, 12), 'd MMM yyyy')).toEqual('12 Jun 2016')
+    expect(DateUtils.formatDate(new Date(2016, 6, 12), 'd MMM yyyy')).toEqual('12 Jul 2016')
+    expect(DateUtils.formatDate(new Date(2016, 7, 12), 'd MMM yyyy')).toEqual('12 Aug 2016')
+    expect(DateUtils.formatDate(new Date(2016, 8, 12), 'd MMM yyyy')).toEqual('12 Sep 2016')
+    expect(DateUtils.formatDate(new Date(2016, 9, 12), 'd MMM yyyy')).toEqual('12 Oct 2016')
+    expect(DateUtils.formatDate(new Date(2016, 10, 12), 'd MMM yyyy')).toEqual('12 Nov 2016')
+    expect(DateUtils.formatDate(new Date(2016, 11, 12), 'd MMM yyyy')).toEqual('12 Dec 2016')
+  })
+
   it('should parse english dates', () => {
     expect(DateUtils.parseDate('16 April 2020', 'd MMMM yyyy', en, null))
       .toEqual('2020-04-16T00:00:00Z')