diff --git a/src/components/date-picker/panel/date-panel-label.vue b/src/components/date-picker/panel/date-panel-label.vue
new file mode 100644
index 00000000..91f0fc4e
--- /dev/null
+++ b/src/components/date-picker/panel/date-panel-label.vue
@@ -0,0 +1,25 @@
+
+
+ {{ datePanelLabel.labels[0].label }}
+ {{ datePanelLabel.separator }}
+ {{ datePanelLabel.labels[1].label }}
+
+
+
+
diff --git a/src/components/date-picker/panel/date-range.vue b/src/components/date-picker/panel/date-range.vue
index 1a8605cb..81c123ef 100644
--- a/src/components/date-picker/panel/date-range.vue
+++ b/src/components/date-picker/panel/date-range.vue
@@ -16,13 +16,10 @@
:class="iconBtnCls('prev')"
@click="prevMonth"
v-show="leftCurrentView === 'date'">
- {{ leftYearLabel }}
- {{ leftMonthLabel }}
+
- {{ rightYearLabel }}
- {{ rightMonthLabel }}
+
@@ -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();
diff --git a/src/components/date-picker/panel/date.vue b/src/components/date-picker/panel/date.vue
index 9101d407..980720ef 100644
--- a/src/components/date-picker/panel/date.vue
+++ b/src/components/date-picker/panel/date.vue
@@ -15,13 +15,10 @@
:class="iconBtnCls('prev')"
@click="changeMonth(-1)"
v-show="currentView === 'date'">
- {{ yearLabel }}
- {{ monthLabel }}
+
@@ -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';
diff --git a/src/components/date-picker/panel/time-range.vue b/src/components/date-picker/panel/time-range.vue
index d5c91102..7490bcd4 100644
--- a/src/components/date-picker/panel/time-range.vue
+++ b/src/components/date-picker/panel/time-range.vue
@@ -3,7 +3,7 @@
- {{ visibleDate }}
+ {{ leftDatePanelLabel }}
{{ t('i.datepicker.startTime') }}
- {{ visibleDateEnd }}
+ {{ rightDatePanelLabel }}
{{ t('i.datepicker.endTime') }}
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
+ };
+ };
+})();
diff --git a/src/locale/lang/de-DE.js b/src/locale/lang/de-DE.js
index 7dbf08aa..d9b94ff4 100644
--- a/src/locale/lang/de-DE.js
+++ b/src/locale/lang/de-DE.js
@@ -1,5 +1,6 @@
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',
diff --git a/src/locale/lang/en-US.js b/src/locale/lang/en-US.js
index b91f501e..4ef04dbf 100644
--- a/src/locale/lang/en-US.js
+++ b/src/locale/lang/en-US.js
@@ -1,5 +1,6 @@
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',
diff --git a/src/locale/lang/es-ES.js b/src/locale/lang/es-ES.js
index 7dc94dd6..5ba3acda 100644
--- a/src/locale/lang/es-ES.js
+++ b/src/locale/lang/es-ES.js
@@ -1,5 +1,6 @@
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',
diff --git a/src/locale/lang/fr-FR.js b/src/locale/lang/fr-FR.js
index 9dd818e3..88944556 100644
--- a/src/locale/lang/fr-FR.js
+++ b/src/locale/lang/fr-FR.js
@@ -1,5 +1,6 @@
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',
diff --git a/src/locale/lang/id-ID.js b/src/locale/lang/id-ID.js
index a64a4f2b..b8ba5672 100644
--- a/src/locale/lang/id-ID.js
+++ b/src/locale/lang/id-ID.js
@@ -1,5 +1,6 @@
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',
diff --git a/src/locale/lang/ja-JP.js b/src/locale/lang/ja-JP.js
index df641bec..8bb77195 100644
--- a/src/locale/lang/ja-JP.js
+++ b/src/locale/lang/ja-JP.js
@@ -1,5 +1,6 @@
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 月',
diff --git a/src/locale/lang/ko-KR.js b/src/locale/lang/ko-KR.js
index 3149e85e..51e5e698 100644
--- a/src/locale/lang/ko-KR.js
+++ b/src/locale/lang/ko-KR.js
@@ -1,5 +1,6 @@
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월',
diff --git a/src/locale/lang/pt-BR.js b/src/locale/lang/pt-BR.js
index 568e501d..cfda208b 100644
--- a/src/locale/lang/pt-BR.js
+++ b/src/locale/lang/pt-BR.js
@@ -1,5 +1,6 @@
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',
diff --git a/src/locale/lang/pt-PT.js b/src/locale/lang/pt-PT.js
index 5f8a147b..d3fbb2e6 100644
--- a/src/locale/lang/pt-PT.js
+++ b/src/locale/lang/pt-PT.js
@@ -1,5 +1,6 @@
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',
diff --git a/src/locale/lang/ru-RU.js b/src/locale/lang/ru-RU.js
index c0f9b114..56110999 100644
--- a/src/locale/lang/ru-RU.js
+++ b/src/locale/lang/ru-RU.js
@@ -1,5 +1,6 @@
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: 'Февраль',
diff --git a/src/locale/lang/sv-SE.js b/src/locale/lang/sv-SE.js
index 367a0f6c..e5b158cc 100644
--- a/src/locale/lang/sv-SE.js
+++ b/src/locale/lang/sv-SE.js
@@ -1,5 +1,6 @@
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',
diff --git a/src/locale/lang/tr-TR.js b/src/locale/lang/tr-TR.js
index b0c9098c..4944edce 100644
--- a/src/locale/lang/tr-TR.js
+++ b/src/locale/lang/tr-TR.js
@@ -1,5 +1,6 @@
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',
diff --git a/src/locale/lang/vi-VN.js b/src/locale/lang/vi-VN.js
index 53a80f4a..10235892 100644
--- a/src/locale/lang/vi-VN.js
+++ b/src/locale/lang/vi-VN.js
@@ -1,5 +1,6 @@
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',
diff --git a/src/locale/lang/zh-CN.js b/src/locale/lang/zh-CN.js
index 2b85680a..7c3fdaec 100644
--- a/src/locale/lang/zh-CN.js
+++ b/src/locale/lang/zh-CN.js
@@ -1,5 +1,6 @@
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 月',
diff --git a/src/locale/lang/zh-TW.js b/src/locale/lang/zh-TW.js
index cfcf2754..f006ea8b 100644
--- a/src/locale/lang/zh-TW.js
+++ b/src/locale/lang/zh-TW.js
@@ -1,5 +1,6 @@
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 月',