mirror of https://github.com/ElemeFE/element
DatePicker: type为date以外的值时,也能支持picker-options的cellClassName选项
parent
29268a3d4a
commit
01cc15af38
|
@ -40,6 +40,7 @@
|
|||
export default {
|
||||
props: {
|
||||
disabledDate: {},
|
||||
cellClassName: {},
|
||||
value: {},
|
||||
selectionMode: {
|
||||
default: 'month'
|
||||
|
@ -122,6 +123,13 @@
|
|||
style['end-date'] = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (cell.customClass && typeof cell.customClass === 'string') {
|
||||
cell.customClass.split(' ').forEach(className => {
|
||||
style[className] = true;
|
||||
});
|
||||
}
|
||||
|
||||
return style;
|
||||
},
|
||||
getMonthOfCell(month) {
|
||||
|
@ -216,6 +224,7 @@
|
|||
// TODO: refactory rows / getCellClasses
|
||||
const rows = this.tableRows;
|
||||
const disabledDate = this.disabledDate;
|
||||
const cellClassName = this.cellClassName;
|
||||
const selectedDate = [];
|
||||
const now = getMonthTimestamp(new Date());
|
||||
|
||||
|
@ -243,7 +252,7 @@
|
|||
let cellDate = new Date(time);
|
||||
cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate);
|
||||
cell.selected = arrayFind(selectedDate, date => date.getTime() === cellDate.getTime());
|
||||
|
||||
cell.customClass = typeof cellClassName === 'function' && cellClassName(cellDate);
|
||||
this.$set(row, j, cell);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
<script type="text/babel">
|
||||
import { hasClass } from 'element-ui/src/utils/dom';
|
||||
import { isDate, range, nextDate, getDayCountOfYear } from 'element-ui/src/utils/date-util';
|
||||
import { isDate, range, nextDate, getDayCountOfYear, parseDate } from 'element-ui/src/utils/date-util';
|
||||
import { arrayFindIndex, coerceTruthyValueToArray } from 'element-ui/src/utils/util';
|
||||
|
||||
const datesInYear = year => {
|
||||
|
@ -57,6 +57,7 @@
|
|||
export default {
|
||||
props: {
|
||||
disabledDate: {},
|
||||
cellClassName: {},
|
||||
value: {},
|
||||
defaultValue: {
|
||||
validator(val) {
|
||||
|
@ -84,7 +85,13 @@
|
|||
style.current = arrayFindIndex(coerceTruthyValueToArray(this.value), date => date.getFullYear() === year) >= 0;
|
||||
style.today = today.getFullYear() === year;
|
||||
style.default = this.defaultValue && this.defaultValue.getFullYear() === year;
|
||||
|
||||
let yearDate = parseDate(year + '', 'yyyy');
|
||||
let classes = typeof this.cellClassName === 'function' && this.cellClassName(yearDate);
|
||||
if (classes && typeof classes === 'string') {
|
||||
classes.split(' ').forEach(className => {
|
||||
style[className] = true;
|
||||
});
|
||||
}
|
||||
return style;
|
||||
},
|
||||
|
||||
|
|
|
@ -105,6 +105,7 @@
|
|||
:value="value"
|
||||
:default-value="defaultValue ? new Date(defaultValue) : null"
|
||||
:date="date"
|
||||
:cell-class-name="cellClassName"
|
||||
:disabled-date="disabledDate">
|
||||
</year-table>
|
||||
<month-table
|
||||
|
|
|
@ -39,6 +39,7 @@
|
|||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:range-state="rangeState"
|
||||
:cell-class-name="cellClassName"
|
||||
:disabled-date="disabledDate"
|
||||
@changerange="handleChangeRange"
|
||||
@pick="handleRangePick">
|
||||
|
@ -66,6 +67,7 @@
|
|||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:range-state="rangeState"
|
||||
:cell-class-name="cellClassName"
|
||||
:disabled-date="disabledDate"
|
||||
@changerange="handleChangeRange"
|
||||
@pick="handleRangePick">
|
||||
|
@ -150,6 +152,7 @@
|
|||
shortcuts: '',
|
||||
visible: '',
|
||||
disabledDate: '',
|
||||
cellClassName: '',
|
||||
format: '',
|
||||
arrowControl: false,
|
||||
unlinkPanels: false
|
||||
|
|
Loading…
Reference in New Issue