diff --git a/src/datetime-picker/README.md b/src/datetime-picker/README.md
index f24d8e2df..724e53d99 100644
--- a/src/datetime-picker/README.md
+++ b/src/datetime-picker/README.md
@@ -29,12 +29,15 @@ app.use(DatetimePicker);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
   data() {
+    const currentDate = ref(new Date());
     return {
       minDate: new Date(2020, 0, 1),
       maxDate: new Date(2025, 10, 1),
-      currentDate: new Date(),
+      currentDate,
     };
   },
 };
@@ -54,23 +57,27 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
   data() {
-    return {
-      minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
-      currentDate: new Date(),
-    };
-  },
-  methods: {
-    formatter(type, val) {
+    const currentDate = ref(new Date());
+
+    const formatter = (type, val) => {
       if (type === 'year') {
         return `${val} Year`;
       } else if (type === 'month') {
         return `${val} Month`;
       }
       return val;
-    },
+    };
+
+    return {
+      minDate: new Date(2020, 0, 1),
+      maxDate: new Date(2025, 10, 1),
+      formatter,
+      currentDate,
+    };
   },
 };
 ```
@@ -89,23 +96,27 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
   data() {
-    return {
-      minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
-      currentDate: new Date(),
-    };
-  },
-  methods: {
-    formatter(type, val) {
+    const currentDate = ref(new Date());
+
+    const formatter = (type, val) => {
       if (type === 'month') {
         return `${val} Month`;
       } else if (type === 'day') {
         return `${val} Day`;
       }
       return val;
-    },
+    };
+
+    return {
+      minDate: new Date(2020, 0, 1),
+      maxDate: new Date(2025, 10, 1),
+      formatter,
+      currentDate,
+    };
   },
 };
 ```
@@ -123,11 +134,12 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
   data() {
-    return {
-      currentTime: '12:00',
-    };
+    const currentTime = ref('12:00');
+    return { currentTime };
   },
 };
 ```
@@ -145,12 +157,15 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
   data() {
+    const currentDate = ref(new Date());
     return {
       minDate: new Date(2020, 0, 1),
       maxDate: new Date(2025, 10, 1),
-      currentDate: new Date(),
+      currentDate,
     };
   },
 };
@@ -169,12 +184,15 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
   data() {
+    const currentDate = ref(new Date());
     return {
       minDate: new Date(2020, 0, 1),
       maxDate: new Date(2025, 10, 1),
-      currentDate: new Date(),
+      currentDate,
     };
   },
 };
@@ -192,19 +210,23 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
   data() {
-    return {
-      currentTime: '12:00',
-    };
-  },
-  methods: {
-    filter(type, options) {
+    const currentTime = ref('12:00');
+
+    const filter = (type, options) => {
       if (type === 'minute') {
-        return options.filter((option) => option % 5 === 0);
+        return options.filter((option) => Number(option) % 5 === 0);
       }
       return options;
-    },
+    };
+
+    return {
+      filter,
+      currentTime,
+    };
   },
 };
 ```
@@ -222,14 +244,13 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      currentDate: new Date(),
-    };
-  },
-  methods: {
-    formatter(type, val) {
+  setup() {
+    const currentDate = ref(new Date());
+
+    const formatter = (type, val) => {
       if (type === 'year') {
         return val + ' Year';
       }
@@ -240,7 +261,12 @@ export default {
         return val + ' Day';
       }
       return val;
-    },
+    };
+
+    return {
+      formatter,
+      currentDate,
+    };
   },
 };
 ```
diff --git a/src/datetime-picker/README.zh-CN.md b/src/datetime-picker/README.zh-CN.md
index 54b5f3147..091810dcb 100644
--- a/src/datetime-picker/README.zh-CN.md
+++ b/src/datetime-picker/README.zh-CN.md
@@ -31,12 +31,15 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型，type 为
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
   data() {
+    const currentDate = ref(new Date());
     return {
       minDate: new Date(2020, 0, 1),
       maxDate: new Date(2025, 10, 1),
-      currentDate: new Date(),
+      currentDate,
     };
   },
 };
@@ -58,23 +61,27 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
   data() {
-    return {
-      minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
-      currentDate: new Date(),
-    };
-  },
-  methods: {
-    formatter(type, val) {
+    const currentDate = ref(new Date());
+
+    const formatter = (type, val) => {
       if (type === 'year') {
         return `${val}年`;
       } else if (type === 'month') {
         return `${val}月`;
       }
       return val;
-    },
+    };
+
+    return {
+      minDate: new Date(2020, 0, 1),
+      maxDate: new Date(2025, 10, 1),
+      formatter,
+      currentDate,
+    };
   },
 };
 ```
@@ -95,23 +102,27 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
   data() {
-    return {
-      minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
-      currentDate: new Date(),
-    };
-  },
-  methods: {
-    formatter(type, val) {
+    const currentDate = ref(new Date());
+
+    const formatter = (type, val) => {
       if (type === 'month') {
         return `${val}月`;
       } else if (type === 'day') {
         return `${val}日`;
       }
       return val;
-    },
+    };
+
+    return {
+      minDate: new Date(2020, 0, 1),
+      maxDate: new Date(2025, 10, 1),
+      formatter,
+      currentDate,
+    };
   },
 };
 ```
@@ -131,11 +142,12 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
   data() {
-    return {
-      currentTime: '12:00',
-    };
+    const currentTime = ref('12:00');
+    return { currentTime };
   },
 };
 ```
