fix: date-picker

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -13,7 +13,9 @@ 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';
+import { PanelMode, RangeValue } from '../../vc-picker/interface';
+import { RangePickerSharedProps } from '../../vc-picker/RangePicker';
+import devWarning from '../../vc-util/devWarning';
 
 export default function generateRangePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   const RangePicker = defineComponent<RangePickerProps<DateType>>({
@@ -35,8 +37,22 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
       'renderExtraFooter',
       // 'separator',
     ],
-    emits: ['change', 'panelChange', 'ok', 'openChange', 'update:value', 'calendarChange'],
+    emits: [
+      'change',
+      'panelChange',
+      'ok',
+      'openChange',
+      'update:value',
+      'calendarChange',
+      'focus',
+      'blur',
+    ],
     setup(props, { expose, slots, attrs, emit }) {
+      devWarning(
+        !(attrs as any).getCalendarContainer,
+        'DatePicker',
+        '`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.',
+      );
       const { prefixCls, direction, getPopupContainer, size, rootPrefixCls } = useConfigInject(
         'picker',
         props,
@@ -54,6 +70,24 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
         emit('update:value', dates);
         emit('change', dates, dateStrings);
       };
+      const onOpenChange = (open: boolean) => {
+        emit('openChange', open);
+      };
+      const onFoucs = () => {
+        emit('focus');
+      };
+      const onBlur = () => {
+        emit('blur');
+      };
+      const onPanelChange = (values: RangeValue<DateType>, modes: [PanelMode, PanelMode]) => {
+        emit('panelChange', values, modes);
+      };
+      const onOk = (value: DateType) => {
+        emit('ok', value);
+      };
+      const onCalendarChange: RangePickerSharedProps<DateType>['onCalendarChange'] = (...args) => {
+        emit('calendarChange', ...args);
+      };
       const [contextLocale] = useLocaleReceiver('DatePicker', enUS);
       return () => {
         const locale = { ...contextLocale.value, ...props.locale };
@@ -64,6 +98,10 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
           placeholder,
           suffixIcon = slots.suffixIcon?.(),
           picker = 'date',
+          transitionName,
+          allowClear = true,
+          dateRender = slots.dateRender,
+          renderExtraFooter = slots.renderExtraFooter,
           ...restProps
         } = p;
         const { format, showTime } = p as any;
@@ -78,8 +116,8 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
         const pre = prefixCls.value;
         return (
           <VCRangePicker<DateType>
-            {...Omit(slots, ['default'])}
+            dateRender={dateRender}
-            {...restProps}
+            renderExtraFooter={renderExtraFooter}
             separator={
               <span aria-label="to" class={`${pre}-separator`}>
                 <SwapRightOutlined />
@@ -91,8 +129,9 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
               suffixIcon || (picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />)
             }
             clearIcon={<CloseCircleFilled />}
-            allowClear
+            allowClear={allowClear}
-            transitionName={`${rootPrefixCls.value}-slide-up`}
+            transitionName={transitionName || `${rootPrefixCls.value}-slide-up`}
+            {...restProps}
             {...additionalOverrideProps}
             picker={picker}
             class={classNames(
@@ -104,7 +143,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
             )}
             locale={locale!.lang}
             prefixCls={pre}
-            getPopupContainer={getPopupContainer.value}
+            getPopupContainer={attrs.getCalendarContainer || getPopupContainer.value}
             generateConfig={generateConfig}
             prevIcon={<span class={`${pre}-prev-icon`} />}
             nextIcon={<span class={`${pre}-next-icon`} />}
@@ -113,6 +152,12 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
             components={Components}
             direction={direction.value}
             onChange={onChange}
+            onOpenChange={onOpenChange}
+            onFocus={onFoucs}
+            onBlur={onBlur}
+            onPanelChange={onPanelChange}
+            onOk={onOk}
+            onCalendarChange={onCalendarChange}
           />
         );
       };

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -2,7 +2,7 @@ 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 { PickerMode } from '../../vc-picker/interface';
+import type { PanelMode, PickerMode } from '../../vc-picker/interface';
 import type { GenerateConfig } from '../../vc-picker/generate/index';
 import enUS from '../locale/en_US';
 import { getPlaceholder } from '../util';
@@ -13,7 +13,6 @@ import { defineComponent, ref } from 'vue';
 import useConfigInject from '../../_util/hooks/useConfigInject';
 import classNames from '../../_util/classNames';
 import { commonProps, datePickerProps } from './props';
-import Omit from 'omit.js';
 import devWarning from '../../vc-util/devWarning';
 
 export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
@@ -45,10 +44,16 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
       emits: ['change', 'openChange', 'focus', 'blur', 'panelChange', 'ok', 'update:value'],
       setup(props, { slots, expose, attrs, emit }) {
         devWarning(
-          !(props as any).monthCellContentRender,
+          !((props as any).monthCellContentRender || slots.monthCellContentRender),
           'DatePicker',
           '`monthCellContentRender` is deprecated. Please use `monthCellRender"` instead.',
         );
+
+        devWarning(
+          !(attrs as any).getCalendarContainer,
+          'DatePicker',
+          '`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.',
+        );
         const { prefixCls, direction, getPopupContainer, size, rootPrefixCls } = useConfigInject(
           'picker',
           props,
@@ -66,6 +71,21 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
           emit('update:value', date);
           emit('change', date, dateString);
         };
+        const onOpenChange = (open: boolean) => {
+          emit('openChange', open);
+        };
+        const onFoucs = () => {
+          emit('focus');
+        };
+        const onBlur = () => {
+          emit('blur');
+        };
+        const onPanelChange = (value: DateType, mode: PanelMode | null) => {
+          emit('panelChange', value, mode);
+        };
+        const onOk = (value: DateType) => {
+          emit('ok', value);
+        };
 
         const [contextLocale] = useLocaleReceiver('DatePicker', enUS);
         return () => {
@@ -76,6 +96,13 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
             placeholder,
             suffixIcon = slots.suffixIcon?.(),
             showToday = true,
+            transitionName,
+            allowClear = true,
+            dateRender = slots.dateRender,
+            renderExtraFooter = slots.renderExtraFooter,
+            monthCellRender = slots.monthCellRender ||
+              (props as any).monthCellContentRender ||
+              slots.monthCellContentRender,
             ...restProps
           } = p;
           const showTime = p.showTime === '' ? true : p.showTime;
@@ -103,7 +130,9 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
           const pre = prefixCls.value;
           return (
             <RCPicker<DateType>
-              {...Omit(slots, ['default'])}
+              monthCellRender={props.monthCellRender}
+              dateRender={dateRender}
+              renderExtraFooter={renderExtraFooter}
               ref={pickerRef}
               placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
               suffixIcon={
@@ -111,8 +140,8 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
                 (mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />)
               }
               clearIcon={<CloseCircleFilled />}
-              allowClear
+              allowClear={allowClear}
-              transitionName={`${rootPrefixCls.value}-slide-up`}
+              transitionName={transitionName || `${rootPrefixCls.value}-slide-up`}
               {...restProps}
               {...additionalOverrideProps}
               showToday={showToday}
@@ -125,7 +154,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
                 attrs.class,
               )}
               prefixCls={pre}
-              getPopupContainer={getPopupContainer.value}
+              getPopupContainer={attrs.getCalendarContainer || getPopupContainer.value}
               generateConfig={generateConfig}
               prevIcon={<span class={`${pre}-prev-icon`} />}
               nextIcon={<span class={`${pre}-next-icon`} />}
@@ -134,6 +163,11 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
               components={Components}
               direction={direction.value}
               onChange={onChange}
+              onOpenChange={onOpenChange}
+              onFocus={onFoucs}
+              onBlur={onBlur}
+              onPanelChange={onPanelChange}
+              onOk={onOk}
             />
           );
         };

