From ed16eb7a59837ea8e586d13f0f269d581ac562cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Tue, 11 Feb 2020 14:45:47 +0800
Subject: [PATCH] docs(Form): add DatetimePicker demo

---
 src/datetime-picker/README.md                 |  2 -
 src/datetime-picker/README.zh-CN.md           |  2 -
 src/form/README.md                            | 48 +++++++++++++++-
 src/form/README.zh-CN.md                      | 46 +++++++++++++++
 src/form/demo/FieldType.vue                   |  3 +
 src/form/demo/FieldTypeDatetimePicker.vue     | 57 +++++++++++++++++++
 src/form/demo/FieldTypePicker.vue             |  2 +-
 src/form/test/__snapshots__/demo.spec.js.snap |  9 +++
 8 files changed, 163 insertions(+), 6 deletions(-)
 create mode 100644 src/form/demo/FieldTypeDatetimePicker.vue

diff --git a/src/datetime-picker/README.md b/src/datetime-picker/README.md
index 31c9d538c..5c8b4506e 100644
--- a/src/datetime-picker/README.md
+++ b/src/datetime-picker/README.md
@@ -82,7 +82,6 @@ export default {
       currentDate: new Date()
     };
   },
-
   methods: {
     formatter(type, val) {
       if (type === 'year') {
@@ -134,7 +133,6 @@ export default {
       currentTime: '12:00'
     };
   },
-
   methods: {
     filter(type, options) {
       if (type === 'minute') {
diff --git a/src/datetime-picker/README.zh-CN.md b/src/datetime-picker/README.zh-CN.md
index aa83774fa..cc96d7041 100644
--- a/src/datetime-picker/README.zh-CN.md
+++ b/src/datetime-picker/README.zh-CN.md
@@ -84,7 +84,6 @@ export default {
       currentDate: new Date()
     };
   },
-
   methods: {
     formatter(type, val) {
       if (type === 'year') {
@@ -138,7 +137,6 @@ export default {
       currentTime: '12:00'
     };
   },
-
   methods: {
     filter(type, options) {
       if (type === 'minute') {
diff --git a/src/form/README.md b/src/form/README.md
index a03095d81..18040fca3 100644
--- a/src/form/README.md
+++ b/src/form/README.md
@@ -204,7 +204,7 @@ export default {
   name="picker"
   :value="value"
   label="Picker"
-  placeholder="Picker"
+  placeholder="Select city"
   @click="showPicker = true"
 />
 <van-popup v-model="showPicker" position="bottom">
@@ -238,6 +238,52 @@ export default {
 };
 ```
 
+### Field Type - DatetimePicker
+
+```html
+<van-field
+  readonly
+  clickable
+  name="picker"
+  :value="value"
+  label="DatetimePicker"
+  placeholder="Select time"
+  @click="showPicker = true"
+/>
+<van-popup v-model="showPicker" position="bottom">
+  <van-datetime-picker
+    v-model="currentDate"
+    type="date"
+    @confirm="onConfirm"
+    @cancel="onCancel"
+  />
+</van-popup>
+```
+
+```js
+export default {
+  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;
+    },
+  },
+};
+```
+
 ## API
 
 ### Props
diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md
index 3b38dbeb5..a461db7b4 100644
--- a/src/form/README.zh-CN.md
+++ b/src/form/README.zh-CN.md
@@ -244,6 +244,52 @@ export default {
 };
 ```
 
+### 表单项类型 - 时间选择器
+
+```html
+<van-field
+  readonly
+  clickable
+  name="picker"
+  :value="value"
+  label="时间选择"
+  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>
+```
+
+```js
+export default {
+  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;
+    },
+  },
+};
+```
+
 ## API
 
 ### Props
diff --git a/src/form/demo/FieldType.vue b/src/form/demo/FieldType.vue
index abe351dec..09606a4e4 100644
--- a/src/form/demo/FieldType.vue
+++ b/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() {
diff --git a/src/form/demo/FieldTypeDatetimePicker.vue b/src/form/demo/FieldTypeDatetimePicker.vue
new file mode 100644
index 000000000..0d10cc758
--- /dev/null
+++ b/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>
diff --git a/src/form/demo/FieldTypePicker.vue b/src/form/demo/FieldTypePicker.vue
index 656a12b3b..7f72674f9 100644
--- a/src/form/demo/FieldTypePicker.vue
+++ b/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'],
     },
   },
diff --git a/src/form/test/__snapshots__/demo.spec.js.snap b/src/form/test/__snapshots__/demo.spec.js.snap
index fe0c60088..e94e0c786 100644
--- a/src/form/test/__snapshots__/demo.spec.js.snap
+++ b/src/form/test/__snapshots__/demo.spec.js.snap
@@ -166,6 +166,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="picker" 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>