Merge pull request #2170 from SergioCrisostomo/use-locale-formated-year-month

Correct month calculation and add specs for date-picker labels

src/components/date-picker/util.js

@@ -67,7 +67,7 @@ export const formatDateLabels = (function() {
       Formats:
       yyyy - 4 digit year
       m - month, numeric, 1 - 12
-      m - month, numeric, 01 - 12
+      mm - month, numeric, 01 - 12
       mmm - month, 3 letters, as in `toLocaleDateString`
       Mmm - month, 3 letters, capitalize the return from `toLocaleDateString`
       mmmm - month, full name, as in `toLocaleDateString`
@@ -76,8 +76,8 @@ export const formatDateLabels = (function() {
 
     const formats = {
         yyyy: date => date.getFullYear(),
-        m: date => date.getMonth(),
+        m: date => date.getMonth() + 1,
-        mm: date => ('0' + date.getMonth()).slice(-2),
+        mm: date => ('0' + (date.getMonth() + 1)).slice(-2),
         mmm: (date, locale) => {
             const monthName = date.toLocaleDateString(locale, {
                 month: 'long'

test/unit/specs/assets/locale-expects.js

@@ -0,0 +1,17 @@
+export default {
+  'de-DE': 'Oktober 2030',
+  'en-US': 'October 2030',
+  'es-ES': 'octubre 2030',
+  'fr-FR': 'octobre 2030',
+  'id-ID': 'Oktober 2030',
+  'ja-JP': '2030年 10月',
+  'ko-KR': '2030년 10월',
+  'pt-BR': 'outubro de 2030',
+  'pt-PT': 'outubro de 2030',
+  'ru-RU': 'Октябрь 2030',
+  'sv-SE': 'oktober 2030',
+  'tr-TR': 'Ekim 2030',
+  'vi-VN': 'Tháng 10/2030',
+  'zh-CN': '2030年 10月',
+  'zh-TW': '2030年 10月'
+};

test/unit/specs/date-picker.spec.js

@@ -103,19 +103,19 @@ describe('DatePicker.vue', () => {
 
       vm.dateType = 'year';
       promissedTick(picker)
-          .then(() => {
+        .then(() => {
-            expect(picker.type).to.equal('year');
+          expect(picker.type).to.equal('year');
-            expect(picker.selectionMode).to.equal('year');
+          expect(picker.selectionMode).to.equal('year');
 
-            vm.dateType = 'date';
+          vm.dateType = 'date';
-            return promissedTick(picker);
+          return promissedTick(picker);
-          })
+        })
-          .then(() => {
+        .then(() => {
-            expect(picker.type).to.equal('date');
+          expect(picker.type).to.equal('date');
-            expect(picker.selectionMode).to.equal('day');
+          expect(picker.selectionMode).to.equal('day');
 
-            done();
+          done();
-          });
+        });
     });
   });
 
@@ -191,4 +191,41 @@ describe('DatePicker.vue', () => {
     });
   });
 
+  it('should render date-picker label correctly in zh-CN', done => {
+    vm = createVue(`
+      <Date-picker type="date"></Date-picker>
+    `);
+
+    const picker = vm.$children[0];
+    picker.handleIconClick();
+    vm.$nextTick(() => {
+      const now = new Date();
+      const labels = vm.$el.querySelectorAll('.ivu-picker-panel-body .ivu-date-picker-header-label');
+      const labelText = [...labels].map(el => el.textContent).join(' ');
+      expect(labelText).to.equal([now.getFullYear() + '年', now.getMonth() + 1 + '月'].join(' '));
+      done();
+    });
+  });
+
+  it('Should format labels correctly', done => {
+    const formater = require('../../../src/components/date-picker/util').formatDateLabels;
+    const expectedResults = require('./assets/locale-expects.js').default;
+    const locales = [
+      'de-DE', 'en-US', 'es-ES', 'fr-FR', 'id-ID', 'ja-JP', 'ko-KR', 'pt-BR',
+      'pt-PT', 'ru-RU', 'sv-SE', 'tr-TR', 'vi-VN', 'zh-CN', 'zh-TW'
+    ].reduce((obj, locale) => {
+      obj[locale] = require('../../../src/locale/lang/' + locale).default;
+      return obj;
+    }, {});
+    const testDate = new Date(2030, 9); // October 2030
+
+    Object.keys(locales).forEach(locale => {
+      const format = locales[locale].i.datepicker.datePanelLabel;
+      const f = formater(locale, format, testDate);
+      const labelText = f.labels.map(obj => obj.label).join(f.separator);
+      expect(labelText).to.equal(expectedResults[locale]);
+    });
+    expect(Object.keys(locales).length > 0).to.equal(true);
+    done();
+  });
 });