components/date-picker/generatePicker/props.ts

@@ -104,7 +104,7 @@ function rangePickerProps<DateType>() {
     disabledTime: {
       type: Function as PropType<(date: EventValue<DateType>, type: RangeType) => DisabledTimes>,
     },
-    disabled: { type: Array as unknown as PropType<[boolean, boolean]> },
+    disabled: { type: [Boolean, Array] as unknown as PropType<boolean | [boolean, boolean]> },
     format: String,
     renderExtraFooter: { type: Function as PropType<() => VueNode> },
     separator: { type: Function as PropType<() => VueNode> },
@@ -117,6 +117,7 @@ function rangePickerProps<DateType>() {
       >,
     },
     placeholder: Array,
+    mode: { type: Array as unknown as PropType<[PanelMode, PanelMode]> },
   };
 }
 

components/vc-picker/Picker.tsx

@@ -177,6 +177,8 @@ function Picker<DateType>() {
       'direction',
       'autocomplete',
       'showToday',
+      'renderExtraFooter',
+      'dateRender',
     ] as any,
     // slots: [
     //   'suffixIcon',
@@ -207,7 +209,6 @@ function Picker<DateType>() {
         value: toRef(props, 'value'),
         defaultValue: props.defaultValue,
       });
-
       const selectedValue = ref(mergedValue.value) as Ref<DateType>;
       const setSelectedValue = (val: DateType) => {
         selectedValue.value = val;
@@ -238,7 +239,6 @@ function Picker<DateType>() {
         generateConfig: toRef(props, 'generateConfig'),
         locale: toRef(props, 'locale'),
       });
-
       const [text, triggerTextChange, resetText] = useTextValueMapping({
         valueTexts,
         onTextChange: newText => {
@@ -526,7 +526,6 @@ function Picker<DateType>() {
         // ============================ Return =============================
 
         const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
-
         return (
           <PickerTrigger
             visible={mergedOpen.value}

components/vc-picker/PickerPanel.tsx

@@ -138,6 +138,7 @@ function PickerPanel<DateType>() {
       showTime: [Boolean, Object],
       showToday: Boolean,
       renderExtraFooter: Function,
+      dateRender: Function,
       hideHeader: Boolean,
       onSelect: Function,
       onChange: Function,

components/vc-picker/RangePicker.tsx

@@ -450,7 +450,6 @@ function RangerPicker<DateType>() {
           values && values[1]
             ? formatValue(values[1], { generateConfig, locale, format: formatList.value[0] })
             : '';
-
         if (onCalendarChange) {
           const info: RangeInfo = { range: sourceIndex === 0 ? 'start' : 'end' };
 

components/vc-picker/hooks/useTextValueMapping.ts

@@ -22,7 +22,7 @@ export default function useTextValueMapping({
 
   watch(
     () => [...valueTexts.value],
-    (cur, pre) => {
+    (cur, pre = []) => {
       if (
         cur.join('||') !== pre.join('||') &&
         valueTexts.value.every(valText => valText !== text.value)
@@ -30,6 +30,7 @@ export default function useTextValueMapping({
         resetText();
       }
     },
+    { immediate: true },
   );
 
   return [text, triggerTextChange, resetText];