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

use date.toLocaleDateString to format year/month

Merge pull request #2097 from SergioCrisostomo/use-locale-formated-year-month
use date.toLocaleDateString to format year/month
Aresn · GitHub
2 parents 0f651093 2537c26d
Showing 20 changed files with 192 additions and 99 deletions Show diff stats
src/components/date-picker/panel/date-panel-label.vue
src/components/date-picker/panel/date-range.vue
src/components/date-picker/panel/date.vue
src/components/date-picker/panel/time-range.vue
src/components/date-picker/util.js
src/locale/lang/de-DE.js
src/locale/lang/en-US.js
src/locale/lang/es-ES.js
src/locale/lang/fr-FR.js
src/locale/lang/id-ID.js
src/locale/lang/ja-JP.js
src/locale/lang/ko-KR.js
src/locale/lang/pt-BR.js
src/locale/lang/pt-PT.js
src/locale/lang/ru-RU.js
src/locale/lang/sv-SE.js
src/locale/lang/tr-TR.js
src/locale/lang/vi-VN.js
src/locale/lang/zh-CN.js
src/locale/lang/zh-TW.js
+<template>
+    <span>
+        <span
+            v-if="datePanelLabel"
+            v-show="datePanelLabel.labels[0].type === 'year' || currentView === 'date'"
+            :class="[datePrefixCls + '-header-label']"
+            @click="datePanelLabel.labels[0].handler">{{ datePanelLabel.labels[0].label }}</span>
+        <template v-if="datePanelLabel && currentView === 'date'">{{ datePanelLabel.separator }}</template>
+        <span
+            v-if="datePanelLabel"
+            v-show="datePanelLabel.labels[1].type === 'year' || currentView === 'date'"
+            :class="[datePrefixCls + '-header-label']"
+            @click="datePanelLabel.labels[1].handler">{{ datePanelLabel.labels[1].label }}</span>
+    </span>
+</template>
+
+<script>
+export default {
+    props: {
+        datePanelLabel: Object,
+        currentView: String,
+        datePrefixCls: String
+    }
+};
+</script>
@@ -16,13 +16,10 @@
                         :class="iconBtnCls('prev')"
                         @click="prevMonth"
                         v-show="leftCurrentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
-                    <span
-                        :class="[datePrefixCls + '-header-label']"
-                        @click="showYearPicker('left')">{{ leftYearLabel }}</span>
-                    <span
-                        :class="[datePrefixCls + '-header-label']"
-                        @click="showMonthPicker('left')"
-                        v-show="leftCurrentView === 'date'">{{ leftMonthLabel }}</span>
+                    <date-panel-label
+                        :date-panel-label="leftDatePanelLabel"
+                        :current-view="leftCurrentView"
+                        :date-prefix-cls="datePrefixCls"/>
                     <span
                         :class="iconBtnCls('next', '-double')"
                         @click="nextYear('left')"
@@ -66,13 +63,10 @@
                          :class="iconBtnCls('prev', '-double')"
                          @click="prevYear('right')"
                          v-show="rightCurrentView === 'year' || rightCurrentView === 'month'"><Icon type="ios-arrow-left"></Icon></span>
-                    <span
-                        :class="[datePrefixCls + '-header-label']"
-                        @click="showYearPicker('right')">{{ rightYearLabel }}</span>
-                    <span
-                        :class="[datePrefixCls + '-header-label']"
-                        @click="showMonthPicker('right')"
-                        v-show="rightCurrentView === 'date'">{{ rightMonthLabel }}</span>
+                    <date-panel-label
+                        :date-panel-label="rightDatePanelLabel"
+                        :current-view="rightCurrentView"
+                        :date-prefix-cls="datePrefixCls"/>
                     <span
                         :class="iconBtnCls('next', '-double')"
                         @click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
@@ -138,7 +132,8 @@
     import MonthTable from '../base/month-table.vue';
     import TimePicker from './time-range.vue';
     import Confirm from '../base/confirm.vue';
-    import { toDate, prevMonth, nextMonth, initTimeDate } from '../util';
+    import { toDate, prevMonth, nextMonth, initTimeDate, formatDateLabels } from '../util';
+    import datePanelLabel from './date-panel-label.vue';
  
     import Mixin from './mixin';
     import Locale from '../../../mixins/locale';
