From 4622b12869bd0344181eecd0461e700b29177d7b Mon Sep 17 00:00:00 2001
From: msidolphin <msidolphin@outlook.com>
Date: Tue, 6 Jul 2021 15:36:38 +0800
Subject: [PATCH] docs: improve description of date-picker value-format prop
 (#2416) (#2449)

---
 packages/time-picker/src/common/picker.vue |  2 +-
 website/docs/en-US/date-picker.md          | 18 ++++++++++--
 website/docs/es/date-picker.md             | 34 +++++++++++++++++++++-
 website/docs/fr-FR/date-picker.md          | 34 +++++++++++++++++++++-
 website/docs/jp/date-picker.md             | 34 +++++++++++++++++++++-
 website/docs/zh-CN/date-picker.md          | 15 +++++++++-
 6 files changed, 130 insertions(+), 7 deletions(-)

diff --git a/packages/time-picker/src/common/picker.vue b/packages/time-picker/src/common/picker.vue
index 58b9a8e138..815231ad97 100644
--- a/packages/time-picker/src/common/picker.vue
+++ b/packages/time-picker/src/common/picker.vue
@@ -292,7 +292,7 @@ export default defineComponent({
         if (Array.isArray(props.modelValue)) {
           result = props.modelValue.map(_=> parser(_, props.valueFormat))
         } else {
-          result = parser(props.modelValue as Date, props.valueFormat)
+          result = parser(props.modelValue, props.valueFormat)
         }
       }
 
diff --git a/website/docs/en-US/date-picker.md b/website/docs/en-US/date-picker.md
index 0afe65be4e..7cee33b675 100644
--- a/website/docs/en-US/date-picker.md
+++ b/website/docs/en-US/date-picker.md
@@ -485,7 +485,7 @@ If type is `daterange`, `default-value` sets the left side calendar.
 :::
 
 ###  Date Formats
-Use `format` to control displayed text's format in the input box.
+Use `format` to control displayed text's format in the input box. Use `value-format` to control binding value's format.
 
 By default, the component accepts and emits a `Date` object.
 
@@ -519,6 +519,17 @@ Pay attention to capitalization
       value-format="YYYY-MM-DD">
     </el-date-picker>
   </div>
+  <div class="block">
+    <span class="demonstration">Timestamp</span>
+    <div class="demonstration">Value：{{ value3 }}</div>
+    <el-date-picker
+      v-model="value3"
+      type="date"
+      placeholder="Pick a Date"
+      format="YYYY/MM/DD"
+      value-format="x">
+    </el-date-picker>
+  </div>
 </template>
 
 <script>
@@ -526,7 +537,8 @@ Pay attention to capitalization
     data() {
       return {
         value1: '',
-        value2: ''
+        value2: '',
+        value3: ''
       };
     }
   };
@@ -540,10 +552,12 @@ Pay attention to capitalization
     setup() {
       const value1 = ref('');
       const value2 = ref('');
+      const value3 = ref('');
 
       return {
         value1,
         value2,
+        value3,
       };
     },
   });
diff --git a/website/docs/es/date-picker.md b/website/docs/es/date-picker.md
index 0677c41284..c6509661cd 100644
--- a/website/docs/es/date-picker.md
+++ b/website/docs/es/date-picker.md
@@ -487,7 +487,7 @@ Si el tipo es `daterange`, `default-value` establece el calendario del lado izqu
 :::
 
 ###  Formatos de Date
-Utilice `format` para controlar el formato del texto visualizado en el input.
+Utilice `format` para controlar el formato del texto visualizado en el input. Utilice `value-format` para controlar el formato del valor vinculado.
 
 Por defecto, el componente acepta y emite un objeto Date.
 
@@ -521,6 +521,17 @@ Preste atención a la capitalización
       value-format="YYYY-MM-DD">
     </el-date-picker>
   </div>
+  <div class="block">
+    <span class="demonstration">Timestamp</span>
+    <div class="demonstration">Value：{{ value3 }}</div>
+    <el-date-picker
+      v-model="value3"
+      type="date"
+      placeholder="Pick a Date"
+      format="YYYY/MM/DD"
+      value-format="x">
+    </el-date-picker>
+  </div>
 </template>
 
 <script>
