From 21af6e64c67117ee07d8a2cba2455d2a4c6cb8de Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Fri, 18 Dec 2020 10:04:48 +0800
Subject: [PATCH] docs: update date time picker doc (#1033)

---
 website/docs/en-US/datetime-picker.md | 96 +++++++++++++--------------
 website/docs/es/datetime-picker.md    | 96 +++++++++++++--------------
 website/docs/fr-FR/datetime-picker.md | 96 +++++++++++++--------------
 website/docs/fr-FR/time-picker.md     |  2 +-
 website/docs/fr-FR/time-select.md     |  2 +-
 website/docs/jp/datetime-picker.md    | 96 +++++++++++++--------------
 website/docs/jp/time-picker.md        | 78 ----------------------
 website/docs/jp/time-select.md        | 53 ++++++++-------
 website/docs/zh-CN/datetime-picker.md | 96 +++++++++++++--------------
 9 files changed, 253 insertions(+), 362 deletions(-)

diff --git a/website/docs/en-US/datetime-picker.md b/website/docs/en-US/datetime-picker.md
index ccf3f2dcae..246bfe1b90 100644
--- a/website/docs/en-US/datetime-picker.md
+++ b/website/docs/en-US/datetime-picker.md
@@ -26,7 +26,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
       v-model="value2"
       type="datetime"
       placeholder="Select date and time"
-      :picker-options="pickerOptions">
+      :shortcuts="shortcuts">
     </el-date-picker>
   </div>
   <div class="block">
@@ -44,28 +44,24 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
   export default {
     data() {
       return {
-        pickerOptions: {
-          shortcuts: [{
-            text: 'Today',
-            onClick(picker) {
-              picker.$emit('pick', new Date());
-            }
-          }, {
-            text: 'Yesterday',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24);
-              picker.emit('pick', date);
-            }
-          }, {
-            text: 'A week ago',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-              picker.emit('pick', date);
-            }
-          }]
-        },
+        shortcuts: [{
+          text: 'Today',
+          value: new Date(),
+        }, {
+          text: 'Yesterday',
+          value: (() => {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24);
+            return date
+          })(),
+        }, {
+          text: 'Yesterday',
+          value: (() => {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+            return date
+          })(),
+        }],
         value1: '',
         value2: '',
         value3: ''
@@ -97,7 +93,7 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
     <el-date-picker
       v-model="value2"
       type="datetimerange"
-      :picker-options="pickerOptions"
+      :shortcuts="shortcuts""
       range-separator="To"
       start-placeholder="Start date"
       end-placeholder="End date"
@@ -110,33 +106,31 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
   export default {
     data() {
       return {
-        pickerOptions: {
-          shortcuts: [{
-            text: 'Last week',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Last month',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Last 3 months',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
-            }
-          }]
-        },
+        shortcuts: [{
+          text: 'Last week',
+          value: (() => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            return [start, end]
+          })()
+        }, {
+          text: 'Last month',
+          value: (() => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            return [start, end]
+          })()
+        }, {
+          text: 'Last 3 months',
+          value: (() => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            return [start, end]
+          })()
+        }],
         value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
         value2: ''
       };
diff --git a/website/docs/es/datetime-picker.md b/website/docs/es/datetime-picker.md
index 47ccccc2fd..c733eaab2c 100644
--- a/website/docs/es/datetime-picker.md
+++ b/website/docs/es/datetime-picker.md
@@ -27,7 +27,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
       v-model="value2"
       type="datetime"
       placeholder="Select date and time"
-      :picker-options="pickerOptions">
+      :shortcuts="shortcuts">
     </el-date-picker>
   </div>
   <div class="block">
@@ -45,28 +45,24 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
   export default {
     data() {
       return {
-        pickerOptions: {
-          shortcuts: [{
-            text: 'Today',
-            onClick(picker) {
-              picker.$emit('pick', new Date());
-            }
-          }, {
-            text: 'Yesterday',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24);
-              picker.emit('pick', date);
-            }
-          }, {
-            text: 'A week ago',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-              picker.emit('pick', date);
-            }
-          }]
-        },
+        shortcuts: [{
+          text: 'Today',
+          value: new Date(),
+        }, {
+          text: 'Yesterday',
+          value: (() => {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24);
+            return date
+          })(),
+        }, {
+          text: 'Yesterday',
+          value: (() => {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+            return date
+          })(),
+        }],
         value1: '',
         value2: '',
         value3: ''
