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;
     },
   },
 };

src/form/README.zh-CN.md

@@ -218,7 +218,7 @@ export default {
     show-toolbar
     :columns="columns"
     @confirm="onConfirm"
-    @cancel="onCancel"
+    @cancel="showPicker = false"
   />
 </van-popup>
 ```
@@ -237,9 +237,6 @@ export default {
       this.value = value;
       this.showPicker = false;
     },
-    onCancel() {
-      this.showPicker = false;
-    },
   },
 };
 ```
@@ -258,10 +255,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>
 ```
@@ -272,18 +268,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;
     },
   },
@@ -306,7 +295,7 @@ export default {
   <van-area
     :area-list="areaList"
     @confirm="onConfirm"
-    @cancel="onCancel"
+    @cancel="showArea = false"
   />
 </van-popup>
 ```
@@ -317,7 +306,7 @@ export default {
     return {
       value: '',
       showArea: false,
-      areaList: {} // 数据格式见 Area 组件文档
+      areaList: {}, // 数据格式见 Area 组件文档
     };
   },
   methods: {
@@ -325,8 +314,37 @@ export default {
       this.value = values.map(item => item.name).join('/');
       this.showArea = false;
     },
-    onCancel() {
-      this.showArea = false;
+  },
+};
+```
+
+### 表单项类型 - 日历
+
+```html
+<van-field
+  readonly
+  clickable
+  name="calendar"
+  :value="value"
+  label="日历"
+  placeholder="点击选择日期"
+  @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;
     },
   },
 };

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() {

src/form/test/__snapshots__/demo.spec.js.snap

@@ -184,6 +184,15 @@ exports[`renders demo correctly 1`] = `
         </div>
         <!---->
       </div>
+      <div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
+          <div class="van-cell__title van-field__label"><span>日历</span></div>
+          <div class="van-cell__value van-field__value">
+            <div class="van-field__body"><input type="text" name="calendar" readonly="readonly" placeholder="点击选择日期" class="van-field__control"></div>
+          </div>
+        </div>
+        <!---->
+      </div>
       <div style="margin: 16px 16px 0px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
     </form>
   </div>