DatePicker: type为date以外的值时,也能支持picker-options的cellClassName选项

pull/21035/head
uublue 2021-06-01 10:32:42 +08:00
parent 29268a3d4a
commit 01cc15af38
4 changed files with 23 additions and 3 deletions

View File

@ -40,6 +40,7 @@
export default { export default {
props: { props: {
disabledDate: {}, disabledDate: {},
cellClassName: {},
value: {}, value: {},
selectionMode: { selectionMode: {
default: 'month' default: 'month'
@ -122,6 +123,13 @@
style['end-date'] = true; style['end-date'] = true;
} }
} }
if (cell.customClass && typeof cell.customClass === 'string') {
cell.customClass.split(' ').forEach(className => {
style[className] = true;
});
}
return style; return style;
}, },
getMonthOfCell(month) { getMonthOfCell(month) {
@ -216,6 +224,7 @@
// TODO: refactory rows / getCellClasses // TODO: refactory rows / getCellClasses
const rows = this.tableRows; const rows = this.tableRows;
const disabledDate = this.disabledDate; const disabledDate = this.disabledDate;
const cellClassName = this.cellClassName;
const selectedDate = []; const selectedDate = [];
const now = getMonthTimestamp(new Date()); const now = getMonthTimestamp(new Date());
@ -243,7 +252,7 @@
let cellDate = new Date(time); let cellDate = new Date(time);
cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate); cell.disabled = typeof disabledDate === 'function' && disabledDate(cellDate);
cell.selected = arrayFind(selectedDate, date => date.getTime() === cellDate.getTime()); cell.selected = arrayFind(selectedDate, date => date.getTime() === cellDate.getTime());
cell.customClass = typeof cellClassName === 'function' && cellClassName(cellDate);
this.$set(row, j, cell); this.$set(row, j, cell);
} }
} }

View File

@ -45,7 +45,7 @@
<script type="text/babel"> <script type="text/babel">
import { hasClass } from 'element-ui/src/utils/dom'; 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'; import { arrayFindIndex, coerceTruthyValueToArray } from 'element-ui/src/utils/util';
const datesInYear = year => { const datesInYear = year => {
@ -57,6 +57,7 @@
export default { export default {
props: { props: {
disabledDate: {}, disabledDate: {},
cellClassName: {},
value: {}, value: {},
defaultValue: { defaultValue: {
validator(val) { validator(val) {
@ -84,7 +85,13 @@
style.current = arrayFindIndex(coerceTruthyValueToArray(this.value), date => date.getFullYear() === year) >= 0; style.current = arrayFindIndex(coerceTruthyValueToArray(this.value), date => date.getFullYear() === year) >= 0;
style.today = today.getFullYear() === year; style.today = today.getFullYear() === year;
style.default = this.defaultValue && this.defaultValue.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; return style;
}, },

View File

@ -105,6 +105,7 @@
:value="value" :value="value"
:default-value="defaultValue ? new Date(defaultValue) : null" :default-value="defaultValue ? new Date(defaultValue) : null"
:date="date" :date="date"
:cell-class-name="cellClassName"
:disabled-date="disabledDate"> :disabled-date="disabledDate">
</year-table> </year-table>
<month-table <month-table

View File

@ -39,6 +39,7 @@
:min-date="minDate" :min-date="minDate"
:max-date="maxDate" :max-date="maxDate"
:range-state="rangeState" :range-state="rangeState"
:cell-class-name="cellClassName"
:disabled-date="disabledDate" :disabled-date="disabledDate"
@changerange="handleChangeRange" @changerange="handleChangeRange"
@pick="handleRangePick"> @pick="handleRangePick">
@ -66,6 +67,7 @@
:min-date="minDate" :min-date="minDate"
:max-date="maxDate" :max-date="maxDate"
:range-state="rangeState" :range-state="rangeState"
:cell-class-name="cellClassName"
:disabled-date="disabledDate" :disabled-date="disabledDate"
@changerange="handleChangeRange" @changerange="handleChangeRange"
@pick="handleRangePick"> @pick="handleRangePick">
@ -150,6 +152,7 @@
shortcuts: '', shortcuts: '',
visible: '', visible: '',
disabledDate: '', disabledDate: '',
cellClassName: '',
format: '', format: '',
arrowControl: false, arrowControl: false,
unlinkPanels: false unlinkPanels: false