@@ -98,7 +94,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
     <el-date-picker
       v-model="value2"
       type="datetimerange"
-      :picker-options="pickerOptions"
+      :shortcuts="shortcuts""
       range-separator="To"
       start-placeholder="Start date"
       end-placeholder="End date"
@@ -111,33 +107,31 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
   export default {
     data() {
       return {
-        pickerOptions: {
-          shortcuts: [{
-            text: 'Last week',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Last month',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Last 3 months',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
-            }
-          }]
-        },
+        shortcuts: [{
+          text: 'Last week',
+          value: (() => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            return [start, end]
+          })()
+        }, {
+          text: 'Last month',
+          value: (() => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            return [start, end]
+          })()
+        }, {
+          text: 'Last 3 months',
+          value: (() => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            return [start, end]
+          })()
+        }],
         value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
         value2: ''
       };
diff --git a/website/docs/fr-FR/datetime-picker.md b/website/docs/fr-FR/datetime-picker.md
index 08ff555d49..a78d38563a 100644
--- a/website/docs/fr-FR/datetime-picker.md
+++ b/website/docs/fr-FR/datetime-picker.md
@@ -26,7 +26,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
       v-model="value2"
       type="datetime"
       placeholder="Selectionnez date et horaire"
-      :picker-options="pickerOptions">
+      :shortcuts="shortcuts">
     </el-date-picker>
   </div>
   <div class="block">
@@ -44,28 +44,24 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
   export default {
     data() {
       return {
-        pickerOptions: {
-          shortcuts: [{
-            text: 'Aujourdh\'ui',
-            onClick(picker) {
-              picker.$emit('pick', new Date());
-            }
-          }, {
-            text: 'Hier',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24);
-              picker.emit('pick', date);
-            }
-          }, {
-            text: 'Il y a une semaine',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-              picker.emit('pick', date);
-            }
-          }]
-        },
+        shortcuts: [{
+          text: 'Aujourdh\'ui',
+          value: new Date(),
+        }, {
+          text: 'Hier',
+          value: (() => {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24);
+            return date
+          })(),
+        }, {
+          text: 'Il y a une semaine',
+          value: (() => {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+            return date
+          })(),
+        }],
         value1: '',
         value2: '',
         value3: ''
@@ -97,7 +93,7 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
     <el-date-picker
       v-model="value2"
       type="datetimerange"
-      :picker-options="pickerOptions"
+      :shortcuts="shortcuts"
       range-separator="à"
       start-placeholder="Date de début"
       end-placeholder="Date de fin"
@@ -110,33 +106,31 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
   export default {
     data() {
       return {
-        pickerOptions: {
-          shortcuts: [{
-            text: 'La semaine passée',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Le mois dernier',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Les 2 derniers mois',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
-            }
-          }]
-        },
+        shortcuts: [{
+          text: 'La semaine passée',
+          value: (() => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            return [start, end]
+          })()
+        }, {
+          text: 'Le mois dernier',
+          value: (() => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            return [start, end]
+          })()
+        }, {
+          text: 'Les 2 derniers mois',
+          value: (() => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            return [start, end]
+          })()
+        }],
         value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
         value2: ''
       };
diff --git a/website/docs/fr-FR/time-picker.md b/website/docs/fr-FR/time-picker.md
index 9b65315c96..4fdfc894b0 100644
--- a/website/docs/fr-FR/time-picker.md
+++ b/website/docs/fr-FR/time-picker.md
@@ -6,7 +6,7 @@ Utiliser TimePicker pour sélectionner un horaire.
 
 Vous pouvez aussi laisser l'utilisateur choisir librement un horaire.
 
