feat: date-picker add soem icon slot

components/config-provider/index.tsx

@@ -17,7 +17,7 @@ import type { ValidateMessages } from '../form/interface';
 import type { ConfigProviderProps, Theme } from './context';
 import { configProviderProps, useProvideGlobalForm } from './context';
 
-export type { ConfigProviderProps, Theme, SizeType, Direction } from './context';
+export type { ConfigProviderProps, Theme, SizeType, Direction, CSPConfig } from './context';
 export const defaultPrefixCls = 'ant';
 function getGlobalPrefixCls() {
   return globalConfigForApi.prefixCls || defaultPrefixCls;

components/date-picker/demo/format.vue

@@ -23,6 +23,7 @@ We can set the date format by `format`.
     <a-date-picker v-model:value="value3" :format="monthFormat" picker="month" />
     <a-range-picker v-model:value="value4" :format="dateFormat" />
     <a-date-picker v-model:value="value5" :format="customFormat" />
+    <a-date-picker v-model:value="value6" :format="customWeekStartEndFormat" picker="week" />
   </a-space>
 </template>
 <script lang="ts">
@@ -31,8 +32,14 @@ import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
     const dateFormat = 'YYYY/MM/DD';
+    const weekFormat = 'MM/DD';
     const monthFormat = 'YYYY/MM';
     const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
+
+    const customWeekStartEndFormat = value =>
+      `${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value)
+        .endOf('week')
+        .format(weekFormat)}`;
     return {
       value1: ref<Dayjs>(dayjs('2015/01/01', dateFormat)),
       value2: ref<Dayjs>(dayjs('01/01/2015', dateFormatList[0])),
@@ -42,9 +49,11 @@ export default defineComponent({
         dayjs('2015/01/01', dateFormat),
       ]),
       value5: ref<Dayjs>(dayjs('2015/01/01', dateFormat)),
+      value6: ref<Dayjs>(dayjs()),
       dateFormat,
       monthFormat,
       dateFormatList,
+      customWeekStartEndFormat,
       customFormat: value => `custom format: ${value.format(dateFormat)}`,
     };
   },

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -33,10 +33,10 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
     slots: [
       'suffixIcon',
       // 'clearIcon',
-      // 'prevIcon',
+      'prevIcon',
-      // 'nextIcon',
+      'nextIcon',
-      // 'superPrevIcon',
+      'superPrevIcon',
-      // 'superNextIcon',
+      'superNextIcon',
       // 'panelRender',
       'dateRender',
       'renderExtraFooter',
@@ -157,7 +157,6 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
         const { format, showTime } = p as any;
 
         let additionalOverrideProps: any = {};
-
         additionalOverrideProps = {
           ...additionalOverrideProps,
           ...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
@@ -201,10 +200,10 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
             prefixCls={pre}
             getPopupContainer={attrs.getCalendarContainer || getPopupContainer.value}
             generateConfig={generateConfig}
-            prevIcon={<span class={`${pre}-prev-icon`} />}
+            prevIcon={slots.prevIcon?.() || <span class={`${pre}-prev-icon`} />}
-            nextIcon={<span class={`${pre}-next-icon`} />}
+            nextIcon={slots.nextIcon?.() || <span class={`${pre}-next-icon`} />}
-            superPrevIcon={<span class={`${pre}-super-prev-icon`} />}
+            superPrevIcon={slots.superPrevIcon?.() || <span class={`${pre}-super-prev-icon`} />}
-            superNextIcon={<span class={`${pre}-super-next-icon`} />}
+            superNextIcon={slots.superNextIcon?.() || <span class={`${pre}-super-next-icon`} />}
             components={Components}
             direction={direction.value}
             onChange={onChange}

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -34,10 +34,10 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
       slots: [
         'suffixIcon',
         // 'clearIcon',
-        // 'prevIcon',
+        'prevIcon',
-        // 'nextIcon',
+        'nextIcon',
-        // 'superPrevIcon',
+        'superPrevIcon',
-        // 'superNextIcon',
+        'superNextIcon',
         // 'panelRender',
         'dateRender',
         'renderExtraFooter',
@@ -216,10 +216,10 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
               prefixCls={pre}
               getPopupContainer={attrs.getCalendarContainer || getPopupContainer.value}
               generateConfig={generateConfig}
-              prevIcon={<span class={`${pre}-prev-icon`} />}
+              prevIcon={slots.prevIcon?.() || <span class={`${pre}-prev-icon`} />}
-              nextIcon={<span class={`${pre}-next-icon`} />}
+              nextIcon={slots.nextIcon?.() || <span class={`${pre}-next-icon`} />}
-              superPrevIcon={<span class={`${pre}-super-prev-icon`} />}
+              superPrevIcon={slots.superPrevIcon?.() || <span class={`${pre}-super-prev-icon`} />}
-              superNextIcon={<span class={`${pre}-super-next-icon`} />}
+              superNextIcon={slots.superNextIcon?.() || <span class={`${pre}-super-next-icon`} />}
               components={Components}
               direction={direction.value}
               onChange={onChange}

components/date-picker/index.en-US.md

@@ -95,6 +95,10 @@ The following APIs are shared by DatePicker, RangePicker.
 | size | To determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - |  |
 | suffixIcon | The custom suffix icon | v-slot:suffixIcon | - |  |
 | valueFormat | optional, format of binding value. If not specified, the binding value will be a Date object | string，[date formats](https://day.js.org/docs/en/display/format) | - |  |
+| nextIcon | The custom next icon | slot | - | 3.0 |
+| prevIcon | The custom prev icon | slot | - | 3.0 |
+| superNextIcon | The custom super next icon | slot | - | 3.0 |
+| superPrevIcon | The custom super prev icon | slot | - | 3.0 |
 
 ### Common Events
 

components/date-picker/index.zh-CN.md

@@ -96,6 +96,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
 | size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - |  |
 | suffixIcon | 自定义的选择框后缀图标 | v-slot:suffixIcon | - |  |
 | valueFormat | 可选，绑定值的格式，对 value、defaultValue、defaultPickerValue 起作用。不指定则绑定值为 dayjs 对象 | string，[具体格式](https://day.js.org/docs/zh-CN/display/format) | - |  |
+| nextIcon | 自定义下一个图标 | slot | - | 3.0 |
+| prevIcon | 自定义上一个图标 | slot | - | 3.0 |
+| superNextIcon | 自定义 `<<` 切换图标 | slot | - | 3.0 |
+| superPrevIcon | 自定义 `>>` 切换图标 | slot | - | 3.0 |
 
 ### 共有的事件
 

components/date-picker/style/index.less

@@ -346,6 +346,11 @@
       border-width: 0 0 @border-width-base 0;
       border-radius: 0;
 
+      .@{picker-prefix-cls}-content,
+      table {
+        text-align: center;
+      }
+
       &-focused {
         border-color: @border-color-split;
       }

components/date-picker/style/panel.less

@@ -161,6 +161,7 @@
       z-index: 1;
       height: @picker-panel-cell-height;
       transform: translateY(-50%);
+      transition: all @animation-duration-slow;
       content: '';
     }
 
@@ -247,6 +248,7 @@
         border-top: @border-width-base dashed @picker-date-hover-range-border-color;
         border-bottom: @border-width-base dashed @picker-date-hover-range-border-color;
         transform: translateY(-50%);
+        transition: all @animation-duration-slow;
         content: '';
       }
     }
@@ -278,6 +280,7 @@
     &-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
       border-radius: @border-radius-base 0 0 @border-radius-base;
     }
+
     // range end border-radius
     &-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
       border-radius: 0 @border-radius-base @border-radius-base 0;
@@ -292,15 +295,18 @@
         bottom: 0;
         z-index: -1;
         background: @picker-date-hover-range-color;
+        transition: all @animation-duration-slow;
         content: '';
       }
     }
