fix: date-picker props

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -12,13 +12,29 @@ import { getTimeProps, Components } from '.';
 import { defineComponent, ref } from 'vue';
 import useConfigInject from '../../_util/hooks/useConfigInject';
 import classNames from '../../_util/classNames';
+import { commonProps, rangePickerProps } from './props';
+import Omit from 'omit.js';
 
 export default function generateRangePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   const RangePicker = defineComponent<RangePickerProps<DateType>>({
     name: 'ARangePicker',
     inheritAttrs: false,
-    props: ['size', 'prefixCls', 'direction', 'getPopupContainer', 'locale', 'value'] as any,
+    props: {
-    slots: ['suffixIcon'],
+      ...commonProps<DateType>(),
+      ...rangePickerProps<DateType>(),
+    } as any,
+    slots: [
+      'suffixIcon',
+      // 'clearIcon',
+      // 'prevIcon',
+      // 'nextIcon',
+      // 'superPrevIcon',
+      // 'superNextIcon',
+      // 'panelRender',
+      'dateRender',
+      'renderExtraFooter',
+      // 'separator',
+    ],
     emits: ['change', 'panelChange', 'ok', 'openChange', 'update:value', 'calendarChange'],
     setup(props, { expose, slots, attrs, emit }) {
       const { prefixCls, direction, getPopupContainer, size, rootPrefixCls } = useConfigInject(
@@ -62,6 +78,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
         const pre = prefixCls.value;
         return (
           <VCRangePicker<DateType>
+            {...Omit(slots, ['default'])}
             {...restProps}
             separator={
               <span aria-label="to" class={`${pre}-separator`}>

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -2,22 +2,19 @@ import CalendarOutlined from '@ant-design/icons-vue/CalendarOutlined';
 import ClockCircleOutlined from '@ant-design/icons-vue/ClockCircleOutlined';
 import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 import RCPicker from '../../vc-picker';
-import type { DisabledTime, PanelMode, PickerMode } from '../../vc-picker/interface';
+import type { PickerMode } from '../../vc-picker/interface';
 import type { GenerateConfig } from '../../vc-picker/generate/index';
 import enUS from '../locale/en_US';
 import { getPlaceholder } from '../util';
 import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver';
-import type { PickerProps, PickerDateProps, PickerTimeProps, PickerLocale } from '.';
+import type { PickerProps, PickerDateProps, PickerTimeProps } from '.';
 import { getTimeProps, Components } from '.';
-import { CSSProperties, defineComponent, PropType, ref } from 'vue';
+import { defineComponent, ref } from 'vue';
 import useConfigInject from '../../_util/hooks/useConfigInject';
 import classNames from '../../_util/classNames';
-import { AlignType } from '../../vc-align/interface';
+import { commonProps, datePickerProps } from './props';
-import { VueNode } from '../../_util/type';
+import Omit from 'omit.js';
-import { SharedTimeProps } from '../../vc-picker/panels/TimePanel';
+import devWarning from '../../vc-util/devWarning';
-import { SizeType } from '../../config-provider';
-import { DateRender } from '../../vc-picker/panels/DatePanel/DateBody';
-import { commonProps } from './props';
 
 export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   type DatePickerProps = PickerProps<DateType>;
@@ -31,10 +28,27 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
       inheritAttrs: false,
       props: {
         ...commonProps<DateType>(),
+        ...datePickerProps<DateType>(),
       } as any,
-      slots: ['suffixIcon', 'panelRender', 'dateRender'],
+      slots: [
+        'suffixIcon',
+        // 'clearIcon',
+        // 'prevIcon',
+        // 'nextIcon',
+        // 'superPrevIcon',
+        // 'superNextIcon',
+        // 'panelRender',
+        'dateRender',
+        'renderExtraFooter',
+        'monthCellRender',
+      ],
       emits: ['change', 'openChange', 'focus', 'blur', 'panelChange', 'ok', 'update:value'],
       setup(props, { slots, expose, attrs, emit }) {
+        devWarning(
+          !(props as any).monthCellContentRender,
+          'DatePicker',
+          '`monthCellContentRender` is deprecated. Please use `monthCellRender"` instead.',
+        );
         const { prefixCls, direction, getPopupContainer, size, rootPrefixCls } = useConfigInject(
           'picker',
           props,
@@ -89,6 +103,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
           const pre = prefixCls.value;
           return (
             <RCPicker<DateType>
+              {...Omit(slots, ['default'])}
               ref={pickerRef}
               placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
               suffixIcon={

components/date-picker/generatePicker/props.ts

@@ -2,9 +2,19 @@ import type { CSSProperties, PropType } from 'vue';
 import type { PickerLocale } from '.';
 import type { SizeType } from '../../config-provider';
 import type { AlignType } from '../../vc-align/interface';
-import type { PanelMode, PickerMode } from '../../vc-picker/interface';
+import type {
+  CustomFormat,
+  DisabledTime,
+  DisabledTimes,
+  EventValue,
+  PanelMode,
+  PickerMode,
+  RangeValue,
+} from '../../vc-picker/interface';
 import type { DateRender } from '../../vc-picker/panels/DatePanel/DateBody';
+import type { MonthCellRender } from '../../vc-picker/panels/MonthPanel/MonthBody';
 import type { SharedTimeProps } from '../../vc-picker/panels/TimePanel';
+import type { RangeDateRender, RangeType } from '../../vc-picker/RangePicker';
 import type { VueNode } from '../../_util/type';
 
 function commonProps<DateType>() {
@@ -68,7 +78,46 @@ function commonProps<DateType>() {
 function datePickerProps<DateType>() {
   return {
     defaultPickerValue: { type: [String, Object] as PropType<DateType> },
+    defaultValue: { type: [String, Object] as PropType<DateType> },
+    value: { type: [String, Object] as PropType<DateType> },
+    disabledTime: { type: Function as PropType<DisabledTime<DateType>> },
+    format: {
+      type: [String, Function, Array] as PropType<
+        string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[]
+      >,
+    },
+    renderExtraFooter: { type: Function as PropType<(mode: PanelMode) => VueNode> },
+    showNow: { type: Boolean, default: undefined },
+    monthCellRender: { type: Function as PropType<MonthCellRender<DateType>> },
+    // deprecated  Please use `monthCellRender"` instead.',
+    monthCellContentRender: { type: Function as PropType<MonthCellRender<DateType>> },
   };
 }
 
-export { commonProps, datePickerProps };
+function rangePickerProps<DateType>() {
+  return {
+    allowEmpty: { type: Array as unknown as PropType<[boolean, boolean]> },
+    dateRender: { type: Function as PropType<RangeDateRender<DateType>> },
+    defaultPickerValue: { type: Array as unknown as PropType<[DateType, DateType]> },
+    defaultValue: { type: Array as unknown as PropType<[DateType, DateType]> },
+    value: { type: Array as unknown as PropType<[DateType, DateType]> },
+    disabledTime: {
+      type: Function as PropType<(date: EventValue<DateType>, type: RangeType) => DisabledTimes>,
+    },
+    disabled: { type: Array as unknown as PropType<[boolean, boolean]> },
+    format: String,
+    renderExtraFooter: { type: Function as PropType<() => VueNode> },
+    separator: { type: Function as PropType<() => VueNode> },
+    ranges: {
+      type: Object as PropType<
+        Record<
+          string,
+          Exclude<RangeValue<DateType>, null> | (() => Exclude<RangeValue<DateType>, null>)
+        >
+      >,
+    },
+    placeholder: Array,
+  };
+}
+
+export { commonProps, datePickerProps, rangePickerProps };

components/vc-picker/Picker.tsx

@@ -178,15 +178,15 @@ function Picker<DateType>() {
       'autocomplete',
       'showToday',
     ] as any,
-    slots: [
+    // slots: [
-      'suffixIcon',
+    //   'suffixIcon',
-      'clearIcon',
+    //   'clearIcon',
-      'prevIcon',
+    //   'prevIcon',
-      'nextIcon',
+    //   'nextIcon',
-      'superPrevIcon',
+    //   'superPrevIcon',
-      'superNextIcon',
+    //   'superNextIcon',
-      'panelRender',
+    //   'panelRender',
-    ],
+    // ],
     setup(props, { attrs, expose }) {
       const inputRef = ref(null);
       const needConfirmButton = computed(

components/vc-picker/interface.ts

@@ -1,4 +1,5 @@
 import type { Ref } from 'vue';
+import type { VueNode } from '../_util/type';
 import type { GenerateConfig } from './generate';
 
 export type Locale = {
@@ -65,10 +66,10 @@ export type PanelSharedProps<DateType> = {
   locale: Locale;
   disabledDate?: (date: DateType) => boolean;
 
-  // prevIcon?: React.ReactNode;
+  prevIcon?: VueNode;
-  // nextIcon?: React.ReactNode;
+  nextIcon?: VueNode;
-  // superPrevIcon?: React.ReactNode;
+  superPrevIcon?: VueNode;
-  // superNextIcon?: React.ReactNode;
+  superNextIcon?: VueNode;
 
   // /**
   //  * Typescript can not handle generic type so we can not use `forwardRef` here.

components/vc-picker/panels/MonthPanel/MonthBody.tsx

@@ -10,7 +10,7 @@ import useMergeProps from '../../hooks/useMergeProps';
 export const MONTH_COL_COUNT = 3;
 const MONTH_ROW_COUNT = 4;
 
-export type MonthCellRender<DateType> = (currentDate: DateType, locale: Locale) => VueNode;
+export type MonthCellRender<DateType> = (obj: { current: DateType; locale: Locale }) => VueNode;
 
 export type MonthBodyProps<DateType> = {
   prefixCls: string;
@@ -51,7 +51,7 @@ function MonthBody<DateType>(_props: MonthBodyProps<DateType>) {
   const baseMonth = generateConfig.setMonth(viewDate, 0);
 
   const getCellNode = monthCellRender
-    ? (date: DateType) => monthCellRender(date, locale)
+    ? (date: DateType) => monthCellRender({ current: date, locale })
     : undefined;
 
   return (