-:::demo Utilisez `el-time-picker` puis l'attribut `picker-options` et sa propriété `disabledHours` `disabledMinutes` and `disabledSeconds` pour déterminer la tranche horaire disponible. Par défaut, vous pouvez utiliser la molette de votre souris, ou les flèches directionnelles si l'attribut `arrow-control` est présent.
+:::demo Utilisez `el-time-picker` puis l'attribut et sa propriété `disabledHours` `disabledMinutes` and `disabledSeconds` pour déterminer la tranche horaire disponible. Par défaut, vous pouvez utiliser la molette de votre souris, ou les flèches directionnelles si l'attribut `arrow-control` est présent.
 
 ```html
 <template>
diff --git a/website/docs/fr-FR/time-select.md b/website/docs/fr-FR/time-select.md
index 7c09d1eafb..a4496bf049 100644
--- a/website/docs/fr-FR/time-select.md
+++ b/website/docs/fr-FR/time-select.md
@@ -6,7 +6,7 @@ Utiliser TimeSelect pour sélectionner un horaire.
 
 Vous pouvez fournir une liste d'horaires fixés pour que l'utilisateur en choisisse un.
 
-:::demo Utilisez `el-time-select` puis assignez un horaire de début, de fin et un pas grâce aux propriétés `start`, `end` et `step` de l'attribut `picker-options`.
+:::demo Utilisez `el-time-select` puis assignez un horaire de début, de fin et un pas grâce aux propriétés `start`, `end` et `step` de l'attribut.
 ```html
 <el-time-select
   v-model="value"
diff --git a/website/docs/jp/datetime-picker.md b/website/docs/jp/datetime-picker.md
index b7800566a4..f9c1e598c8 100644
--- a/website/docs/jp/datetime-picker.md
+++ b/website/docs/jp/datetime-picker.md
@@ -26,7 +26,7 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。`picker
       v-model="value2"
       type="datetime"
       placeholder="Select date and time"
-      :picker-options="pickerOptions">
+      :shortcuts="shortcuts">
     </el-date-picker>
   </div>
   <div class="block">
@@ -44,28 +44,24 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。`picker
   export default {
     data() {
       return {
-        pickerOptions: {
-          shortcuts: [{
-            text: 'Today',
-            onClick(picker) {
-              picker.$emit('pick', new Date());
-            }
-          }, {
-            text: 'Yesterday',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24);
-              picker.$emit('pick', date);
-            }
-          }, {
-            text: 'A week ago',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', date);
-            }
-          }]
-        },
+        shortcuts: [{
+          text: 'Today',
+          value: new Date(),
+        }, {
+          text: 'Yesterday',
+          value: (() => {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24);
+            return date
+          })(),
+        }, {
+          text: 'Yesterday',
+          value: (() => {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+            return date
+          })(),
+        }],
         value1: '',
         value2: '',
         value3: ''
@@ -97,7 +93,7 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。`picker
     <el-date-picker
       v-model="value2"
       type="datetimerange"
-      :picker-options="pickerOptions"
+      :shortcuts="shortcuts"
       range-separator="To"
       start-placeholder="Start date"
       end-placeholder="End date"
@@ -110,33 +106,31 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。`picker
   export default {
     data() {
       return {
-        pickerOptions: {
-          shortcuts: [{
-            text: 'Last week',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Last month',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: 'Last 3 months',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
-            }
-          }]
-        },
+        shortcuts: [{
+          text: 'Last week',
+          value: (() => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            return [start, end]
+          })()
+        }, {
+          text: 'Last month',
+          value: (() => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            return [start, end]
+          })()
+        }, {
+          text: 'Last 3 months',
+          value: (() => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            return [start, end]
+          })()
+        }],
         value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
         value2: ''
       };
diff --git a/website/docs/jp/time-picker.md b/website/docs/jp/time-picker.md
index e402522757..5073d45c93 100644
--- a/website/docs/jp/time-picker.md
+++ b/website/docs/jp/time-picker.md
@@ -2,34 +2,6 @@
 
 時間インプットにはタイムピッカーを使用します。
 