+
     .@{picker-prefix-cls}-date-panel
       &-in-view&-in-range&-range-hover-start
       .@{cellClassName}::after {
       right: -5px - @border-width-base;
       left: 0;
     }
+
     .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
       right: 0;
       left: -5px - @border-width-base;
@@ -310,6 +316,7 @@
     &-range-hover&-range-start::after {
       right: 50%;
     }
+
     &-range-hover&-range-end::after {
       left: 50%;
     }
@@ -340,10 +347,10 @@
 
     // >>> Disabled
     &-disabled {
+      color: @disabled-color;
       pointer-events: none;
 
       .@{cellClassName} {
-        color: @disabled-color;
         background: transparent;
       }
 
@@ -366,11 +373,6 @@
       color: @text-color;
     }
 
-    // Disabled
-    &-disabled {
-      cursor: not-allowed;
-    }
-
     .picker-cell-inner(~'@{picker-cell-inner-cls}');
   }
 
@@ -385,12 +387,6 @@
     .@{picker-cell-inner-cls} {
       padding: 0 @padding-xs;
     }
-
-    .@{picker-prefix-cls}-cell {
-      &-disabled .@{picker-cell-inner-cls} {
-        background: @picker-basic-cell-disabled-bg;
-      }
-    }
   }
 
   &-quarter-panel {
@@ -618,7 +614,7 @@
       }
 
       &-active {
-        background: fade(@calendar-item-active-bg, 20%);
+        background: @calendar-column-active-bg;
       }
 
       &:hover {
@@ -669,7 +665,7 @@
 // Fix IE11 render bug by css hacks
 // https://github.com/ant-design/ant-design/issues/21559
 // https://codepen.io/afc163-1472555193/pen/mdJRaNj?editors=0110
-/* stylelint-disable-next-line */
+/* stylelint-disable-next-line selector-type-no-unknown,selector-no-vendor-prefix */
 _:-ms-fullscreen,
 :root {
   .@{picker-prefix-cls}-range-wrapper {

components/date-picker/style/rtl.less

@@ -192,10 +192,7 @@
         left: 0;
         border-right: @border-width-base dashed @picker-date-hover-range-border-color;
         border-left: none;
-        border-top-left-radius: 0;
+        border-radius: 0 @border-radius-base @border-radius-base 0;
-        border-top-right-radius: @border-radius-base;
-        border-bottom-right-radius: @border-radius-base;
-        border-bottom-left-radius: 0;
       }
     }
 
@@ -209,10 +206,7 @@
         left: 6px;
         border-right: none;
         border-left: @border-width-base dashed @picker-date-hover-range-border-color;
-        border-top-left-radius: @border-radius-base;
+        border-radius: @border-radius-base 0 0 @border-radius-base;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: @border-radius-base;
       }
     }
 

