Date-Picker: add className picker option (#16632)

* add classname

* add docs

* add test

* add range picker

* update api name

* update api name

* update test

examples/docs/en-US/date-picker.md

@@ -462,6 +462,7 @@ When picking a date range, you can assign the time part for start date and end d
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
 | disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
+| cellClassName | set custom className | Function(Date) | — | — |
 | firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
 | onPick | a callback that triggers when the selected date is changed. Only for `daterange` and `datetimerange`. | Function({ maxDate, minDate }) | - | - |
 

examples/docs/en-US/datetime-picker.md

@@ -219,6 +219,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
 | disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
+| cellClassName | set custom className | Function(Date) | — | — |
 | firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
 
 ### shortcuts

examples/docs/es/date-picker.md

@@ -462,6 +462,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
 | -------------- | ------------------------------------------------------------ | ------------------------------ | ----------------- | ----------- |
 | shortcuts      | { text, onClick } un array de objetos para establecer opciones de acceso directo, verifique la tabla siguiente | object[]                       | —                 | —           |
 | disabledDate   | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano | function                       | —                 | —           |
+| cellClassName | set custom className | Function(Date) | — | — |
 | firstDayOfWeek | primer día de la semana                                      | Number                         | 1 to 7            | 7           |
 | onPick         | una función que se dispara cuando se cambia la fecha seleccionada. Solamente para `daterange` y `datetimerange`. | Function({ maxDate, minDate }) | -                 | -           |
 

examples/docs/es/datetime-picker.md

@@ -221,6 +221,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
 | -------------- | ---------------------------------------- | -------- | ----------------- | ----------- |
 | shortcuts      | un array de objetos { text, onClick } para establecer las opciones de acceso directo, verifique la tabla debajo | objeto[] | —                 | —           |
 | disabledDate   | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un booleano | función  | —                 | —           |
+| cellClassName | set custom className | Function(Date) | — | — |
 | firstDayOfWeek | primera día de semana                    | Número   | 1 to 7            | 7           |
 
 ### Accesos directos

examples/docs/fr-FR/date-picker.md

@@ -463,6 +463,7 @@ Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de d
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | shortcuts | Un tableau d'objets { text, onClick } pour configurer les raccourcis, voir table ci-dessous. | object[] | — | — |
 | disabledDate | Une fonction qui détermine si une date est désactivée ou pas, avec cette date en paramètre. Doit retourner un booléen. | function | — | — |
+| cellClassName | set custom className | Function(Date) | — | — |
 | firstDayOfWeek | Premier jour du mois. | Number | 1 to 7 | 7 |
 | onPick | Callback se déclenchant quand la date sélectionnée change. Uniquement pour `daterange` et `datetimerange`. | Function({ maxDate, minDate }) | - | - |
 

examples/docs/fr-FR/datetime-picker.md

@@ -219,6 +219,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | shortcuts | Un tableau d'objets { text, onClick } pour mettre en place des raccourcis, vérifier le tableau ci-dessous | object[] | — | — |
 | disabledDate | Une fonction déterminant si une date est désactivée avec cette date en paramètre. Retourne un Boolean | function | — | — |
+| cellClassName | set custom className | Function(Date) | — | — |
 | firstDayOfWeek | Le premier jour de la semaine | Number | 1 à 7 | 7 |
 
 ### Raccourcis

examples/docs/zh-CN/date-picker.md

@@ -415,6 +415,7 @@
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
 | disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
+| cellClassName | 设置日期的 className | Function(Date) | — | — |
 | firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
 | onPick | 选中日期后会执行的回调，只有当 `daterange` 或 `datetimerange` 才生效 | Function({ maxDate, minDate }) | — | — |
 

examples/docs/zh-CN/datetime-picker.md

@@ -218,6 +218,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
 | disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
+| cellClassName | 设置日期的 className | Function(Date) | — | — |
 | firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
 
 ### Shortcuts

packages/date-picker/src/basic/date-table.vue

@@ -86,6 +86,8 @@
       },
 
       disabledDate: {},
+  
+      cellClassName: {},
 
       minDate: {},
 
@@ -140,6 +142,7 @@
 
         const startDate = this.startDate;
         const disabledDate = this.disabledDate;
+        const cellClassName = this.cellClassName;
         const selectedDate = this.selectionMode === 'dates' ? coerceTruthyValueToArray(this.value) : [];
         const now = getDateTimestamp(new Date());
 
@@ -192,7 +195,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, this.showWeekNumber ? j + 1 : j, cell);
           }
 
@@ -288,6 +291,10 @@
           classes.push('selected');
         }
 
+        if (cell.customClass) {
+          classes.push(cell.customClass);
+        }
+
         return classes.join(' ');
       },
 

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

@@ -118,6 +118,7 @@
               :max-date="maxDate"
               :range-state="rangeState"
               :disabled-date="disabledDate"
+              :cell-class-name="cellClassName"
               @changerange="handleChangeRange"
               :first-day-of-week="firstDayOfWeek"
               @pick="handleRangePick">
@@ -157,6 +158,7 @@
               :max-date="maxDate"
               :range-state="rangeState"
               :disabled-date="disabledDate"
+              :cell-class-name="cellClassName"
               @changerange="handleChangeRange"
               :first-day-of-week="firstDayOfWeek"
               @pick="handleRangePick">
@@ -331,6 +333,7 @@
         shortcuts: '',
         visible: '',
         disabledDate: '',
+        cellClassName: '',
         firstDayOfWeek: 7,
         minTimePickerVisible: false,
         maxTimePickerVisible: false,

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

@@ -96,6 +96,7 @@
               :value="value"
               :default-value="defaultValue ? new Date(defaultValue) : null"
               :date="date"
+              :cell-class-name="cellClassName"
               :disabled-date="disabledDate">
             </date-table>
             <year-table
@@ -515,6 +516,7 @@
         visible: false,
         currentView: 'date',
         disabledDate: '',
+        cellClassName: '',
         selectableRange: [],
         firstDayOfWeek: 7,
         showWeekNumber: false,

test/unit/specs/date-picker.spec.js

@@ -2831,4 +2831,25 @@ describe('DatePicker', () => {
       }, DELAY);
     });
   });
+  describe('picker-options:className', () => {
+    it('set custom class name', async() => {
+      vm = createVue({
+        template: '<el-date-picker type="datetime" v-model="value" ref="compo" :pickerOptions="pickerOptions" />',
+        data() {
+          return {
+            value: '',
+            pickerOptions: {
+              cellClassName() { return 'test-class'; }
+            }
+          };
+        }
+      }, true);
+      vm.$refs.compo.$el.querySelector('input').focus();
+      await wait();
+      expect(
+        (vm.$refs.compo.picker.$el.querySelector('.el-date-table__row td').className)
+          .indexOf('test-class') > -1
+      ).to.be.true;
+    });
+  });
 });