@@ -155,12 +167,15 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
   data() {
+    const currentDate = ref(new Date());
     return {
       minDate: new Date(2020, 0, 1),
       maxDate: new Date(2025, 10, 1),
-      currentDate: new Date(),
+      currentDate,
     };
   },
 };
@@ -181,12 +196,15 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
   data() {
+    const currentDate = ref(new Date());
     return {
       minDate: new Date(2020, 0, 1),
       maxDate: new Date(2025, 10, 1),
-      currentDate: new Date(),
+      currentDate,
     };
   },
 };
@@ -201,19 +219,23 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
   data() {
-    return {
-      currentTime: '12:00',
-    };
-  },
-  methods: {
-    filter(type, options) {
+    const currentTime = ref('12:00');
+
+    const filter = (type, options) => {
       if (type === 'minute') {
-        return options.filter((option) => option % 5 === 0);
+        return options.filter((option) => Number(option) % 5 === 0);
       }
       return options;
-    },
+    };
+
+    return {
+      filter,
+      currentTime,
+    };
   },
 };
 ```
@@ -231,14 +253,13 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      currentDate: new Date(),
-    };
-  },
-  methods: {
-    formatter(type, val) {
+  setup() {
+    const currentDate = ref(new Date());
+
+    const formatter = (type, val) => {
       if (type === 'year') {
         return val + '年';
       }
@@ -249,7 +270,12 @@ export default {
         return val + '日';
       }
       return val;
-    },
+    };
+
+    return {
+      formatter,
+      currentDate,
+    };
   },
 };
 ```
diff --git a/src/datetime-picker/demo/index.vue b/src/datetime-picker/demo/index.vue
index 40b032399..533a6903a 100644
--- a/src/datetime-picker/demo/index.vue
+++ b/src/datetime-picker/demo/index.vue
@@ -83,75 +83,81 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { reactive } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    day: '日',
+    year: '年',
+    month: '月',
+    timeType: '选择时间',
+    dateType: '选择年月日',
+    datetimeType: '选择完整时间',
+    datehourType: '选择年月日小时',
+    monthDayType: '选择月日',
+    yearMonthType: '选择年月',
+    optionFilter: '选项过滤器',
+    sortColumns: '自定义列排序',
+  },
+  'en-US': {
+    day: ' Day',
+    year: ' Year',
+    month: ' Month',
+    timeType: 'Choose Time',
+    dateType: 'Choose Date',
+    datetimeType: 'Choose DateTime',
+    datehourType: 'Choose DateHour',
+    monthDayType: 'Choose Month-Day',
+    yearMonthType: 'Choose Year-Month',
+    optionFilter: 'Option Filter',
+    sortColumns: 'Columns Order',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      day: '日',
-      year: '年',
-      month: '月',
-      timeType: '选择时间',
-      dateType: '选择年月日',
-      datetimeType: '选择完整时间',
-      datehourType: '选择年月日小时',
-      monthDayType: '选择月日',
-      yearMonthType: '选择年月',
-      optionFilter: '选项过滤器',
-      sortColumns: '自定义列排序',
-    },
-    'en-US': {
-      day: ' Day',
-      year: ' Year',
-      month: ' Month',
-      timeType: 'Choose Time',
-      dateType: 'Choose Date',
-      datetimeType: 'Choose DateTime',
-      datehourType: 'Choose DateHour',
-      monthDayType: 'Choose Month-Day',
-      yearMonthType: 'Choose Year-Month',
-      optionFilter: 'Option Filter',
-      sortColumns: 'Columns Order',
-    },
-  },
+  setup() {
+    const t = useTranslate(i18n);
+    const value = reactive({
+      date: null,
+      time: '12:00',
+      datetime: new Date(2020, 0, 1),
+      datehour: new Date(2020, 0, 1),
+      monthDay: new Date(2020, 0, 1),
+      yearMonth: new Date(2020, 0, 1),
+      optionFilter: '12:00',
+      sortColumnsDate: new Date(2020, 0, 1),
+    });
 
-  data() {
-    return {
-      minDate: new Date(2020, 0, 1),
-      maxDate: new Date(2025, 10, 1),
-      value: {
-        date: null,
-        time: '12:00',
-        datetime: new Date(2020, 0, 1),
-        datehour: new Date(2020, 0, 1),
-        monthDay: new Date(2020, 0, 1),
-        yearMonth: new Date(2020, 0, 1),
-        optionFilter: '12:00',
-        sortColumnsDate: new Date(2020, 0, 1),
-      },
+    const filter = (type: string, values: string[]) => {
+      if (type === 'minute') {
+        return values.filter((value) => Number(value) % 5 === 0);
+      }
+      return values;
     };
-  },
 
-  methods: {
-    formatter(type, value) {
+    const formatter = (type: string, value: string) => {
       if (type === 'year') {
-        return value + this.t('year');
+        return value + t('year');
       }
       if (type === 'month') {
-        return value + this.t('month');
+        return value + t('month');
       }
       if (type === 'day') {
-        return value + this.t('day');
+        return value + t('day');
       }
       return value;
-    },
+    };
 
-    filter(type, values) {
-      if (type === 'minute') {
-        return values.filter((value) => value % 5 === 0);
-      }
-
-      return values;
-    },
+    return {
+      t,
+      value,
+      filter,
+      minDate: new Date(2020, 0, 1),
+      maxDate: new Date(2025, 10, 1),
+      formatter,
+    };
   },
 };
 </script>