chenhaodong / mew-iview

Commit 2537c26d18f5c924087e9a45f6c8ae5bf59702a8

Authored by Sergio Crisostomo
1 parent b27858dd

add dateLabel to time panel

Showing 1 changed file with 13 additions and 15 deletions   Show diff stats
Inline Side-by-side
src/components/date-picker/panel/time-range.vue
  Show/Hide comments   View file @2537c26
... ... @@ -3,7 +3,7 @@
3 3 <div :class="[prefixCls + '-body']">
4 4 <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
5 5 <div :class="[timePrefixCls + '-header']">
6   - <template v-if="showDate">{{ visibleDate }}</template>
  6 + <template v-if="showDate">{{ leftDatePanelLabel }}</template>
7 7 <template v-else>{{ t('i.datepicker.startTime') }}</template>
8 8 </div>
9 9 <time-spinner
... ... @@ -21,7 +21,7 @@
21 21 </div>
22 22 <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
23 23 <div :class="[timePrefixCls + '-header']">
24   - <template v-if="showDate">{{ visibleDateEnd }}</template>
  24 + <template v-if="showDate">{{ rightDatePanelLabel }}</template>
25 25 <template v-else>{{ t('i.datepicker.endTime') }}</template>
26 26 </div>
27 27 <time-spinner
... ... @@ -51,7 +51,7 @@
51 51 import Mixin from './mixin';
52 52 import Locale from '../../../mixins/locale';
53 53  
54   - import { initTimeDate, toDate, formatDate } from '../util';
  54 + import { initTimeDate, toDate, formatDate, formatDateLabels } from '../util';
55 55  
56 56 const prefixCls = 'ivu-picker-panel';
57 57 const timePrefixCls = 'ivu-time-picker';
... ... @@ -95,19 +95,11 @@
95 95 showSeconds () {
96 96 return (this.format || '').indexOf('ss') !== -1;
97 97 },
98   - visibleDate () {
99   - const date = this.date || initTimeDate();
100   - const tYear = this.t('i.datepicker.year');
101   - const month = date.getMonth() + 1;
102   - const tMonth = this.t(`i.datepicker.month${month}`);
103   - return `${date.getFullYear()}${tYear} ${tMonth}`;
  98 + leftDatePanelLabel () {
  99 + return this.panelLabelConfig(this.date);
104 100 },
105   - visibleDateEnd () {
106   - const date = this.dateEnd || initTimeDate();
107   - const tYear = this.t('i.datepicker.year');
108   - const month = date.getMonth() + 1;
109   - const tMonth = this.t(`i.datepicker.month${month}`);
110   - return `${date.getFullYear()}${tYear} ${tMonth}`;
  101 + rightDatePanelLabel () {
  102 + return this.panelLabelConfig(this.dateEnd);
111 103 }
112 104 },
113 105 watch: {
... ... @@ -136,6 +128,12 @@
136 128 }
137 129 },
138 130 methods: {
  131 + panelLabelConfig (date) {
  132 + const locale = this.t('i.locale');
  133 + const datePanelLabel = this.t('i.datepicker.datePanelLabel');
  134 + const { labels, separator } = formatDateLabels(locale, datePanelLabel, date || initTimeDate());
  135 + return [labels[0].label, separator, labels[1].label].join('');
  136 + },
139 137 handleClear() {
140 138 this.date = initTimeDate();
141 139 this.dateEnd = initTimeDate();
... ...