From 5f9971e60e62d0a45aebe11de73611b0d064ddcb Mon Sep 17 00:00:00 2001
From: "Xing.Wu" <329106954@qq.com>
Date: Tue, 8 Jun 2021 13:28:18 +0800
Subject: [PATCH] feat(docs): DateTimePicker code for composition (#2163)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 无星 <32910694@qq.com>
---
 website/docs/en-US/datetime-picker.md | 118 ++++++++++++++++++++++++++
 website/docs/es/datetime-picker.md    | 118 ++++++++++++++++++++++++++
 website/docs/fr-FR/datetime-picker.md | 118 ++++++++++++++++++++++++++
 website/docs/jp/datetime-picker.md    | 118 ++++++++++++++++++++++++++
 website/docs/zh-CN/datetime-picker.md | 118 ++++++++++++++++++++++++++
 5 files changed, 590 insertions(+)

diff --git a/website/docs/en-US/datetime-picker.md b/website/docs/en-US/datetime-picker.md
index 22c4e52308..285198d108 100644
--- a/website/docs/en-US/datetime-picker.md
+++ b/website/docs/en-US/datetime-picker.md
@@ -70,6 +70,50 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        shortcuts: [
+          {
+            text: 'Today',
+            value: new Date(),
+          },
+          {
+            text: 'Yesterday',
+            value: (() => {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              return date;
+            })(),
+          },
+          {
+            text: 'A week ago',
+            value: (() => {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              return date;
+            })(),
+          },
+        ],
+        value1: '',
+        value2: '',
+        value3: '',
+        defaultTime: new Date(2000, 1, 1, 12, 0, 0), // '12:00:00'
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -138,6 +182,55 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        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: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -186,6 +279,31 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        value1: '',
+        value2: '',
+        defaultTime1: [new Date(2000, 1, 1, 12, 0, 0)], // '12:00:00'
+        defaultTime2: [
+          new Date(2000, 1, 1, 12, 0, 0),
+          new Date(2000, 2, 1, 8, 0, 0),
+        ], // '12:00:00', '08:00:00'
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/es/datetime-picker.md b/website/docs/es/datetime-picker.md
index b3da1cce4a..52816a708f 100644
--- a/website/docs/es/datetime-picker.md
+++ b/website/docs/es/datetime-picker.md
@@ -71,6 +71,50 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más a
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        shortcuts: [
+          {
+            text: 'Today',
+            value: new Date(),
+          },
+          {
+            text: 'Yesterday',
+            value: (() => {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              return date;
+            })(),
+          },
+          {
+            text: 'A week ago',
+            value: (() => {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              return date;
+            })(),
+          },
+        ],
+        value1: '',
+        value2: '',
+        value3: '',
+        defaultTime: new Date(2000, 1, 1, 12, 0, 0), // '12:00:00'
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -139,6 +183,55 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más a
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        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: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -187,6 +280,31 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más a
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        value1: '',
+        value2: '',
+        defaultTime1: [new Date(2000, 1, 1, 12, 0, 0)], // '12:00:00'
+        defaultTime2: [
+          new Date(2000, 1, 1, 12, 0, 0),
+          new Date(2000, 2, 1, 8, 0, 0),
+        ], // '12:00:00', '08:00:00'
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/fr-FR/datetime-picker.md b/website/docs/fr-FR/datetime-picker.md
index c74a8844f2..e9cb96481f 100644
--- a/website/docs/fr-FR/datetime-picker.md
+++ b/website/docs/fr-FR/datetime-picker.md
@@ -70,6 +70,50 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        shortcuts: [
+          {
+            text: "Aujourd'hui",
+            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: '',
+        defaultTime: new Date(2000, 1, 1, 12, 0, 0), // '12:00:00'
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -138,6 +182,55 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        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: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -186,6 +279,31 @@ DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'information
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        value1: '',
+        value2: '',
+        defaultTime1: [new Date(2000, 1, 1, 12, 0, 0)], // '12:00:00'
+        defaultTime2: [
+          new Date(2000, 1, 1, 12, 0, 0),
+          new Date(2000, 2, 1, 8, 0, 0),
+        ], // '12:00:00', '08:00:00'
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/jp/datetime-picker.md b/website/docs/jp/datetime-picker.md
index e06214ca2b..3825751ffa 100644
--- a/website/docs/jp/datetime-picker.md
+++ b/website/docs/jp/datetime-picker.md
@@ -70,6 +70,50 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。属性
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        shortcuts: [
+          {
+            text: 'Today',
+            value: new Date(),
+          },
+          {
+            text: 'Yesterday',
+            value: (() => {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              return date;
+            })(),
+          },
+          {
+            text: 'A week ago',
+            value: (() => {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              return date;
+            })(),
+          },
+        ],
+        value1: '',
+        value2: '',
+        value3: '',
+        defaultTime: new Date(2000, 1, 1, 12, 0, 0), // '12:00:00'
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -138,6 +182,55 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。属性
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        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: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -186,6 +279,31 @@ DateTimePickerはDatePickerとTimePickerから派生したものです。属性
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        value1: '',
+        value2: '',
+        defaultTime1: [new Date(2000, 1, 1, 12, 0, 0)], // '12:00:00'
+        defaultTime2: [
+          new Date(2000, 1, 1, 12, 0, 0),
+          new Date(2000, 2, 1, 8, 0, 0),
+        ], // '12:00:00', '08:00:00'
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/zh-CN/datetime-picker.md b/website/docs/zh-CN/datetime-picker.md
index 153a8b6827..933b4c3374 100644
--- a/website/docs/zh-CN/datetime-picker.md
+++ b/website/docs/zh-CN/datetime-picker.md
@@ -70,6 +70,50 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，相关属性可以参照 D
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        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: '',
+        defaultTime: new Date(2000, 1, 1, 12, 0, 0), // '12:00:00'
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -137,6 +181,55 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，相关属性可以参照 D
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        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: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -185,6 +278,31 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，相关属性可以参照 D
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        value1: '',
+        value2: '',
+        defaultTime1: [new Date(2000, 1, 1, 12, 0, 0)], // '12:00:00'
+        defaultTime2: [
+          new Date(2000, 1, 1, 12, 0, 0),
+          new Date(2000, 2, 1, 8, 0, 0),
+        ], // '12:00:00', '08:00:00'
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::