feat(Form): add Calendar demo

src/form/demo/FieldType.vue

@@ -50,6 +50,7 @@
       <field-type-picker />
       <field-type-datetime-picker />
       <field-type-area />
+      <field-type-calendar />
 
       <div style="margin: 16px 16px 0;">
         <van-button type="info" round block>{{ $t('submit') }}</van-button>
@@ -61,6 +62,7 @@
 <script>
 import FieldTypeArea from './FieldTypeArea';
 import FieldTypePicker from './FieldTypePicker';
+import FieldTypeCalendar from './FieldTypeCalendar';
 import FieldTypeDatetimePicker from './FieldTypeDatetimePicker';
 
 export default {
@@ -98,6 +100,7 @@ export default {
   components: {
     FieldTypeArea,
     FieldTypePicker,
+    FieldTypeCalendar,
     FieldTypeDatetimePicker,
   },
 

src/form/demo/FieldTypeCalendar.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <van-field
+      readonly
+      clickable
+      name="calendar"
+      :value="value"
+      :label="$t('calendar')"
+      :placeholder="$t('placeholder')"
+      @click="showCalendar = true"
+    />
+    <van-calendar v-model="showCalendar" @confirm="onConfirm" />
+  </div>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      calendar: '日历',
+      placeholder: '点击选择日期',
+    },
+    'en-US': {
+      calendar: 'Calendar',
+      placeholder: 'Select date',
+    },
+  },
+
+  data() {
+    return {
+      value: '',
+      showCalendar: false,
+    };
+  },
+
+  methods: {
+    formatDate(date) {
+      return `${date.getMonth() + 1}/${date.getDate()}`;
+    },
+
+    onConfirm(date) {
+      this.value = this.formatDate(date);
+      this.showCalendar = false;
+    },
+  },
+};
+</script>

src/form/demo/FieldTypeDatetimePicker.vue

@@ -11,8 +11,7 @@
     />
     <van-popup v-model="showPicker" position="bottom">
       <van-datetime-picker
-        v-model="currentDate"
-        type="date"
+        type="time"
         @confirm="onConfirm"
         @cancel="onCancel"
       />
@@ -37,16 +36,13 @@ export default {
     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);
+    onConfirm(time) {
+      console.log('time', time);
+      this.value = time;
       this.showPicker = false;
     },
     onCancel() {