@@ -149,7 +144,7 @@
     export default {
         name: 'DatePicker',
         mixins: [ Mixin, Locale ],
-        components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
+        components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
         data () {
             return {
                 prefixCls: prefixCls,
@@ -195,26 +190,9 @@
                     return this.date;
                 }
             },
-            leftYearLabel () {
-                const tYear = this.t('i.datepicker.year');
-                if (this.leftCurrentView === 'year') {
-                    const year = this.leftTableYear;
-                    if (!year) return '';
-                    const startYear = Math.floor(year / 10) * 10;
-                    return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
-                } else {
-                    const year = this.leftCurrentView === 'month' ? this.leftTableYear : this.leftYear;
-                    if (!year) return '';
-                    return `${year}${tYear}`;
-                }
-            },
             leftMonth () {
                 return this.date.getMonth();
             },
-            leftMonthLabel () {
-                const month = this.leftMonth + 1;
-                return this.t(`i.datepicker.month${month}`);
-            },
             rightYear () {
                 return this.rightDate.getFullYear();
             },
@@ -225,26 +203,9 @@
                     return this.date;
                 }
             },
-            rightYearLabel () {
-                const tYear = this.t('i.datepicker.year');
-                if (this.rightCurrentView === 'year') {
-                    const year = this.rightTableYear;
-                    if (!year) return '';
-                    const startYear = Math.floor(year / 10) * 10;
-                    return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
-                } else {
-                    const year = this.rightCurrentView === 'month' ? this.rightTableYear : this.rightYear;
-                    if (!year) return '';
-                    return `${year}${tYear}`;
-                }
-            },
             rightMonth () {
                 return this.rightDate.getMonth();
             },
-            rightMonthLabel () {
-                const month = this.rightMonth + 1;
-                return this.t(`i.datepicker.month${month}`);
-            },
             rightDate () {
                 const newDate = new Date(this.date);
                 const month = newDate.getMonth();
@@ -258,6 +219,14 @@
                 }
                 return newDate;
             },
+            leftDatePanelLabel () {
+                if (!this.leftYear) return null; // not ready yet
+                return this.panelLabelConfig('left');
+            },
+            rightDatePanelLabel () {
+                if (!this.leftYear) return null; // not ready yet
+                return this.panelLabelConfig('right');
+            },
             timeDisabled () {
                 return !(this.minDate && this.maxDate);
             }
