docs(Form): fix demo

packages/vant/src/form/README.md

@@ -359,24 +359,20 @@ export default {
 };
 ```
 
-### Field Type - DatetimePicker
+### Field Type - DatePicker
 
 ```html
 <van-field
   v-model="result"
   is-link
   readonly
-  name="datetimePicker"
+  name="datePicker"
-  label="Datetime Picker"
+  label="Date Picker"
-  placeholder="Select time"
+  placeholder="Select date"
   @click="showPicker = true"
 />
 <van-popup v-model:show="showPicker" position="bottom">
-  <van-datetime-picker
+  <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
-    type="time"
-    @confirm="onConfirm"
-    @cancel="showPicker = false"
-  />
 </van-popup>
 ```
 
@@ -387,9 +383,8 @@ export default {
   setup() {
     const result = ref('');
     const showPicker = ref(false);
-
+    const onConfirm = ({ selectedValues }) => {
-    const onConfirm = (value) => {
+      result.value = selectedValues.join('/');
-      result.value = value;
       showPicker.value = false;
     };
 
@@ -431,12 +426,9 @@ export default {
   setup() {
     const result = ref('');
     const showArea = ref(false);
-    const onConfirm = (areaValues) => {
+    const onConfirm = ({ selectedOptions }) => {
       showArea.value = false;
-      result.value = areaValues
+      areaCode.value = selectedOptions.map((item) => item.text).join('/');
-        .filter((item) => !!item)
-        .map((item) => item.name)
-        .join('/');
     };
 
     return {

packages/vant/src/form/README.zh-CN.md

@@ -385,26 +385,22 @@ export default {
 };
 ```
 
-### 表单项类型 - 时间选择器
+### 表单项类型 - 日期选择器
 
-在表单中使用 [DatetimePicker 组件](#/zh-CN/datetime-picker)。
+在表单中使用 [DatePicker 组件](#/zh-CN/date-picker)。
 
 ```html
 <van-field
   v-model="result"
   is-link
   readonly
-  name="datetimePicker"
+  name="datePicker"
   label="时间选择"
   placeholder="点击选择时间"
   @click="showPicker = true"
 />
 <van-popup v-model:show="showPicker" position="bottom">
-  <van-datetime-picker
+  <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
-    type="time"
-    @confirm="onConfirm"
-    @cancel="showPicker = false"
-  />
 </van-popup>
 ```
 
@@ -415,9 +411,8 @@ export default {
   setup() {
     const result = ref('');
     const showPicker = ref(false);
-
     const onConfirm = (value) => {
-      result.value = value;
+      result.value = selectedValues.join('/');
       showPicker.value = false;
     };
 
@@ -461,12 +456,9 @@ export default {
   setup() {
     const result = ref('');
     const showArea = ref(false);
-    const onConfirm = (areaValues) => {
+    const onConfirm = ({ selectedOptions }) => {
       showArea.value = false;
-      result.value = areaValues
+      areaCode.value = selectedOptions.map((item) => item.text).join('/');
-        .filter((item) => !!item)
-        .map((item) => item.name)
-        .join('/');
     };
 
     return {

packages/vant/src/form/demo/FieldType.vue

@@ -17,7 +17,7 @@ import VanCheckboxGroup from '../../checkbox-group';
 import FieldTypeArea from './FieldTypeArea.vue';
 import FieldTypePicker from './FieldTypePicker.vue';
 import FieldTypeCalendar from './FieldTypeCalendar.vue';
-import FieldTypeDatetimePicker from './FieldTypeDatetimePicker.vue';
+import FieldTypeDatePicker from './FieldTypeDatePicker.vue';
 
 const t = useTranslate({
   'zh-CN': {
@@ -127,7 +127,7 @@ const onSubmit = (values: Record<string, string>) => {
         </van-field>
 
         <field-type-picker />
-        <field-type-datetime-picker />
+        <field-type-date-picker />
         <field-type-area />
         <field-type-calendar />
       </van-cell-group>

packages/vant/src/form/demo/FieldTypeArea.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import VanArea, { AreaColumnOption } from '../../area';
+import VanArea from '../../area';
 import VanField from '../../field';
 import VanPopup from '../../popup';
 import { ref } from 'vue';
 import { areaList } from '@vant/area-data';
 import { useTranslate } from '../../../docs/site/use-translate';
 import { areaListEn } from '../../area/demo/area-en';
+import type { PickerConfirmEventParams } from '../../picker';
 
 const t = useTranslate({
   'zh-CN': {
@@ -23,11 +24,8 @@ const t = useTranslate({
 const areaCode = ref('');
 const showArea = ref(false);
 
-const onConfirm = (areaValues: AreaColumnOption[]) => {
+const onConfirm = ({ selectedOptions }: PickerConfirmEventParams) => {
-  areaCode.value = areaValues
+  areaCode.value = selectedOptions.map((item) => item.text).join('/');
-    .filter((item) => !!item)
-    .map((item) => item.name)
-    .join('/');
   showArea.value = false;
 };
 

packages/vant/src/form/demo/FieldTypeDatePicker.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import VanField from '../../field';
 import VanPopup from '../../popup';
-import VanDatetimePicker from '../../datetime-picker';
+import VanDatePicker from '../../date-picker';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site/use-translate';
+import type { PickerConfirmEventParams } from '../../picker';
 
 const t = useTranslate({
   'zh-CN': {
@@ -19,8 +20,8 @@ const t = useTranslate({
 const result = ref('');
 const showPicker = ref(false);
 
-const onConfirm = (time: string) => {
+const onConfirm = ({ selectedValues }: PickerConfirmEventParams) => {
-  result.value = time;
+  result.value = selectedValues.join('/');
   showPicker.value = false;
 };
 
@@ -34,12 +35,12 @@ const onCancel = () => {
     v-model="result"
     is-link
     readonly
-    name="datetimePicker"
+    name="datePicker"
     :label="t('label')"
     :placeholder="t('placeholder')"
     @click="showPicker = true"
   />
   <van-popup v-model:show="showPicker" round position="bottom" teleport="body">
-    <van-datetime-picker type="time" @confirm="onConfirm" @cancel="onCancel" />
+    <van-date-picker @confirm="onConfirm" @cancel="onCancel" />
   </van-popup>
 </template>

packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap

@@ -523,7 +523,7 @@ exports[`should render demo and match snapshot 1`] = `
           <div class="van-field__body">
             <input type="text"
                    id="van-field-input"
-                   name="datetimePicker"
+                   name="datePicker"
                    class="van-field__control"
                    readonly
                    placeholder="Select time"