diff --git a/docs/en-US/component/time-picker.md b/docs/en-US/component/time-picker.md
index a758a391d8..27d52484e3 100644
--- a/docs/en-US/component/time-picker.md
+++ b/docs/en-US/component/time-picker.md
@@ -11,12 +11,22 @@ Use Time Picker for time input.
 
 Can pick an arbitrary time.
 
-:::demo Use `el-time-picker` label, and you can limit the time range by specifying `disabledHours` `disabledMinutes` and `disabledSeconds`. By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the `arrow-control` attribute is set.
+:::demo By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the `arrow-control` attribute is set.
 
 time-picker/basic
 
 :::
 
+## Limit the time range
+
+You can also limit the time range.
+
+:::demo Limit the time range by specifying `disabledHours` `disabledMinutes` and `disabledSeconds`.
+
+time-picker/basic-range
+
+:::
+
 ## Arbitrary time range
 
 Can pick an arbitrary time range.
diff --git a/docs/examples/time-picker/basic-range.vue b/docs/examples/time-picker/basic-range.vue
new file mode 100644
index 0000000000..d9be1e86f3
--- /dev/null
+++ b/docs/examples/time-picker/basic-range.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="demo-basic">
+    <el-time-picker
+      v-model="value1"
+      :disabled-hours="disabledHours"
+      :disabled-minutes="disabledMinutes"
+      :disabled-seconds="disabledSeconds"
+      placeholder="Arbitrary time"
+    >
+    </el-time-picker>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const value1 = ref(new Date(2016, 9, 10, 18, 30))
+
+const makeRange = (start: number, end: number) => {
+  const result: number[] = []
+  for (let i = start; i <= end; i++) {
+    result.push(i)
+  }
+  return result
+}
+const disabledHours = () => {
+  return makeRange(0, 16).concat(makeRange(19, 23))
+}
+const disabledMinutes = (hour: number) => {
+  if (hour === 17) {
+    return makeRange(0, 29)
+  }
+  if (hour === 18) {
+    return makeRange(31, 59)
+  }
+}
+const disabledSeconds = (hour: number, minute: number) => {
+  if (hour === 18 && minute === 30) {
+    return makeRange(1, 59)
+  }
+}
+</script>
+
+<style>
+.demo-basic .el-date-editor {
+  margin: 8px;
+}
+</style>
diff --git a/docs/examples/time-picker/basic.vue b/docs/examples/time-picker/basic.vue
index ebaf9b6418..92dbbaafe8 100644
--- a/docs/examples/time-picker/basic.vue
+++ b/docs/examples/time-picker/basic.vue
@@ -1,54 +1,16 @@
 <template>
   <div class="demo-basic">
-    <el-time-picker
-      v-model="value1"
-      :disabled-hours="disabledHours"
-      :disabled-minutes="disabledMinutes"
-      :disabled-seconds="disabledSeconds"
-      placeholder="Arbitrary time"
-    >
+    <el-time-picker v-model="value1" placeholder="Arbitrary time">
     </el-time-picker>
-    <el-time-picker
-      v-model="value2"
-      arrow-control
-      :disabled-hours="disabledHours"
-      :disabled-minutes="disabledMinutes"
-      :disabled-seconds="disabledSeconds"
-      placeholder="Arbitrary time"
-    >
+    <el-time-picker v-model="value2" arrow-control placeholder="Arbitrary time">
     </el-time-picker>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-
-const value1 = ref(new Date(2016, 9, 10, 18, 30))
-const value2 = ref(new Date(2016, 9, 10, 18, 30))
-
-const makeRange = (start: number, end: number) => {
-  const result: number[] = []
-  for (let i = start; i <= end; i++) {
-    result.push(i)
-  }
-  return result
-}
-const disabledHours = () => {
-  return makeRange(0, 16).concat(makeRange(19, 23))
-}
-const disabledMinutes = (hour: number) => {
-  if (hour === 17) {
-    return makeRange(0, 29)
-  }
-  if (hour === 18) {
-    return makeRange(31, 59)
-  }
-}
-const disabledSeconds = (hour: number, minute: number) => {
-  if (hour === 18 && minute === 30) {
-    return makeRange(1, 59)
-  }
-}
+const value1 = ref()
+const value2 = ref()
 </script>
 
 <style>