drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
use date.toLocaleDateString to format year/month
This commit is contained in:
Aresn 2017-10-22 20:29:51 -05:00 • committed by GitHub
commit f672ae027c
20 changed files with 192 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/components/date-picker/panel/date-panel-label.vue Normal file
View file

@ -0,0 +1,25 @@
<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>

85
src/components/date-picker/panel/date-range.vue
View file

@ -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();

50
src/components/date-picker/panel/date.vue
View file

@ -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';

28
src/components/date-picker/panel/time-range.vue
View file

@ -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
src/components/date-picker/util.js
View file

@ -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
};
};
})();

6
src/locale/lang/de-DE.js
View file

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

6
src/locale/lang/en-US.js
View file

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

2
src/locale/lang/es-ES.js
View file

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

6
src/locale/lang/fr-FR.js
View file

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

2
src/locale/lang/id-ID.js
View file

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

2
src/locale/lang/ja-JP.js
View file

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

2
src/locale/lang/ko-KR.js
View file

@ -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월',

2
src/locale/lang/pt-BR.js
View file

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

2
src/locale/lang/pt-PT.js
View file

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

2
src/locale/lang/ru-RU.js
View file

@ -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: 'Февраль',

2
src/locale/lang/sv-SE.js
View file

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

2
src/locale/lang/tr-TR.js
View file

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

2
src/locale/lang/vi-VN.js
View file

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

2
src/locale/lang/zh-CN.js
View file

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

2
src/locale/lang/zh-TW.js
View file

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