some component support i18n

some component support i18n

src/components/date-picker/base/confirm.vue

@@ -1,19 +1,21 @@
 <template>
     <div :class="[prefixCls + '-confirm']">
         <span :class="timeClasses" v-if="showTime" @click="handleToggleTime">
-            <template v-if="isTime">选择日期</template>
-            <template v-else>选择时间</template>
+            <template v-if="isTime">{{ t('i.datepicker.selectDate') }}</template>
+            <template v-else>{{ t('i.datepicker.selectTime') }}</template>
         </span>
-        <i-button size="small" type="text" @click="handleClear">清空</i-button>
-        <i-button size="small" type="primary" @click="handleSuccess">确定</i-button>
+        <i-button size="small" type="text" @click="handleClear">{{ t('i.datepicker.clear') }}</i-button>
+        <i-button size="small" type="primary" @click="handleSuccess">{{ t('i.datepicker.ok') }}</i-button>
     </div>
 </template>
 <script>
     import iButton from '../../button/button.vue';
+    import Locale from '../../../mixins/locale';
 
     const prefixCls = 'ivu-picker';
 
     export default {
+        mixins: [ Locale ],
         components: { iButton },
         props: {
             showTime: false,

src/components/date-picker/base/date-table.vue

@@ -4,7 +4,7 @@
         @click="handleClick"
         @mousemove="handleMouseMove">
         <div :class="[prefixCls + '-header']">
-            <span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
+            <span>{{ t('i.datepicker.weeks.sun') }}</span><span>{{ t('i.datepicker.weeks.mon') }}</span><span>{{ t('i.datepicker.weeks.tue') }}</span><span>{{ t('i.datepicker.weeks.wed') }}</span><span>{{ t('i.datepicker.weeks.thu') }}</span><span>{{ t('i.datepicker.weeks.fri') }}</span><span>{{ t('i.datepicker.weeks.sat') }}</span>
         </div>
         <span :class="getCellCls(cell)" v-for="cell in readCells"><em :index="$index">{{ cell.text }}</em></span>
     </div>
@@ -12,6 +12,7 @@
 <script>
     import { getFirstDayOfMonth, getDayCountOfMonth } from '../util';
     import { deepCopy } from '../../../utils/assist';
+    import Locale from '../../../mixins/locale';
 
     const prefixCls = 'ivu-date-picker-cells';
 
@@ -22,6 +23,7 @@
     };
 
     export default {
+        mixins: [ Locale ],
         props: {
             date: {},
             year: {},

src/components/date-picker/base/month-table.vue

@@ -1,13 +1,15 @@
 <template>
     <div :class="classes" @click="handleClick">
-        <span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ cell.text }}月</em></span>
+        <span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ tCell(cell.text) }}</em></span>
     </div>
 </template>
 <script>
     import { deepCopy } from '../../../utils/assist';
+    import Locale from '../../../mixins/locale';
     const prefixCls = 'ivu-date-picker-cells';
 
     export default {
+        mixins: [ Locale ],
         props: {
             date: {},
             month: {
@@ -68,6 +70,9 @@
                     this.$emit('on-pick', index);
                 }
                 this.$emit('on-pick-click');
+            },
+            tCell (cell) {
+                return this.t(`i.datepicker.months.m${cell}`);
             }
         }
     };

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

@@ -22,7 +22,7 @@
                     <span
                         :class="[datePrefixCls + '-header-label']"
                         @click="showMonthPicker('left')"
-                        v-show="leftCurrentView === 'date'">{{ leftMonth + 1 }} 月</span>
+                        v-show="leftCurrentView === 'date'">{{ leftMonthLabel }}</span>
                     <span
                         :class="iconBtnCls('next', '-double')"
                         @click="nextYear('left')"
@@ -72,7 +72,7 @@
                     <span
                         :class="[datePrefixCls + '-header-label']"
                         @click="showMonthPicker('right')"
-                        v-show="rightCurrentView === 'date'">{{ rightMonth + 1 }} 月</span>
+                        v-show="rightCurrentView === 'date'">{{ rightMonthLabel }}</span>
                     <span
                         :class="iconBtnCls('next', '-double')"
                         @click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
@@ -141,13 +141,14 @@
     import { toDate, prevMonth, nextMonth, initTimeDate } from '../util';
 
     import Mixin from './mixin';
+    import Locale from '../../../mixins/locale';
 
     const prefixCls = 'ivu-picker-panel';
     const datePrefixCls = 'ivu-date-picker';
 
     export default {
         name: 'DatePicker',
-        mixins: [Mixin],
+        mixins: [ Mixin, Locale ],
         components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
         data () {
             return {
@@ -195,20 +196,25 @@
                 }
             },
             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}年 - ${startYear + 9}年`;
+                    return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
                 } else {
                     const year = this.leftCurrentView === 'month' ? this.leftTableYear : this.leftYear;
                     if (!year) return '';
-                    return `${year}年`;
+                    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();
             },
@@ -220,20 +226,25 @@
                 }
             },
             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}年 - ${startYear + 9}年`;
