fix: time-picker type error #5109

Author: tangjinzhou

components/calendar/generateCalendar.tsx

@@ -60,6 +60,7 @@ export interface CalendarProps<DateType> {
   mode?: CalendarMode;
   fullscreen?: boolean;
   onChange?: (date: DateType | string) => void;
+  'onUpdate:value'?: (date: DateType | string) => void;
   onPanelChange?: (date: DateType | string, mode: CalendarMode) => void;
   onSelect?: (date: DateType | string) => void;
   valueFormat?: string;
@@ -88,7 +89,25 @@ function generateCalendar<
   const Calendar = defineComponent<Props>({
     name: 'ACalendar',
     inheritAttrs: false,
-    emits: ['change', 'panelChange', 'select', 'update:value'],
+    props: [
+      'prefixCls',
+      'locale',
+      'validRange',
+      'disabledDate',
+      'dateFullCellRender',
+      'dateCellRender',
+      'monthFullCellRender',
+      'monthCellRender',
+      'headerRender',
+      'value',
+      'defaultValue',
+      'mode',
+      'fullscreen',
+      'onChange',
+      'onPanelChange',
+      'onSelect',
+      'valueFormat',
+    ] as any,
     slots: [
       'dateFullCellRender',
       'dateCellRender',
@@ -306,26 +325,6 @@ function generateCalendar<
     },
   });
 
-  Calendar.props = [
-    'prefixCls',
-    'locale',
-    'validRange',
-    'disabledDate',
-    'dateFullCellRender',
-    'dateCellRender',
-    'monthFullCellRender',
-    'monthCellRender',
-    'headerRender',
-    'value',
-    'defaultValue',
-    'mode',
-    'fullscreen',
-    'onChange',
-    'onPanelChange',
-    'onSelect',
-    'valueFormat',
-  ];
-
   Calendar.install = function (app: App) {
     app.component(Calendar.name, Calendar);
     return app;

components/carousel/__tests__/__snapshots__/demo.test.js.snap

@@ -167,7 +167,7 @@ exports[`renders ./components/carousel/demo/basic.vue correctly 1`] = `
 exports[`renders ./components/carousel/demo/customArrows.vue correctly 1`] = `
 <div class="ant-carousel">
   <div class="slick-slider slick-initialized">
-    <div class="custom-slick-arrow slick-arrow slick-prev" style="left: 10px; display: block;"><span role="img" aria-label="left-circle" class="anticon anticon-left-circle"><svg focusable="false" class="" data-icon="left-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M603.3 327.5l-246 178a7.95 7.95 0 000 12.9l246 178c5.3 3.8 12.7 0 12.7-6.5V643c0-10.2-4.9-19.9-13.2-25.9L457.4 512l145.4-105.2c8.3-6 13.2-15.6 13.2-25.9V334c0-6.5-7.4-10.3-12.7-6.5z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span></div>
+    <div class="custom-slick-arrow slick-arrow slick-prev" style="left: 10px; z-index: 1; display: block;"><span role="img" aria-label="left-circle" class="anticon anticon-left-circle"><svg focusable="false" class="" data-icon="left-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M603.3 327.5l-246 178a7.95 7.95 0 000 12.9l246 178c5.3 3.8 12.7 0 12.7-6.5V643c0-10.2-4.9-19.9-13.2-25.9L457.4 512l145.4-105.2c8.3-6 13.2-15.6 13.2-25.9V334c0-6.5-7.4-10.3-12.7-6.5z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span></div>
     <div class="slick-list">
       <div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
         <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 0px;">

components/date-picker/demo/date-render.vue

@@ -51,7 +51,7 @@ export default defineComponent({
     };
     return {
       value1: ref<Dayjs>(),
-      value2: ref<Dayjs[]>([]),
+      value2: ref<[Dayjs, Dayjs]>(),
       value3: ref<Dayjs>(),
       getCurrentStyle,
     };

components/date-picker/demo/disabled-date.vue

@@ -68,7 +68,7 @@ export default defineComponent({
       };
     };
 
-    const disabledRangeTime = (_: Dayjs[], type: 'start' | 'end') => {
+    const disabledRangeTime = (_: Dayjs, type: 'start' | 'end') => {
       if (type === 'start') {
         return {
           disabledHours: () => range(0, 60).splice(4, 20),
@@ -87,8 +87,8 @@ export default defineComponent({
       dayjs,
       value1: ref<Dayjs>(),
       value2: ref<Dayjs>(),
-      value3: ref<Dayjs[]>([]),
-      value4: ref<Dayjs[]>([]),
+      value3: ref<[Dayjs, Dayjs]>(),
+      value4: ref<[Dayjs, Dayjs]>(),
       disabledDate,
       disabledDateTime,
       disabledRangeTime,

components/date-picker/demo/disabled.vue

@@ -33,8 +33,14 @@ export default defineComponent({
     return {
       value1: ref<Dayjs>(dayjs('2015-06-06', dateFormat)),
       value2: ref<Dayjs>(dayjs('2015-06', 'YYYY-MM')),
-      value3: ref<Dayjs[]>([dayjs('2015-06-06', dateFormat), dayjs('2015-06-06', dateFormat)]),
-      value4: ref<Dayjs[]>([dayjs('2019-09-03', dateFormat), dayjs('2019-11-22', dateFormat)]),
+      value3: ref<[Dayjs, Dayjs]>([
+        dayjs('2015-06-06', dateFormat),
+        dayjs('2015-06-06', dateFormat),
+      ]),
+      value4: ref<[Dayjs, Dayjs]>([
+        dayjs('2019-09-03', dateFormat),
+        dayjs('2019-11-22', dateFormat),
+      ]),
     };
   },
 });

components/date-picker/demo/format.vue

@@ -37,7 +37,10 @@ export default defineComponent({
       value1: ref<Dayjs>(dayjs('2015/01/01', dateFormat)),
       value2: ref<Dayjs>(dayjs('01/01/2015', dateFormatList[0])),
       value3: ref<Dayjs>(dayjs('2015/01', monthFormat)),
-      value4: ref<Dayjs[]>([dayjs('2015/01/01', dateFormat), dayjs('2015/01/01', dateFormat)]),
+      value4: ref<[Dayjs, Dayjs]>([
+        dayjs('2015/01/01', dateFormat),
+        dayjs('2015/01/01', dateFormat),
+      ]),
       value5: ref<Dayjs>(dayjs('2015/01/01', dateFormat)),
       dateFormat,
       monthFormat,

components/date-picker/demo/mode.vue

@@ -39,25 +39,25 @@ import { Dayjs } from 'dayjs';
 import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
-    const mode1 = ref<string>('time');
-    const mode2 = ref<string[]>(['month', 'month']);
-    const value = ref<Dayjs[]>([]);
+    const mode1 = ref<any>('time');
+    const mode2 = ref<any>(['month', 'month']);
+    const value = ref<[Dayjs, Dayjs]>();
 
     const handleOpenChange1 = (open: boolean) => {
       if (open) {
         mode1.value = 'time';
       }
     };
 
-    const handleChange = (val: Dayjs[]) => {
+    const handleChange = (val: [Dayjs, Dayjs]) => {
       value.value = val;
     };
 
-    const handlePanelChange1 = (_val: Dayjs[], mode: string) => {
+    const handlePanelChange1 = (_val: [Dayjs, Dayjs], mode: any) => {
       mode1.value = mode;
     };
 
-    const handlePanelChange2 = (val: Dayjs[], mode: string[]) => {
+    const handlePanelChange2 = (val: [Dayjs, Dayjs], mode: any[]) => {
       value.value = val;
       mode2.value = [
         mode[0] === 'date' ? 'month' : mode[0],

components/date-picker/demo/presetted-ranges.vue

@@ -31,12 +31,16 @@ We can set presetted ranges to RangePicker to improve user experience.
 <script lang="ts">
 import dayjs, { Dayjs } from 'dayjs';
 import { defineComponent, ref } from 'vue';
+type RangeValue = [Dayjs, Dayjs];
 export default defineComponent({
   setup() {
     return {
-      value1: ref<Dayjs[]>([]),
-      value2: ref<Dayjs[]>([]),
-      ranges: { Today: [dayjs(), dayjs()], 'This Month': [dayjs(), dayjs().endOf('month')] },
+      value1: ref<RangeValue>(),
+      value2: ref<RangeValue>(),
+      ranges: {
+        Today: [dayjs(), dayjs()] as RangeValue,
+        'This Month': [dayjs(), dayjs().endOf('month')] as RangeValue,
+      },
     };
   },
 });

components/date-picker/demo/range-picker.vue

@@ -28,14 +28,15 @@ Set range picker type by `picker` prop.
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import type { Dayjs } from 'dayjs';
+type RangeValue = [Dayjs, Dayjs];
 export default defineComponent({
   setup() {
     return {
-      value1: ref<Dayjs[]>([]),
-      value2: ref<Dayjs[]>([]),
-      value3: ref<Dayjs[]>([]),
-      value4: ref<Dayjs[]>([]),
-      value5: ref<Dayjs[]>([]),
+      value1: ref<RangeValue>(),
+      value2: ref<RangeValue>(),
+      value3: ref<RangeValue>(),
+      value4: ref<RangeValue>(),
+      value5: ref<RangeValue>(),
     };
   },
 });

components/date-picker/demo/select-in-range.vue

@@ -27,14 +27,15 @@ A example shows how to select a dynamic range by using `onCalendarChange` and `d
 <script lang="ts">
 import { Dayjs } from 'dayjs';
 import { defineComponent, ref } from 'vue';
+type RangeValue = [Dayjs, Dayjs];
 export default defineComponent({
   setup() {
-    const dates = ref<Dayjs[]>([]);
-    const value = ref<Dayjs[]>();
-    const hackValue = ref<Dayjs[]>();
+    const dates = ref<RangeValue>();
+    const value = ref<RangeValue>();
+    const hackValue = ref<RangeValue>();
 
     const disabledDate = (current: Dayjs) => {
-      if (!dates.value || dates.value.length === 0) {
+      if (!dates.value) {
         return false;
       }
       const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 7;
@@ -44,18 +45,18 @@ export default defineComponent({
 
     const onOpenChange = (open: boolean) => {
       if (open) {
-        dates.value = [];
-        hackValue.value = [];
+        dates.value = null;
+        hackValue.value = null;
       } else {
         hackValue.value = undefined;
       }
     };
 
-    const onChange = (val: Dayjs[]) => {
+    const onChange = (val: RangeValue) => {
       value.value = val;
     };
 
-    const onCalendarChange = (val: Dayjs[]) => {
+    const onCalendarChange = (val: RangeValue) => {
       dates.value = val;
     };
 

components/date-picker/demo/size.vue

@@ -34,7 +34,7 @@ import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
     return {
-      size: ref<string>('default'),
+      size: ref<any>('default'),
     };
   },
 });

components/date-picker/demo/start-end.vue

@@ -46,7 +46,7 @@ import { Dayjs } from 'dayjs';
 import { defineComponent, ref, watch } from 'vue';
 export default defineComponent({
   setup() {
-    const startValue = ref<Dayjs | undefined>();
+    const startValue = ref<Dayjs>();
     const endValue = ref<Dayjs>();
     const endOpen = ref<boolean>(false);
 

components/date-picker/demo/suffix.vue

@@ -28,7 +28,7 @@ Customize the suffix icon through `suffixIcon`
         <SmileOutlined />
       </template>
     </a-date-picker>
-    <a-range-picker @change="onChange">
+    <a-range-picker @change="onRangeChange">
       <template #suffixIcon>
         <SmileOutlined />
       </template>
@@ -40,7 +40,7 @@ Customize the suffix icon through `suffixIcon`
     </a-date-picker>
     <a-date-picker suffix-icon="ab" @change="onChange" />
     <a-date-picker suffix-icon="ab" placeholder="Select month" picker="month" @change="onChange" />
-    <a-range-picker suffix-icon="ab" @change="onChange" />
+    <a-range-picker suffix-icon="ab" @change="onRangeChange" />
     <a-date-picker suffix-icon="ab" placeholder="Select week" picker="week" @change="onChange" />
   </a-space>
 </template>
@@ -53,12 +53,16 @@ export default defineComponent({
     SmileOutlined,
   },
   setup() {
-    const onChange = (date: Dayjs, dateString: string[]) => {
+    const onChange = (date: Dayjs | string, dateString: string) => {
       console.log(date, dateString);
     };
 
+    const onRangeChange = (date: [Dayjs, Dayjs], dateString: [string, string]) => {
+      console.log(date, dateString);
+    };
     return {
       onChange,
+      onRangeChange,
     };
   },
 });

components/date-picker/demo/switchable.vue

@@ -37,7 +37,7 @@ import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
     return {
-      type: ref('time'),
+      type: ref<any>('time'),
     };
   },
 });

components/date-picker/demo/text.vue

@@ -34,7 +34,7 @@ import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
     const time1 = ref<Dayjs>();
-    const time2 = ref<Dayjs>();
+    const time2 = ref<[Dayjs, Dayjs]>();
 
     const onOk = (value: Dayjs) => {
       console.log('onOk: ', value);

components/date-picker/demo/time.vue

@@ -23,8 +23,8 @@ This property provide an additional time selection. When `showTime` is an Object
       :show-time="{ format: 'HH:mm' }"
       format="YYYY-MM-DD HH:mm"
       :placeholder="['Start Time', 'End Time']"
-      @change="onChange"
-      @ok="onOk"
+      @change="onRangeChange"
+      @ok="onRangeOk"
     />
   </a-space>
 </template>
@@ -33,18 +33,29 @@ import { Dayjs } from 'dayjs';
 import { defineComponent } from 'vue';
 export default defineComponent({
   setup() {
-    const onChange = (value: Dayjs[], dateString: string[]) => {
+    const onChange = (value: Dayjs, dateString: string) => {
       console.log('Selected Time: ', value);
       console.log('Formatted Selected Time: ', dateString);
     };
 
-    const onOk = (value: Dayjs[]) => {
+    const onOk = (value: Dayjs) => {
+      console.log('onOk: ', value);
+    };
+
+    const onRangeChange = (value: [Dayjs, Dayjs], dateString: [string, string]) => {
+      console.log('Selected Time: ', value);
+      console.log('Formatted Selected Time: ', dateString);
+    };
+
+    const onRangeOk = (value: [Dayjs, Dayjs]) => {
       console.log('onOk: ', value);
     };
 
     return {
       onChange,
       onOk,
+      onRangeChange,
+      onRangeOk,
     };
   },
 });

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -41,17 +41,6 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
       'renderExtraFooter',
       // 'separator',
     ],
-    emits: [
-      'change',
-      'panelChange',
-      'ok',
-      'openChange',
-      'update:value',
-      'update:open',
-      'calendarChange',
-      'focus',
-      'blur',
-    ],
     setup(props, { expose, slots, attrs, emit }) {
       const formItemContext = useInjectFormItemContext();
       devWarning(
@@ -161,6 +150,8 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
           id = formItemContext.id.value,
           ...restProps
         } = p;
+        delete restProps['onUpdate:value'];
+        delete restProps['onUpdate:open'];
         const { format, showTime } = p as any;
 
         let additionalOverrideProps: any = {};