feat(translation): date/time picker translation possibility if using vue-i18n

packages/date-picker/src/basic/date-table.vue

@@ -24,7 +24,7 @@
       <td
         v-for="cell in row"
         :class="getCellClasses(cell)"
-        v-text="cell.type === 'today' ? '今天' : cell.text"></td>
+        v-text="cell.type === 'today' ? $t('datepicker.today') : cell.text"></td>
     </tr>
     </tbody>
   </table>
@@ -214,7 +214,9 @@
     },
 
     methods: {
-      $t: $t,
+      $t(...args) {
+        return $t.apply(this, args);
+      },
 
       getCellClasses(cell) {
         const selectionMode = this.selectionMode;

packages/date-picker/src/basic/month-table.vue

@@ -58,7 +58,9 @@
     },
 
     methods: {
-      $t: $t,
+      $t(...args) {
+        return $t.apply(this, args);
+      },
 
       handleMonthTableClick(event) {
         const target = event.target;

packages/date-picker/src/panel/date-range.vue

@@ -119,12 +119,12 @@
       <div class="el-picker-panel__footer" v-if="showTime">
         <!-- <a
           class="el-picker-panel__link-btn"
-          @click="changeToToday">{{ $t('datepicker.today') }}</a> -->
+          @click="changeToToday">{{ $t('datepicker.now') }}</a> -->
         <button
           type="button"
           class="el-picker-panel__btn"
           @click="handleConfirm"
-          :disabled="btnDisabled">确定</button>
+          :disabled="btnDisabled">{{ $t('datepicker.confirm') }}</button>
       </div>
     </div>
   </transition>
@@ -140,11 +140,11 @@
       },
 
       leftLabel() {
-        return this.date.getFullYear() + '年 ' + (this.date.getMonth() + 1) + '月';
+        return this.date.getFullYear() + ' ' + this.$t('datepicker.month') + ' ' + (this.date.getMonth() + 1) + ' ' + this.$t('datepicker.month');
       },
 
       rightLabel() {
-        return this.rightDate.getFullYear() + '年 ' + (this.rightDate.getMonth() + 1) + '月';
+        return this.rightDate.getFullYear() + ' ' + this.$t('datepicker.month') + ' ' + (this.rightDate.getMonth() + 1) + ' ' + this.$t('datepicker.month');
       },
 
       leftYear() {

packages/date-picker/src/panel/date.vue

@@ -15,7 +15,7 @@
         <div class="el-picker-panel__body">
          <div class="el-date-picker__time-header" v-if="showTime">
             <input
-              placehoder="选择日期"
+              :placehoder="$t('datepicker.selectDate')"
               type="text"
               v-model="visibleDate"
               class="el-date-picker__editor">
@@ -23,7 +23,7 @@
               <input
                 @focus="timePickerVisible = true"
                 v-model="visibleTime"
-                placehoder="选择时间"
+                :placehoder="$t('datepicker.selectTime')"
                 type="text"
                 class="el-date-picker__editor">
               <time-picker
@@ -53,7 +53,7 @@
               @click="showMonthPicker"
               v-show="currentView === 'date'"
               class="el-date-picker__header-label"
-              :class="{ active: currentView === 'month' }">{{ month + 1 }}月</span>
+              :class="{ active: currentView === 'month' }">{{ month + 1 }} {{$t('datepicker.month')}}</span>
             <button
               type="button"
               @click="nextYear"
@@ -100,7 +100,7 @@
         <a
           href="JavaScript:"
           class="el-picker-panel__link-btn"
-          @click="changeToToday">{{ $t('datepicker.today') }}</a>
+          @click="changeToToday">{{ $t('datepicker.now') }}</a>
         <button
           type="button"
           class="el-picker-panel__btn"
@@ -148,7 +148,9 @@
     },
 
     methods: {
-      $t: $t,
+      $t(...args) {
+        return $t.apply(this, args);
+      },
 
       resetDate() {
         this.date = new Date(this.date);
@@ -383,11 +385,12 @@
       yearLabel() {
         const year = this.year;
         if (!year) return '';
+        const yearTranslation = this.$t('datepicker.year');
         if (this.currentView === 'year') {
           const startYear = Math.floor(year / 10) * 10;
-          return startYear + '年' + '-' + (startYear + 9) + '年';
+          return startYear + ' ' + yearTranslation + '-' + (startYear + 9) + ' ' + yearTranslation;
         }
-        return this.year + '年';
+        return this.year + ' ' + yearTranslation;
       },
 
       hours: {

packages/date-picker/src/panel/time-range.vue

@@ -5,7 +5,7 @@
       class="el-time-range-picker el-picker-panel">
       <div class="el-time-range-picker__content">
         <div class="el-time-range-picker__cell">
-          <div class="el-time-range-picker__header">开始时间</div>
+          <div class="el-time-range-picker__header">{{ $t('datepicker.startTime') }}</div>
           <div class="el-time-range-picker__body el-time-panel__content">
             <time-spinner
               ref="minSpinner"
@@ -19,7 +19,7 @@
           </div>
         </div>
         <div class="el-time-range-picker__cell">
-          <div class="el-time-range-picker__header">结束时间</div>
+          <div class="el-time-range-picker__header">{{ $t('datepicker.endTime') }}</div>
           <div class="el-time-range-picker__body el-time-panel__content">
             <time-spinner
               ref="maxSpinner"
@@ -37,12 +37,12 @@
         <button
           type="button"
           class="el-time-panel__btn cancel"
-          @click="handleCancel()">取消</button>
+          @click="handleCancel()">{{ $t('datepicker.cancel') }}</button>
         <button
           type="button"
           class="el-time-panel__btn confirm"
           @click="handleConfirm()"
-          :disabled="btnDisabled">确定</button>
+          :disabled="btnDisabled">{{ $t('datepicker.confirm') }}</button>
       </div>
     </div>
   </transition>

packages/date-picker/src/panel/time.vue

@@ -18,11 +18,11 @@
         <button
           type="button"
           class="el-time-panel__btn cancel"
-          @click="handleCancel()">取消</button>
+          @click="handleCancel()">{{ $t('datepicker.cancel') }}</button>
         <button
           type="button"
           class="el-time-panel__btn confirm"
-          @click="handleConfirm()">确定</button>
+          @click="handleConfirm()">{{ $t('datepicker.confirm') }}</button>
       </div>
     </div>
   </transition>

packages/date-picker/src/util/i18n.js

@@ -1,8 +1,16 @@
 export default {
   datepicker: {
-    today: '此刻',
+    now: '此刻',
+    today: '今天',
+    cancel: '取消',
     clear: '清空',
     confirm: '确定',
+    selectDate: '选择日期',
+    selectTime: '选择时间',
+    startTime: '开始时间',
+    endTime: '结束时间',
+    year: '年',
+    month: '月',
     week: '周次',
     weeks: {
       sun: '日',

packages/date-picker/src/util/index.js

@@ -176,7 +176,11 @@ export const limitRange = function(date, ranges) {
 
 import i18n from './i18n';
 
-export const $t = function(path) {
+export const $t = function(path, options) {
+  const vuei18n = Object.getPrototypeOf(this).$t;
+  if (typeof vuei18n === 'function') {
+    return vuei18n.apply(this, [path, options]);
+  }
   const array = path.split('.');
   let current = i18n;
   for (var i = 0, j = array.length; i < j; i++) {