From 01cc15af38e954ed2a807422b6d55ced67b3ca5d Mon Sep 17 00:00:00 2001
From: uublue <zhizunyoulan@163.com>
Date: Tue, 1 Jun 2021 10:32:42 +0800
Subject: [PATCH] =?UTF-8?q?DatePicker:=20type=E4=B8=BAdate=E4=BB=A5?=
 =?UTF-8?q?=E5=A4=96=E7=9A=84=E5=80=BC=E6=97=B6=EF=BC=8C=E4=B9=9F=E8=83=BD?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81picker-options=E7=9A=84cellClassName=E9=80=89?=
 =?UTF-8?q?=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/date-picker/src/basic/month-table.vue | 11 ++++++++++-
 packages/date-picker/src/basic/year-table.vue  | 11 +++++++++--
 packages/date-picker/src/panel/date.vue        |  1 +
 packages/date-picker/src/panel/month-range.vue |  3 +++
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/date-picker/src/basic/month-table.vue b/packages/date-picker/src/basic/month-table.vue
index c25e6a07b..280f2c041 100644
--- a/packages/date-picker/src/basic/month-table.vue
+++ b/packages/date-picker/src/basic/month-table.vue
@@ -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);
           }
         }
diff --git a/packages/date-picker/src/basic/year-table.vue b/packages/date-picker/src/basic/year-table.vue
index 02509adcb..8340b46a5 100644
--- a/packages/date-picker/src/basic/year-table.vue
+++ b/packages/date-picker/src/basic/year-table.vue
@@ -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;
       },
 
diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue
index dc58c286a..aaeb54775 100644
--- a/packages/date-picker/src/panel/date.vue
+++ b/packages/date-picker/src/panel/date.vue
@@ -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
diff --git a/packages/date-picker/src/panel/month-range.vue b/packages/date-picker/src/panel/month-range.vue
index d491e3132..b0f0115e2 100644
--- a/packages/date-picker/src/panel/month-range.vue
+++ b/packages/date-picker/src/panel/month-range.vue
@@ -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