-### 固定タイムピッカー
-
-ユーザーが選択できる固定時間のリストを提供する。
-
-:::demo `el-time-select` ラベルを使用し、開始時刻、終了時刻、タイムステップを `start`, `end`, `step` で指定します。`
-```html
-<el-time-select
-  v-model="value"
-  :picker-options="{
-    start: '08:30',
-    step: '00:15',
-    end: '18:30'
-  }"
-  placeholder="Select time">
-</el-time-select>
-
-<script>
-  export default {
-    data() {
-      return {
-        value: ''
-      };
-    }
-  }
-</script>
-```
-:::
-
 ### 任意のタイムピッカー
 
 任意の時間を選ぶことができます。
@@ -94,47 +66,6 @@
 ```
 :::
 
-### 固定時間範囲
-
-開始時間が最初に選ばれた場合は、それに応じて終了時間が変更されます。
-
-:::demo
-```html
-<template>
-  <el-time-select
-    placeholder="Start time"
-    v-model="startTime"
-    :picker-options="{
-      start: '08:30',
-      step: '00:15',
-      end: '18:30'
-    }">
-  </el-time-select>
-  <el-time-select
-    placeholder="End time"
-    v-model="endTime"
-    :picker-options="{
-      start: '08:30',
-      step: '00:15',
-      end: '18:30',
-      minTime: startTime
-    }">
-  </el-time-select>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        startTime: '',
-        endTime: ''
-      };
-    }
-  }
-</script>
-```
-:::
-
 ### 任意の時間範囲
 
 任意の時間範囲を選択することができます。
@@ -193,15 +124,6 @@
 | name | ネイティブ入力の `name` と同じ | string | — | — |
 | prefix-icon | カスタムプレフィックスアイコンクラス | string | — | el-icon-time |
 | clear-icon | カスタムクリアアイコンクラス | string | — | el-icon-circle-close |
-
-### 時間選択オプション
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
-|---------- |-------------- |---------- |--------------------------------  |-------- |
-| start | 開始時刻 | string | — | 09:00 |
-| end | 終了時刻 | string | — | 18:00 |
-| step | タイムステップ | string | — | 00:30 |
-| minTime | 最低時間、それ以前の時間は無効化されます。 | string | — | 00:00 |
-| maxTime | 最大時間、この時間以降は無効化されます。 | string | — | — |
 | disabledHours | To specify the array of hours that cannot be selected | function | — | - |
 | disabledMinutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | - |
 | disabledSeconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | - |
diff --git a/website/docs/jp/time-select.md b/website/docs/jp/time-select.md
index c10e051b6b..de4deab648 100644
--- a/website/docs/jp/time-select.md
+++ b/website/docs/jp/time-select.md
@@ -1,12 +1,12 @@
-## TimeSelect
+## タイムピッカー
 
-Use Time Select for time input.
+時間インプットにはタイムピッカーを使用します。
 
-### Fixed time picker
+### 固定タイムピッカー
 
-Provide a list of fixed time for users to choose.
+ユーザーが選択できる固定時間のリストを提供する。
 
-:::demo Use `el-time-select` label, then assign start time, end time and time step with `start`, `end` and `step`.
+:::demo `el-time-select` ラベルを使用し、開始時刻、終了時刻、タイムステップを `start`, `end`, `step` で指定します。`
 ```html
 <el-time-select
   v-model="value"
@@ -28,9 +28,9 @@ Provide a list of fixed time for users to choose.
 ```
 :::
 
-### Fixed time range
+### 固定時間範囲
 
-If start time is picked at first, then the end time will change accordingly.
+開始時間が最初に選ばれた場合は、それに応じて終了時間が変更されます。
 
 :::demo
 ```html
