feat(DatePicker): support "confirm" method, support "getSelectedDate"… (#12762)

Co-authored-by: neverland <jait.chen@foxmail.com>

packages/vant/src/date-picker/DatePicker.tsx

@@ -3,6 +3,7 @@ import {
   watch,
   computed,
   defineComponent,
+  type ComponentPublicInstance,
   type PropType,
   type ExtractPropTypes,
 } from 'vue';
@@ -18,7 +19,8 @@ import {
 } from './utils';
 
 // Components
-import { Picker } from '../picker';
+import { Picker, PickerInstance } from '../picker';
+import { useExpose } from '../composables/use-expose';
 
 const currentYear = new Date().getFullYear();
 const [name] = createNamespace('date-picker');
@@ -42,8 +44,18 @@ export const datePickerProps = extend({}, sharedProps, {
   },
 });
 
+export type DatePickerExpose = {
+  confirm: () => void;
+  getSelectedDate: () => string[];
+};
+
 export type DatePickerProps = ExtractPropTypes<typeof datePickerProps>;
 
+export type DatePickerInstance = ComponentPublicInstance<
+  DatePickerProps,
+  DatePickerExpose
+>;
+
 export default defineComponent({
   name,
 
@@ -54,6 +66,7 @@ export default defineComponent({
   setup(props, { emit, slots }) {
     const currentValues = ref<string[]>(props.modelValue);
     const updatedByExternalSources = ref(false);
+    const pickerRef = ref<PickerInstance>();
 
     const genYearOptions = () => {
       const minYear = props.minDate.getFullYear();
@@ -121,6 +134,14 @@ export default defineComponent({
       return genOptions(minDate, maxDate, 'day', props.formatter, props.filter);
     };
 
+    const confirm = () => {
+      return pickerRef.value?.confirm();
+    };
+
+    const getSelectedDate = () => {
+      return currentValues.value;
+    };
+
     const columns = computed(() =>
       props.columnsType.map((type) => {
         switch (type) {
@@ -169,8 +190,11 @@ export default defineComponent({
     const onCancel = (...args: unknown[]) => emit('cancel', ...args);
     const onConfirm = (...args: unknown[]) => emit('confirm', ...args);
 
+    useExpose<DatePickerExpose>({ confirm, getSelectedDate });
+
     return () => (
       <Picker
+        ref={pickerRef}
         v-slots={slots}
         v-model={currentValues.value}
         columns={columns.value}

packages/vant/src/date-picker/README.md

@@ -204,10 +204,34 @@ export default {
 | columns-top | Custom content above columns | - |
 | columns-bottom | Custom content below columns | - |
 
+### Methods
+
+Use [ref](https://vuejs.org/guide/essentials/template-refs.html) to get Picker instance and call instance methods.
+
+| Name | Description | Attribute | Return value |
+| --- | --- | --- | --- |
+| confirm | Stop scrolling and emit confirm event | - | - |
+| getSelectedDate | Get current selected date | - | _string[] \| undefined_ |
+
 ### Types
 
 The component exports the following type definitions:
 
 ```ts
-import type { DatePickerProps, DatePickerColumnType } from 'vant';
+import type {
+  DatePickerProps,
+  DatePickerColumnType,
+  DatePickerInstance,
+} from 'vant';
+```
+
+`DatePickerInstance` is the type of component instance:
+
+```ts
+import { ref } from 'vue';
+import type { DatePickerInstance } from 'vant';
+
+const datePickerRef = ref<DatePickerInstance>();
+
+datePickerRef.value?.confirm();
 ```

packages/vant/src/date-picker/README.zh-CN.md

@@ -210,12 +210,36 @@ export default {
 | columns-top | 自定义选项上方内容 | - |
 | columns-bottom | 自定义选项下方内容 | - |
 
+### 方法
+
+通过 ref 可以获取到 Picker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| confirm | 停止惯性滚动并触发 `confirm` 事件 | - | - |
+| getSelectedDate | 获取当前选中的日期 | - | _string[] \| undefined_ |
+
 ### 类型定义
 
 组件导出以下类型定义：
 
 ```ts
-import type { DatePickerProps, DatePickerColumnType } from 'vant';
+import type {
+  DatePickerProps,
+  DatePickerColumnType,
+  DatePickerInstance,
+} from 'vant';
+```
+
+`DatePickerInstance` 是组件实例的类型，用法如下：
+
+```ts
+import { ref } from 'vue';
+import type { DatePickerInstance } from 'vant';
+
+const datePickerRef = ref<DatePickerInstance>();
+
+datePickerRef.value?.confirm();
 ```
 
 ## 常见问题

packages/vant/src/date-picker/index.ts

@@ -5,7 +5,7 @@ export const DatePicker = withInstall(_DatePicker);
 export default DatePicker;
 export { datePickerProps } from './DatePicker';
 export type { DatePickerProps };
-export type { DatePickerColumnType } from './DatePicker';
+export type { DatePickerColumnType, DatePickerInstance } from './DatePicker';
 
 declare module 'vue' {
   export interface GlobalComponents {