+                    return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
                 } else {
                     const year = this.rightCurrentView === 'month' ? this.rightTableYear : this.rightYear;
                     if (!year) return '';
-                    return `${year}年`;
+                    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();

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

@@ -21,7 +21,7 @@
                 <span
                     :class="[datePrefixCls + '-header-label']"
                     @click="showMonthPicker"
-                    v-show="currentView === 'date'">{{ month + 1 + '月' }}</span>
+                    v-show="currentView === 'date'">{{ monthLabel }}</span>
                 <span
                     :class="iconBtnCls('next', '-double')"
                     @click="nextYear"><Icon type="ios-arrow-right"></Icon></span>
@@ -85,6 +85,7 @@
     import Confirm from '../base/confirm.vue';
 
     import Mixin from './mixin';
+    import Locale from '../../../mixins/locale';
 
     import { initTimeDate } from '../util';
 
@@ -93,7 +94,7 @@
 
     export default {
         name: 'DatePicker',
-        mixins: [Mixin],
+        mixins: [ Mixin, Locale ],
         components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
         data () {
             return {
@@ -123,13 +124,18 @@
                 ];
             },
             yearLabel () {
+                const tYear = this.t('i.datepicker.year');
                 const year = this.year;
                 if (!year) return '';
                 if (this.currentView === 'year') {
                     const startYear = Math.floor(year / 10) * 10;
-                    return `${startYear}年 - ${startYear + 9}年`;
+                    return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
                 }
-                return `${year}年`;
+                return `${year}${tYear}`;
+            },
+            monthLabel () {
+                const month = this.month + 1;
+                return this.t(`i.datepicker.month${month}`);
             }
         },
         watch: {

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

@@ -4,7 +4,7 @@
             <div :class="[prefixCls + '-content', prefixCls + '-content-left']">
                 <div :class="[timePrefixCls + '-header']">
                     <template v-if="showDate">{{ visibleDate }}</template>
-                    <template v-else>开始时间</template>
+                    <template v-else>{{ t('i.datepicker.startTime') }}</template>
                 </div>
                 <time-spinner
                     v-ref:time-spinner
@@ -22,7 +22,7 @@
             <div :class="[prefixCls + '-content', prefixCls + '-content-right']">
                 <div :class="[timePrefixCls + '-header']">
                     <template v-if="showDate">{{ visibleDateEnd }}</template>
-                    <template v-else>结束时间</template>
+                    <template v-else>{{ t('i.datepicker.endTime') }}</template>
                 </div>
                 <time-spinner
                     v-ref:time-spinner-end
@@ -49,6 +49,7 @@
     import Confirm from '../base/confirm.vue';
 
     import Mixin from './mixin';
+    import Locale from '../../../mixins/locale';
 
     import { initTimeDate, toDate, formatDate } from '../util';
 
@@ -56,7 +57,7 @@
     const timePrefixCls = 'ivu-time-picker';
 
     export default {
-        mixins: [Mixin],
+        mixins: [ Mixin, Locale ],
         components: { TimeSpinner, Confirm },
         data () {
             return {
@@ -95,11 +96,17 @@
             },
             visibleDate () {
                 const date = this.date || initTimeDate();
-                return `${date.getFullYear()}年 ${date.getMonth() + 1}月`;
+                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 () {
                 const date = this.dateEnd || initTimeDate();
-                return `${date.getFullYear()}年 ${date.getMonth() + 1}月`;
+                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: {

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

@@ -28,6 +28,7 @@
     import Confirm from '../base/confirm.vue';
 
     import Mixin from './mixin';
+    import Locale from '../../../mixins/locale';
 
     import { initTimeDate } from '../util';
 
@@ -35,7 +36,7 @@
     const timePrefixCls = 'ivu-time-picker';
 
     export default {
-        mixins: [Mixin],
+        mixins: [ Mixin, Locale ],
         components: { TimeSpinner, Confirm },
         data () {
             return {
@@ -61,7 +62,10 @@
             },
             visibleDate () {
                 const date = this.date;
-                return `${date.getFullYear()}年 ${date.getMonth() + 1}月`;
+                const month = date.getMonth() + 1;
+                const tYear = this.t('i.datepicker.year');
+                const tMonth = this.t(`i.datepicker.month${month}`);
+                return `${date.getFullYear()}${tYear} ${tMonth}`;
             }
         },
         watch: {