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

add date panel label format logic

Browse source
This commit is contained in:
Sergio Crisostomo 2017-10-17 13:09:04 +02:00
parent 3d50db5bb2
commit b27858ddb5
4 changed files with 143 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

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