From a95fdddada4d1f5cf4c9e8185ead91176539a487 Mon Sep 17 00:00:00 2001 From: iamkun Date: Wed, 31 Jul 2019 12:03:12 +0800 Subject: [PATCH] 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 | 1 + examples/docs/en-US/datetime-picker.md | 1 + examples/docs/es/date-picker.md | 1 + examples/docs/es/datetime-picker.md | 1 + examples/docs/fr-FR/date-picker.md | 1 + examples/docs/fr-FR/datetime-picker.md | 1 + examples/docs/zh-CN/date-picker.md | 1 + examples/docs/zh-CN/datetime-picker.md | 1 + packages/date-picker/src/basic/date-table.vue | 9 +++++++- packages/date-picker/src/panel/date-range.vue | 3 +++ packages/date-picker/src/panel/date.vue | 2 ++ test/unit/specs/date-picker.spec.js | 21 +++++++++++++++++++ 12 files changed, 42 insertions(+), 1 deletion(-) diff --git a/examples/docs/en-US/date-picker.md b/examples/docs/en-US/date-picker.md index 83afac5a84..0b43664feb 100644 --- a/examples/docs/en-US/date-picker.md +++ b/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 }) | - | - | diff --git a/examples/docs/en-US/datetime-picker.md b/examples/docs/en-US/datetime-picker.md index 824d27497d..ef14e13eee 100644 --- a/examples/docs/en-US/datetime-picker.md +++ b/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 diff --git a/examples/docs/es/date-picker.md b/examples/docs/es/date-picker.md index 11d288f6df..2d1eaf8ccf 100644 --- a/examples/docs/es/date-picker.md +++ b/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 }) | - | - | diff --git a/examples/docs/es/datetime-picker.md b/examples/docs/es/datetime-picker.md index 5b12dea333..a1b80f3d72 100644 --- a/examples/docs/es/datetime-picker.md +++ b/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 diff --git a/examples/docs/fr-FR/date-picker.md b/examples/docs/fr-FR/date-picker.md index 282ef127a2..8ac2b176cd 100644 --- a/examples/docs/fr-FR/date-picker.md +++ b/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 }) | - | - | diff --git a/examples/docs/fr-FR/datetime-picker.md b/examples/docs/fr-FR/datetime-picker.md index 56affb1078..64609219e8 100644 --- a/examples/docs/fr-FR/datetime-picker.md +++ b/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 diff --git a/examples/docs/zh-CN/date-picker.md b/examples/docs/zh-CN/date-picker.md index 6c17d29523..aa976775ab 100644 --- a/examples/docs/zh-CN/date-picker.md +++ b/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 }) | — | — | diff --git a/examples/docs/zh-CN/datetime-picker.md b/examples/docs/zh-CN/datetime-picker.md index b0f55247ff..c1f94a8f3b 100644 --- a/examples/docs/zh-CN/datetime-picker.md +++ b/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 diff --git a/packages/date-picker/src/basic/date-table.vue b/packages/date-picker/src/basic/date-table.vue index f7b08843bf..e77ab07f9b 100644 --- a/packages/date-picker/src/basic/date-table.vue +++ b/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(' '); }, diff --git a/packages/date-picker/src/panel/date-range.vue b/packages/date-picker/src/panel/date-range.vue index a8df3ba623..6e043ede70 100644 --- a/packages/date-picker/src/panel/date-range.vue +++ b/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, diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue index 7ef1265093..dc58c286a1 100644 --- a/packages/date-picker/src/panel/date.vue +++ b/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"> { }, DELAY); }); }); + describe('picker-options:className', () => { + it('set custom class name', async() => { + vm = createVue({ + template: '', + 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; + }); + }); });