mirrors/element
1
0
Fork 0
mirror of https://github.com/ElemeFE/element.git synced 2025-12-16 11:44:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

DatePicker: disabled year or month, fixed #758

Browse Source
This commit is contained in:
qingwei.li
2016-11-04 18:14:50 +08:00
parent 9f945ad782
commit a2f7316b69
6 changed files with 78 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/date-picker/src/basic/month-table.vue
View File

@@ -2,44 +2,44 @@
<table @click="handleMonthTableClick" class="el-month-table">
<tbody>
<tr>
<td :class="{ current: month === 0 }">
<td :class="getCellStyle(0)">
<a class="cell">{{ $t('el.datepicker.months.jan') }}</a>
</td>
<td :class="{ current: month === 1 }">
<td :class="getCellStyle(1)">
<a class="cell">{{ $t('el.datepicker.months.feb') }}</a>
</td>
<td :class="{ current: month === 2 }">
<td :class="getCellStyle(2)">
<a class="cell">{{ $t('el.datepicker.months.mar') }}</a>
</td>
<td :class="{ current: month === 3 }">
<td :class="getCellStyle(3)">
<a class="cell">{{ $t('el.datepicker.months.apr') }}</a>
</td>
</tr>
<tr>
<td :class="{ current: month === 4 }">
<td :class="getCellStyle(4)">
<a class="cell">{{ $t('el.datepicker.months.may') }}</a>
</td>
<td :class="{ current: month === 5 }">
<td :class="getCellStyle(5)">
<a class="cell">{{ $t('el.datepicker.months.jun') }}</a>
</td>
<td :class="{ current: month === 6 }">
<td :class="getCellStyle(6)">
<a class="cell">{{ $t('el.datepicker.months.jul') }}</a>
</td>
<td :class="{ current: month === 7 }">
<td :class="getCellStyle(7)">
<a class="cell">{{ $t('el.datepicker.months.aug') }}</a>
</td>
</tr>
<tr>
<td :class="{ current: month === 8 }">
<td :class="getCellStyle(8)">
<a class="cell">{{ $t('el.datepicker.months.sep') }}</a>
</td>
<td :class="{ current: month === 9 }">
<td :class="getCellStyle(9)">
<a class="cell">{{ $t('el.datepicker.months.oct') }}</a>
</td>
<td :class="{ current: month === 10 }">
<td :class="getCellStyle(10)">
<a class="cell">{{ $t('el.datepicker.months.nov') }}</a>
</td>
<td :class="{ current: month === 11 }">
<td :class="getCellStyle(11)">
<a class="cell">{{ $t('el.datepicker.months.dec') }}</a>
</td>
</tr>
@@ -49,18 +49,34 @@
<script type="text/babel">
import Locale from 'element-ui/src/mixins/locale';
import { hasClass } from 'wind-dom/src/class';
export default {
props: {
disabledDate: {},
date: {},
month: {
type: Number
}
},
mixins: [Locale],
methods: {
getCellStyle(month) {
const style = {};
const date = new Date(this.date);
date.setMonth(month);
style.disabled = typeof this.disabledDate === 'function' &&
this.disabledDate(date);
style.current = this.month === month;
return style;
},
handleMonthTableClick(event) {
const target = event.target;
if (target.tagName !== 'A') return;
if (hasClass(target.parentNode, 'disabled')) return;
const column = target.parentNode.cellIndex;
const row = target.parentNode.parentNode.rowIndex;
const month = row * 4 + column;