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

add dateLabel to time panel

Browse source
This commit is contained in:
Sergio Crisostomo 2017-10-17 14:26:12 +02:00
parent b27858ddb5
commit 2537c26d18
1 changed files with 13 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,7 +3,7 @@
<div :class="[prefixCls + '-body']"> <div :class="[prefixCls + '-body']">
<div :class="[prefixCls + '-content', prefixCls + '-content-left']"> <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
<div :class="[timePrefixCls + '-header']"> <div :class="[timePrefixCls + '-header']">
<template v-if="showDate">{{ visibleDate }}</template> <template v-if="showDate">{{ leftDatePanelLabel }}</template>
<template v-else>{{ t('i.datepicker.startTime') }}</template> <template v-else>{{ t('i.datepicker.startTime') }}</template>
</div> </div>
<time-spinner <time-spinner
@ -21,7 +21,7 @@
</div> </div>
<div :class="[prefixCls + '-content', prefixCls + '-content-right']"> <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
<div :class="[timePrefixCls + '-header']"> <div :class="[timePrefixCls + '-header']">
<template v-if="showDate">{{ visibleDateEnd }}</template> <template v-if="showDate">{{ rightDatePanelLabel }}</template>
<template v-else>{{ t('i.datepicker.endTime') }}</template> <template v-else>{{ t('i.datepicker.endTime') }}</template>
</div> </div>
<time-spinner <time-spinner
@ -51,7 +51,7 @@
import Mixin from './mixin'; import Mixin from './mixin';
import Locale from '../../../mixins/locale'; import Locale from '../../../mixins/locale';
import { initTimeDate, toDate, formatDate } from '../util'; import { initTimeDate, toDate, formatDate, formatDateLabels } from '../util';
const prefixCls = 'ivu-picker-panel'; const prefixCls = 'ivu-picker-panel';
const timePrefixCls = 'ivu-time-picker'; const timePrefixCls = 'ivu-time-picker';
@ -95,19 +95,11 @@
showSeconds () { showSeconds () {
return (this.format || '').indexOf('ss') !== -1; return (this.format || '').indexOf('ss') !== -1;
}, },
visibleDate () { leftDatePanelLabel () {
const date = this.date || initTimeDate(); return this.panelLabelConfig(this.date);
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}`;
}, },
visibleDateEnd () { rightDatePanelLabel () {
const date = this.dateEnd || initTimeDate(); return this.panelLabelConfig(this.dateEnd);
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}`;
} }
}, },
watch: { watch: {
@ -136,6 +128,12 @@
} }
}, },
methods: { 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() { handleClear() {
this.date = initTimeDate(); this.date = initTimeDate();
this.dateEnd = initTimeDate(); this.dateEnd = initTimeDate();