@@ -68,30 +68,29 @@ If start time is picked at first, then the end time will change accordingly.
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| value / v-model | binding value | string | - | - |
-| editable | whether the input is editable | boolean | — | true |
-| clearable | whether to show clear button | boolean | — | true |
-| size | size of Input | string | medium / small / mini | — |
-| placeholder | placeholder in non-range mode | string | — | — |
-| name | same as `name` in native input | string | — | — |
-| prefix-icon | Custom prefix icon class | string | — | el-icon-time |
-| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
-| start | start time | string | — | 09:00 |
-| end | end time | string | — | 18:00 |
-| step | time step | string | — | 00:30 |
-| minTime | minimum time, any time before this time will be disabled | string | — | 00:00 |
-| maxTime | maximum time, any time after this time will be disabled | string | — | — |
+| value / v-model | バインディング値 | - | - |
+| editable | 入力が編集可能かどうか | boolean | — | true |
+| clearable | クリアボタンを表示するかどうか | boolean | — | true |
+| size | 入力のサイズ | string | medium / small / mini | — |
+| placeholder | 非範囲モード時のプレースホルダ | string | — | — |
+| name | ネイティブ入力の `name` と同じ | string | — | — |
+| prefix-icon | カスタムプレフィックスアイコンクラス | string | — | el-icon-time |
+| clear-icon | カスタムクリアアイコンクラス | string | — | el-icon-circle-close |
+| start | 開始時刻 | string | — | 09:00 |
+| end | 終了時刻 | string | — | 18:00 |
+| step | タイムステップ | string | — | 00:30 |
+| minTime | 最低時間、それ以前の時間は無効化されます。 | string | — | 00:00 |
+| maxTime | 最大時間、この時間以降は無効化されます。 | string | — | — |
 
-
-### Events
+### イベント
 | Event Name | Description | Parameters |
 |---------|--------|---------|
-| change | triggers when user confirms the value | component's binding value |
-| blur | triggers when Input blurs | component instance |
-| focus | triggers when Input focuses | component instance |
+| change | ユーザーが値を確認したときにトリガされます。 | component's binding value |
+| blur | インプットがぼやけたときされます | component instance |
+| focus | 入力がフォーカスされているときにトリガされます。 | component instance |
 
-### Methods
+### 方法
 | Method | Description | Parameters |
 | ---- | ---- | ---- |
-| focus | focus the Input component | - |
+| focus | インプットコンポーネントにフォーカス | - |
 | blur | blur the Input component | - |
diff --git a/website/docs/zh-CN/datetime-picker.md b/website/docs/zh-CN/datetime-picker.md
index d2e04a102b..a917c96f04 100644
--- a/website/docs/zh-CN/datetime-picker.md
+++ b/website/docs/zh-CN/datetime-picker.md
@@ -26,7 +26,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
       type="datetime"
       placeholder="选择日期时间"
       align="right"
-      :picker-options="pickerOptions">
+      :shortcuts="shortcuts">
     </el-date-picker>
   </div>
   <div class="block">
@@ -44,28 +44,24 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
   export default {
     data() {
       return {
-        pickerOptions: {
-          shortcuts: [{
-            text: '今天',
-            onClick(picker) {
-              picker.$emit('pick', new Date());
-            }
-          }, {
-            text: '昨天',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24);
-              picker.emit('pick', date);
-            }
-          }, {
-            text: '一周前',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-              picker.emit('pick', date);
-            }
-          }]
-        },
+        shortcuts: [{
+          text: '今天',
+          value: new Date(),
+        }, {
+          text: '昨天',
+          value: (() => {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24);
+            return date
+          })(),
+        }, {
+          text: '一周前',
+          value: (() => {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+            return date
+          })(),
+        }],
         value1: '',
         value2: '',
         value3: ''
@@ -96,7 +92,7 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
     <el-date-picker
       v-model="value2"
       type="datetimerange"
-      :picker-options="pickerOptions"
+      :shortcuts="shortcuts"
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
@@ -109,33 +105,31 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
   export default {
     data() {
       return {
-        pickerOptions: {
-          shortcuts: [{
-            text: '最近一周',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: '最近一个月',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
-              picker.$emit('pick', [start, end]);
-            }
-          }, {
-            text: '最近三个月',
-            onClick(picker) {
-              const end = new Date();
-              const start = new Date();
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
-              picker.$emit('pick', [start, end]);
-            }
-          }]
-        },
+        shortcuts: [{
+          text: '最近一周',
+          value: (() => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            return [start, end]
+          })()
+        }, {
+          text: '最近一个月',
+          value: (() => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            return [start, end]
+          })()
+        }, {
+          text: '最近三个月',
+          value: (() => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            return [start, end]
+          })()
+        }],
         value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
         value2: ''
       };