@@ -288,6 +257,22 @@
             }
         },
         methods: {
+            panelLabelConfig (direction) {
+                const locale = this.t('i.locale');
+                const datePanelLabel = this.t('i.datepicker.datePanelLabel');
+                const handler = type => {
+                    const fn = type == 'month' ? this.showMonthPicker : this.showYearPicker;
+                    return () => fn(direction);
+                };
+
+                const date = new Date(this[`${direction}Year`], this[`${direction}Month`]);
+                const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
+
+                return {
+                    separator: separator,
+                    labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
+                };
+            },
             resetDate () {
                 this.date = new Date(this.date);
                 this.leftTableYear = this.date.getFullYear();
@@ -15,13 +15,10 @@
                     :class="iconBtnCls('prev')"
                     @click="changeMonth(-1)"
                     v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
-                <span
-                    :class="[datePrefixCls + '-header-label']"
-                    @click="showYearPicker">{{ yearLabel }}</span>
-                <span
-                    :class="[datePrefixCls + '-header-label']"
-                    @click="showMonthPicker"
-                    v-show="currentView === 'date'">{{ monthLabel }}</span>
+                <date-panel-label
+                    :date-panel-label="datePanelLabel"
+                    :current-view="currentView"
+                    :date-prefix-cls="datePrefixCls"/>
                 <span
                     :class="iconBtnCls('next', '-double')"
                     @click="changeYear(+1)"><Icon type="ios-arrow-right"></Icon></span>
@@ -83,11 +80,12 @@
     import MonthTable from '../base/month-table.vue';
     import TimePicker from './time.vue';
     import Confirm from '../base/confirm.vue';
+    import datePanelLabel from './date-panel-label.vue';
  
     import Mixin from './mixin';
     import Locale from '../../../mixins/locale';
  
-    import { initTimeDate, siblingMonth } from '../util';
+    import { initTimeDate, siblingMonth, formatDateLabels } from '../util';
  
     const prefixCls = 'ivu-picker-panel';
     const datePrefixCls = 'ivu-date-picker';
@@ -95,7 +93,7 @@
     export default {
         name: 'DatePicker',
         mixins: [ Mixin, Locale ],
-        components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
+        components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
         data () {
             return {
                 prefixCls: prefixCls,
@@ -123,19 +121,21 @@
                     }
                 ];
             },
-            yearLabel () {
-                const tYear = this.t('i.datepicker.year');
-                const year = this.year;
-                if (!year) return '';
-                if (this.currentView === 'year') {
-                    const startYear = Math.floor(year / 10) * 10;
-                    return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
-                }
-                return `${year}${tYear}`;
-            },
-            monthLabel () {
-                const month = this.month + 1;
-                return this.t(`i.datepicker.month${month}`);
+            datePanelLabel () {
+                if (!this.year) return null; // not ready yet
+                const locale = this.t('i.locale');
+                const datePanelLabel = this.t('i.datepicker.datePanelLabel');
+                const date = new Date(this.year, this.month);
+                const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
+
+                const handler = type => {
+                    return () => (this.currentView = type);
+                };
+
+                return {
+                    separator: separator,
+                    labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
+                };
             }
         },
         watch: {
@@ -196,12 +196,6 @@
                 this.date = siblingMonth(this.date, dir);
                 this.setMonthYear(this.date);
             },
-            showYearPicker () {
-                this.currentView = 'year';
-            },
-            showMonthPicker () {
-                this.currentView = 'month';
-            },
             handleToggleTime () {
                 if (this.currentView === 'date') {
                     this.currentView = 'time';
@@ -3,7 +3,7 @@
         <div :class="[prefixCls + '-body']">
             <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
                 <div :class="[timePrefixCls + '-header']">
-                    <template v-if="showDate">{{ visibleDate }}</template>
+                    <template v-if="showDate">{{ leftDatePanelLabel }}</template>
                     <template v-else>{{ t('i.datepicker.startTime') }}</template>
                 </div>
                 <time-spinner
@@ -21,7 +21,7 @@
             </div>
             <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
                 <div :class="[timePrefixCls + '-header']">
-                    <template v-if="showDate">{{ visibleDateEnd }}</template>
+                    <template v-if="showDate">{{ rightDatePanelLabel }}</template>
                     <template v-else>{{ t('i.datepicker.endTime') }}</template>
                 </div>
                 <time-spinner
@@ -51,7 +51,7 @@
     import Mixin from './mixin';
     import Locale from '../../../mixins/locale';
  
-    import { initTimeDate, toDate, formatDate } from '../util';
+    import { initTimeDate, toDate, formatDate, formatDateLabels } from '../util';
  
     const prefixCls = 'ivu-picker-panel';
     const timePrefixCls = 'ivu-time-picker';
@@ -95,19 +95,11 @@
             showSeconds () {
                 return (this.format || '').indexOf('ss') !== -1;
             },
-            visibleDate () {
-                const date = this.date || initTimeDate();
-                const tYear = this.t('i.datepicker.year');
-                const month = date.getMonth() + 1;
-                const tMonth = this.t(`i.datepicker.month${month}`);
-                return `${date.getFullYear()}${tYear} ${tMonth}`;
+            leftDatePanelLabel () {
+                return this.panelLabelConfig(this.date);
             },
-            visibleDateEnd () {
-                const date = this.dateEnd || initTimeDate();
-                const tYear = this.t('i.datepicker.year');
-                const month = date.getMonth() + 1;
-                const tMonth = this.t(`i.datepicker.month${month}`);
-                return `${date.getFullYear()}${tYear} ${tMonth}`;
+            rightDatePanelLabel () {
+                return this.panelLabelConfig(this.dateEnd);
             }
         },
         watch: {
@@ -136,6 +128,12 @@
             }
         },
         methods: {
+            panelLabelConfig (date) {
+                const locale = this.t('i.locale');
+                const datePanelLabel = this.t('i.datepicker.datePanelLabel');
+                const { labels, separator } = formatDateLabels(locale, datePanelLabel, date || initTimeDate());
+                return [labels[0].label, separator, labels[1].label].join('');
+            },
             handleClear() {
                 this.date = initTimeDate();
                 this.dateEnd = initTimeDate();
@@ -61,3 +61,64 @@ export const initTimeDate = function() {
     date.setSeconds(0);
     return date;
 };
+
+export const formatDateLabels = (function() {
+    /*
+      Formats:
+      yyyy - 4 digit year
+      m - month, numeric, 1 - 12
+      m - 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`
+      Mmmm - month, full name, capitalize the return from `toLocaleDateString`
+    */
+
+    const formats = {
+        yyyy: date => date.getFullYear(),
+        m: date => date.getMonth(),
+        mm: date => ('0' + date.getMonth()).slice(-2),
+        mmm: (date, locale) => {
+            const monthName = date.toLocaleDateString(locale, {
+                month: 'long'
+            });
+            return monthName.slice(0, 3);
+        },
+        Mmm: (date, locale) => {
+            const monthName = date.toLocaleDateString(locale, {
+                month: 'long'
+            });
+            return (monthName[0].toUpperCase() + monthName.slice(1).toLowerCase()).slice(0, 3);
+        },
+        mmmm: (date, locale) =>
+            date.toLocaleDateString(locale, {
+                month: 'long'
+            }),
+        Mmmm: (date, locale) => {
+            const monthName = date.toLocaleDateString(locale, {
+                month: 'long'
+            });
+            return monthName[0].toUpperCase() + monthName.slice(1).toLowerCase();
+        }
+    };
+    const formatRegex = new RegExp(['yyyy', 'Mmmm', 'mmmm', 'Mmm', 'mmm', 'mm', 'm'].join('|'), 'g');
+
+    return function(locale, format, date) {
+        const componetsRegex = /(\[[^\]]+\])([^\[\]]+)(\[[^\]]+\])/;
+        const components = format.match(componetsRegex).slice(1);
+        const separator = components[1];
+        const labels = [components[0], components[2]].map(component => {
+            const label = component.replace(/\[[^\]]+\]/, str => {
+                return str.slice(1, -1).replace(formatRegex, match => formats[match](date, locale));
+            });
+            return {
+                label: label,
+                type: component.includes('yy') ? 'year' : 'month'
+            };
+        });
+        return {
+            separator: separator,
+            labels: labels
+        };
+    };
+})();
 export default {
     i: {
+        locale: 'de-DE',
         select: {
             placeholder: 'Auswählen',
             noMatch: 'Keine Übereinstimmungen',
@@ -19,7 +20,8 @@ export default {
             endTime: 'Ende',
             clear: 'Leeren',
             ok: 'OK',
-            month: '',
+            datePanelLabel: '[mmmm] [yyyy]',
+            month: 'Monat',
             month1: 'Januar',
             month2: 'Februar',
             month3: 'März',
@@ -32,7 +34,7 @@ export default {
             month10: 'Oktober',
             month11: 'November',
             month12: 'Dezember',
-            year: '',
+            year: 'Jahr',
             weekStartDay: '1',
             weeks: {
                 sun: 'So',
 export default {
     i: {
+        locale: 'en-US',
         select: {
             placeholder: 'Select',
             noMatch: 'No matching data',
@@ -19,7 +20,8 @@ export default {
             endTime: 'End Time',
             clear: 'Clear',
             ok: 'OK',
-            month: '',
+            datePanelLabel: '[mmmm] [yyyy]',
+            month: 'Month',
             month1: 'January',
             month2: 'February',
             month3: 'March',
@@ -32,7 +34,7 @@ export default {
             month10: 'October',
             month11: 'November',
             month12: 'December',
-            year: '',
+            year: 'Year',
             weekStartDay: '0',
             weeks: {
                 sun: 'Sun',
 export default {
     i: {
+        locale: 'es-ES',
         select: {
             placeholder: 'Seleccionar',
             noMatch: 'Sin coincidencias',
@@ -19,6 +20,7 @@ export default {
             endTime: 'Hora de fin',
             clear: 'Limpiar',
             ok: 'Aceptar',
+            datePanelLabel: '[mmmm] [yyyy]',
             month: 'Mes',
             month1: 'Enero',
             month2: 'Febrero',
 export default {
     i: {
+        locale: 'fr-FR',
         select: {
             placeholder: 'Sélectionnez',
             noMatch: 'Aucun résultat',
@@ -19,7 +20,8 @@ export default {
             endTime: 'Heure de fin',
             clear: 'Annuler',
             ok: 'OK',
-            month: '',
+            datePanelLabel: '[mmmm] [yyyy]',
+            month: 'Mois',
             month1: 'Janvier',
             month2: 'Février',
             month3: 'Mars',
@@ -32,7 +34,7 @@ export default {
             month10: 'Octobre',
             month11: 'Novembre',
             month12: 'Decembre',
-            year: '',
+            year: 'An',
             weekStartDay: '1',
             weeks: {
                 sun: 'Dim',
 export default {
     i: {
+        locale: 'id-ID',
         select: {
             placeholder: 'Pilih',
             noMatch: 'Tidak ada data yang cocok',
@@ -19,6 +20,7 @@ export default {
             endTime: 'Waktu Selesai',
             clear: 'Bersihkan',
             ok: 'OK',
+            datePanelLabel: '[mmmm] [yyyy]',
             month: '',
             month1: 'Januari',
             month2: 'Februari',
 export default {
     i: {
+        locale: 'ja-JP',
         select: {
             placeholder: '選んでください',
             noMatch: 'マッチするデータなし',
@@ -19,6 +20,7 @@ export default {
             endTime: '終了時間',
             clear: 'クリーア',
             ok: '確定',
+            datePanelLabel: '[yyyy] [mmmm]',
             month: '月',
             month1: '1 月',
             month2: '2 月',
 export default {
     i: {
+        locale: 'ko-KR',
         select: {
             placeholder: '선택',
             noMatch: '일치하는 데이터 없음',
@@ -19,6 +20,7 @@ export default {
             endTime: '종료 시간',
             clear: '삭제',
             ok: '예',
+            datePanelLabel: '[yyyy년] [m월]',
             month: '월',
             month1: '1월',
             month2: '2월',
 export default {
     i: {
+        locale: 'pt-BR',
         select: {
             placeholder: 'Selecionar',
             noMatch: 'Não encontrado',
@@ -19,6 +20,7 @@ export default {
             endTime: 'Hora final',
             clear: 'Limpar',
             ok: 'Confirmar',
+            datePanelLabel: '[mmmm] de [yyyy]',
             month: 'Mês',
             month1: 'Janeiro',
             month2: 'Fevereiro',
 export default {
     i: {
+        locale: 'pt-PT',
         select: {
             placeholder: 'Selecionar',
             noMatch: 'Não encontrado',
@@ -19,6 +20,7 @@ export default {
             endTime: 'Hora final',
             clear: 'Limpar',
             ok: 'Confirmar',
+            datePanelLabel: '[mmmm] de [yyyy]',
             month: 'Mês',
             month1: 'Janeiro',
             month2: 'Fevereiro',
 export default {
     i: {
+        locale: 'ru-RU',
         select: {
             placeholder: 'Выбрать',
             noMatch: 'Нет соответствующих данных',
@@ -19,6 +20,7 @@ export default {
             endTime: 'Конечное время',
             clear: 'Очистить',
             ok: 'OK',
+            datePanelLabel: '[Mmmm] [yyyy]',
             month: '',
             month1: 'Январь',
             month2: 'Февраль',
 export default {
     i: {
+        locale: 'sv-SE',
         select: {
             placeholder: 'Välj',
             noMatch: 'Ingen träff',
@@ -19,6 +20,7 @@ export default {
             endTime: 'Slut tid',
             clear: 'Rensa',
             ok: 'Ok',
+            datePanelLabel: '[mmmm] [yyyy]',
             month: 'Månad',
             month1: 'Januari',
             month2: 'Februari',
 export default {
     i: {
+        locale: 'tr-TR',
         select: {
             placeholder: 'Seç',
             noMatch: 'Eşleşen veri yok',
@@ -19,6 +20,7 @@ export default {
             endTime: 'Bitişe',
             clear: 'Temizle',
             ok: 'Tamam',
+            datePanelLabel: '[mmmm] [yyyy]',
             month: '',
             month1: 'Ocak',
             month2: 'Şubat',
 export default {
     i: {
+        locale: 'vi-VN',
         select: {
             placeholder: 'Chọn',
             noMatch: 'Không tìm thấy',
@@ -19,6 +20,7 @@ export default {
             endTime: 'Ngày kết thúc',
             clear: 'Xóa',
             ok: 'Đồng ý',
+            datePanelLabel: '[Tháng mm]/[yyyy]',
             month: '',
             month1: 'Tháng 1',
             month2: 'Tháng 2',
 export default {
     i: {
+        locale: 'zh-CN',
         select: {
             placeholder: '请选择',
             noMatch: '无匹配数据',
@@ -19,6 +20,7 @@ export default {
             endTime: '结束时间',
             clear: '清空',
             ok: '确定',
+            datePanelLabel: '[yyyy年] [m月]',
             month: '月',
             month1: '1 月',
             month2: '2 月',
 export default {
     i: {
+        locale: 'zh-TW',
         select: {
             placeholder: '請選擇',
             noMatch: '無匹配數據',
@@ -19,6 +20,7 @@ export default {
             endTime: '結束時間',
             clear: '清空',
             ok: '確定',
+            datePanelLabel: '[yyyy] [mmmm]',
             month: '月',
             month1: '1 月',
             month2: '2 月',