feat(Form): add Calendar demo

src/form/README.md

@@ -212,7 +212,7 @@ export default {
     show-toolbar
     :columns="columns"
     @confirm="onConfirm"
-    @cancel="onCancel"
+    @cancel="showPicker = false"
   />
 </van-popup>
 ```
@@ -231,9 +231,6 @@ export default {
       this.value = value;
       this.showPicker = false;
     },
-    onCancel() {
-      this.showPicker = false;
-    },
   },
 };
 ```
@@ -252,10 +249,9 @@ export default {
 />
 <van-popup v-model="showPicker" position="bottom">
   <van-datetime-picker
-    v-model="currentDate"
-    type="date"
+    type="time"
     @confirm="onConfirm"
-    @cancel="onCancel"
+    @cancel="showPicker = false"
   />
 </van-popup>
 ```
@@ -266,18 +262,11 @@ 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);
-      this.showPicker = false;
-    },
-    onCancel() {
+    onConfirm(time) {
+      this.value = time;
       this.showPicker = false;
     },
   },
@@ -300,7 +289,7 @@ export default {
   <van-area
     :area-list="areaList"
     @confirm="onConfirm"
-    @cancel="onCancel"
+    @cancel="showArea = false"
   />
 </van-popup>
 ```
@@ -319,8 +308,37 @@ export default {
       this.value = values.map(item => item.name).join('/');
       this.showArea = false;
     },
-    onCancel() {
-      this.showArea = false;
+  },
+};
+```
+
+### Field Type - Calendar
+
+```html
+<van-field
+  readonly
+  clickable
+  name="calendar"
+  :value="value"
+  label="Calendar"
+  placeholder="Select date"
+  @click="showCalendar = true"
+/>
+<van-calendar v-model="showCalendar" @confirm="onConfirm" />
+```
+
+```js
+export default {
+  data() {
+    return {
+      value: '',
+      showCalendar: false,
+    };
+  },
+  methods: {
+    onConfirm(date) {
+      this.value = `${date.getMonth() + 1}/${date.getDate()}`;
+      this.showCalendar = false;
     },
   },
 };