add dateLabel to time panel

Sergio Crisostomo
1 parent b27858dd
Showing 1 changed file with 13 additions and 15 deletions Show diff stats
src/components/date-picker/panel/time-range.vue
@@ -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();