components/list/index.tsx

@@ -1,7 +1,6 @@
 import type { App, Plugin, ExtractPropTypes, PropType } from 'vue';
 import { provide, defineComponent, ref, watch, computed, toRef } from 'vue';
 import PropTypes, { withUndefined } from '../_util/vue-types';
-import type { RenderEmptyHandler } from '../config-provider';
 
 import Spin from '../spin';
 import type { PaginationConfig } from '../pagination';
@@ -72,6 +71,7 @@ export interface ListLocale {
 export type ListProps = Partial<ExtractPropTypes<typeof listProps>>;
 
 import { ListContextKey } from './contextKey';
+import type { RenderEmptyHandler } from '../config-provider/renderEmpty';
 
 const List = defineComponent({
   name: 'AList',

components/style/themes/default.less

@@ -654,7 +654,7 @@
 @picker-basic-cell-hover-color: @item-hover-bg;
 @picker-basic-cell-active-with-range-color: @primary-1;
 @picker-basic-cell-hover-with-range-color: lighten(@primary-color, 35%);
-@picker-basic-cell-disabled-bg: @disabled-bg;
+@picker-basic-cell-disabled-bg: rgba(0, 0, 0, 0.04);
 @picker-border-color: @border-color-split;
 @picker-date-hover-range-border-color: lighten(@primary-color, 20%);
 @picker-date-hover-range-color: @picker-basic-cell-hover-with-range-color;
@@ -672,6 +672,7 @@
 @calendar-input-bg: @input-bg;
 @calendar-border-color: @border-color-inverse;
 @calendar-item-active-bg: @item-active-bg;
+@calendar-column-active-bg: fade(@calendar-item-active-bg, 20%);
 @calendar-full-bg: @calendar-bg;
 @calendar-full-panel-bg: @calendar-full-bg;
 

components/transfer/index.tsx

@@ -7,13 +7,13 @@ import List from './list';
 import Operation from './operation';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale-provider/default';
-import type { RenderEmptyHandler } from '../config-provider';
 import type { VueNode } from '../_util/type';
 import { withInstall } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import type { TransferListBodyProps } from './ListBody';
 import type { PaginationType } from './interface';
 import { useInjectFormItemContext } from '../form/FormItemContext';
+import type { RenderEmptyHandler } from '../config-provider/renderEmpty';
 
 export type { TransferListProps } from './list';
 export type { TransferOperationProps } from './operation';

components/vc-picker/panels/TimePanel/index.tsx

@@ -6,6 +6,7 @@ import { createKeydownHandler } from '../../utils/uiUtil';
 import classNames from '../../../_util/classNames';
 import { ref } from 'vue';
 import useMergeProps from '../../hooks/useMergeProps';
+// import type { RangeType } from '../../RangePicker';
 
 export type SharedTimeProps<DateType> = {
   format?: string;
@@ -27,7 +28,7 @@ export type SharedTimeProps<DateType> = {
   /** @deprecated Please use `disabledTime` instead. */
   disabledSeconds?: DisabledTimes['disabledSeconds'];
 
-  disabledTime?: (date: DateType) => DisabledTimes;
+  // disabledTime?: (date: DateType, type?: RangeType) => DisabledTimes;
 };
 
 export type TimePanelProps<DateType> = {