@@ -534,6 +545,27 @@ Preste atención a la capitalización
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const value1 = ref('');
+      const value2 = ref('');
+      const value3 = ref('');
+
+      return {
+        value1,
+        value2,
+        value3,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/fr-FR/date-picker.md b/website/docs/fr-FR/date-picker.md
index 10ebe33f82..48d35f6798 100644
--- a/website/docs/fr-FR/date-picker.md
+++ b/website/docs/fr-FR/date-picker.md
@@ -485,7 +485,7 @@ Si le type est `daterange`, `default-value` configure la panneau de gauche.
 
 ### Formats de date
 
-Utilisez `format` pour contrôler l'affichage de la date dans le champ.
+Utilisez `format` pour contrôler l'affichage de la date dans le champ. Utilisez `value-format` pour contrôler le format de la variable stockée.
 
 Par défaut, le composant accepte et émet un objet `Date`.
 
@@ -519,6 +519,17 @@ Attention à la capitalisation !
       value-format="YYYY-MM-DD">
     </el-date-picker>
   </div>
+  <div class="block">
+    <span class="demonstration">Timestamp</span>
+    <div class="demonstration">Value：{{ value3 }}</div>
+    <el-date-picker
+      v-model="value3"
+      type="date"
+      placeholder="Sélectionnez une date"
+      format="YYYY/MM/DD"
+      value-format="x">
+    </el-date-picker>
+  </div>
 </template>
 
 <script>
@@ -532,6 +543,27 @@ Attention à la capitalisation !
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const value1 = ref('');
+      const value2 = ref('');
+      const value3 = ref('');
+
+      return {
+        value1,
+        value2,
+        value3,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/jp/date-picker.md b/website/docs/jp/date-picker.md
index d3d6c9b0a2..a787ab9ee8 100644
--- a/website/docs/jp/date-picker.md
+++ b/website/docs/jp/date-picker.md
@@ -481,7 +481,7 @@
 :::
 
 ###  日付のフォーマット
-入力ボックスに表示されるテキストの書式を制御するには `format` を用いる。
+入力ボックスに表示されるテキストの書式を制御するには `format` を用いる。Use `value-format` to control binding value's format.
 
 デフォルトでは、コンポーネントは `Date` オブジェクトを受け入れて出力します。
 
@@ -515,6 +515,17 @@ Check the list [here](https://day.js.org/docs/en/display/format#list-of-all-avai
       value-format="YYYY-MM-DD">
     </el-date-picker>
   </div>
+  <div class="block">
+    <span class="demonstration">Timestamp</span>
+    <div class="demonstration">Value：{{ value3 }}</div>
+    <el-date-picker
+      v-model="value3"
+      type="date"
+      placeholder="Pick a Date"
+      format="YYYY/MM/DD"
+      value-format="x">
+    </el-date-picker>
+  </div>
 </template>
 
 <script>
@@ -528,6 +539,27 @@ Check the list [here](https://day.js.org/docs/en/display/format#list-of-all-avai
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const value1 = ref('');
+      const value2 = ref('');
+      const value3 = ref('');
+
+      return {
+        value1,
+        value2,
+        value3,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/zh-CN/date-picker.md b/website/docs/zh-CN/date-picker.md
index 3d1906ad5b..ab7994185b 100644
--- a/website/docs/zh-CN/date-picker.md
+++ b/website/docs/zh-CN/date-picker.md
@@ -482,7 +482,7 @@ import { defineComponent, reactive, toRefs } from 'vue';
 
 ###  日期格式
 
-使用`format`指定输入框的格式。
+使用`format`指定输入框的格式。使用`value-format`指定绑定值的格式。
 
 默认情况下，组件接受并返回`Date`对象。
 
@@ -516,6 +516,17 @@ import { defineComponent, reactive, toRefs } from 'vue';
       value-format="YYYY/MM/DD">
     </el-date-picker>
   </div>
+  <div class="block">
+    <span class="demonstration">时间戳</span>
+    <div class="demonstration">值：{{ value3 }}</div>
+    <el-date-picker
+      v-model="value3"
+      type="date"
+      placeholder="选择日期"
+      format="YYYY 年 MM 月 DD 日"
+      value-format="x">``
+    </el-date-picker>
+  </div>
 </template>
 
 <script>
@@ -524,6 +535,7 @@ import { defineComponent, reactive, toRefs } from 'vue';
       return {
         value1: '',
         value2: '',
+        value3: ''
       };
     }
   };
@@ -538,6 +550,7 @@ import { defineComponent, ref } from 'vue';
       return {
         value1: ref(''),
         value2: ref(''),
+        value3: ref('')
       };
     },
   });