docs(Form): add DatetimePicker demo

src/form/demo/FieldType.vue

@@ -48,6 +48,7 @@
       </van-field>
 
       <field-type-picker />
+      <field-type-datetime-picker />
 
       <div style="margin: 16px 16px 0;">
         <van-button type="info" round block>{{ $t('submit') }}</van-button>
@@ -58,6 +59,7 @@
 
 <script>
 import FieldTypePicker from './FieldTypePicker';
+import FieldTypeDatetimePicker from './FieldTypeDatetimePicker';
 
 export default {
   i18n: {
@@ -93,6 +95,7 @@ export default {
 
   components: {
     FieldTypePicker,
+    FieldTypeDatetimePicker,
   },
 
   data() {

src/form/demo/FieldTypeDatetimePicker.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <van-field
+      readonly
+      clickable
+      name="picker"
+      :value="value"
+      :label="$t('label')"
+      :placeholder="$t('placeholder')"
+      @click="showPicker = true"
+    />
+    <van-popup v-model="showPicker" position="bottom">
+      <van-datetime-picker
+        v-model="currentDate"
+        type="date"
+        @confirm="onConfirm"
+        @cancel="onCancel"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      label: '时间选择',
+      placeholder: '点击选择时间',
+    },
+    'en-US': {
+      label: 'Datetime Picker',
+      placeholder: 'Select time',
+    },
+  },
+
+  data() {
+    return {
+      value: '',
+      showPicker: false,
+      currentDate: new Date(),
+    };
+  },
+
+  methods: {
+    formatDate(date) {
+      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+    },
+    onConfirm(date) {
+      this.value = this.formatDate(date);
+      this.showPicker = false;
+    },
+    onCancel() {
+      this.showPicker = false;
+    },
+  },
+};
+</script>

src/form/demo/FieldTypePicker.vue

@@ -30,7 +30,7 @@ export default {
     },
     'en-US': {
       picker: 'Picker',
-      placeholder: 'Picker',
+      placeholder: 'Select city',
       textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
     },
   },