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 @@ + + + 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 @@
- +
- +
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 月',