types(DatetimePicker): add DatetimePickerInstance type (#9208)

* types(DatetimePicker): add DatetimePickerInstance type

* chore: fix

src/datetime-picker/DatePicker.tsx

@@ -20,12 +20,10 @@ import {
 } from '../utils';
 import {
   times,
-  ColumnType,
   pickerKeys,
   sharedProps,
   getTrueValue,
   getMonthEndDay,
-  DatetimePickerType,
 } from './utils';
 
 // Composables
@@ -34,6 +32,9 @@ import { useExpose } from '../composables/use-expose';
 // Components
 import { Picker } from '../picker';
 
+// Types
+import { DatetimePickerColumnType, DatetimePickerType } from './types';
+
 const currentYear = new Date().getFullYear();
 const [name] = createNamespace('date-picker');
 
@@ -125,7 +126,7 @@ export default defineComponent({
         currentDate.value || props.minDate
       );
 
-      let result: Array<{ type: ColumnType; range: number[] }> = [
+      let result: Array<{ type: DatetimePickerColumnType; range: number[] }> = [
         {
           type: 'year',
           range: [minYear, maxYear],
@@ -231,7 +232,7 @@ export default defineComponent({
       const { type } = props;
       const indexes = picker.value!.getIndexes();
 
-      const getValue = (type: ColumnType) => {
+      const getValue = (type: DatetimePickerColumnType) => {
         let index = 0;
         originColumns.value.forEach((column, columnIndex) => {
           if (type === column.type) {

src/datetime-picker/DatetimePicker.tsx

@@ -1,4 +1,4 @@
-import { ref, defineComponent } from 'vue';
+import { ref, defineComponent, ExtractPropTypes } from 'vue';
 import { pick, createNamespace, ComponentInstance, extend } from '../utils';
 import { useExpose } from '../composables/use-expose';
 import TimePicker from './TimePicker';
@@ -8,13 +8,16 @@ const [name, bem] = createNamespace('datetime-picker');
 
 const timePickerProps = Object.keys(TimePicker.props);
 const datePickerProps = Object.keys(DatePicker.props);
+const props = extend({}, TimePicker.props, DatePicker.props, {
+  modelValue: [String, Date],
+});
+
+export type DatetimePickerProps = ExtractPropTypes<typeof props>;
 
 export default defineComponent({
   name,
 
-  props: extend({}, TimePicker.props, DatePicker.props, {
+  props,
-    modelValue: [String, Date],
-  }),
 
   setup(props, { attrs, slots }) {
     const root = ref<ComponentInstance>();

src/datetime-picker/README.md

@@ -342,3 +342,16 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Dateti
 | Name      | Description         | Attribute | Return value |
 | --------- | ------------------- | --------- | ------------ |
 | getPicker | get Picker instance | -         | -            |
+
+### Types
+
+Get the type definition of the DatetimePicker instance through `DatetimePickerInstance`.
+
+```ts
+import { ref } from 'vue';
+import type { DatetimePickerInstance } from 'vant';
+
+const datetimePickerRef = ref<DatetimePickerInstance>();
+
+datetimePickerRef.value?.getPicker();
+```

src/datetime-picker/README.zh-CN.md

@@ -352,6 +352,19 @@ export default {
 | --- | --- | --- | --- |
 | getPicker | 获取 Picker 实例，用于调用 Picker 的[实例方法](#/zh-CN/picker#fang-fa) | - | - |
 
+### 类型定义
+
+通过 `DatetimePickerInstance` 获取 DatetimePicker 实例的类型定义。
+
+```ts
+import { ref } from 'vue';
+import type { DatetimePickerInstance } from 'vant';
+
+const datetimePickerRef = ref<DatetimePickerInstance>();
+
+datetimePickerRef.value?.getPicker();
+```
+
 ## 常见问题
 
 ### 设置 min-date 或 max-date 后出现页面卡死的情况？

src/datetime-picker/index.ts

@@ -5,4 +5,4 @@ const DatetimePicker = withInstall<typeof _DatetimePicker>(_DatetimePicker);
 
 export default DatetimePicker;
 export { DatetimePicker };
-export type { DatetimePickerType } from './utils';
+export type { DatetimePickerType, DatetimePickerInstance } from './types';

src/datetime-picker/types.ts

@@ -0,0 +1,27 @@
+import { ComponentPublicInstance } from 'vue';
+import type { PickerInstance } from '../picker';
+import { DatetimePickerProps } from './DatetimePicker';
+
+export type DatetimePickerColumnType =
+  | 'year'
+  | 'month'
+  | 'day'
+  | 'hour'
+  | 'minute';
+
+export type DatetimePickerType =
+  | 'date'
+  | 'time'
+  | 'datetime'
+  | 'datehour'
+  | 'month-day'
+  | 'year-month';
+
+export type DatetimePickerExpose = {
+  getPicker: () => PickerInstance;
+};
+
+export type DatetimePickerInstance = ComponentPublicInstance<
+  DatetimePickerProps,
+  DatetimePickerExpose
+>;

src/datetime-picker/utils.ts

@@ -1,20 +1,11 @@
 import { PropType } from 'vue';
 import { extend } from '../utils';
 import { pickerProps } from '../picker/Picker';
-
+import type { DatetimePickerColumnType } from './types';
-export type ColumnType = 'year' | 'month' | 'day' | 'hour' | 'minute';
-
-export type DatetimePickerType =
-  | 'date'
-  | 'time'
-  | 'datetime'
-  | 'datehour'
-  | 'month-day'
-  | 'year-month';
 
 export const sharedProps = extend({}, pickerProps, {
   filter: Function as PropType<(type: string, values: string[]) => string[]>,
-  columnsOrder: Array as PropType<ColumnType[]>,
+  columnsOrder: Array as PropType<DatetimePickerColumnType[]>,
   formatter: {
     type: Function as PropType<(type: string, value: string) => string>,
     default: (type: string, value: string) => value,