diff --git a/examples/sites/demos/pc/app/date-picker/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/date-picker/basic-usage-composition-api.vue
index 94afbfa07e..0bbf51d678 100644
--- a/examples/sites/demos/pc/app/date-picker/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/basic-usage-composition-api.vue
@@ -23,7 +23,7 @@ const yearValue = ref('')
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/basic-usage.vue b/examples/sites/demos/pc/app/date-picker/basic-usage.vue
index c8c4faa39c..9c92db48ed 100644
--- a/examples/sites/demos/pc/app/date-picker/basic-usage.vue
+++ b/examples/sites/demos/pc/app/date-picker/basic-usage.vue
@@ -31,7 +31,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/clear-composition-api.vue b/examples/sites/demos/pc/app/date-picker/clear-composition-api.vue
index 8ae172fc75..31affe857b 100644
--- a/examples/sites/demos/pc/app/date-picker/clear-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/clear-composition-api.vue
@@ -31,6 +31,6 @@ const IconClose = iconClose()
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/clear.vue b/examples/sites/demos/pc/app/date-picker/clear.vue
index 29236fde9a..a13639283a 100644
--- a/examples/sites/demos/pc/app/date-picker/clear.vue
+++ b/examples/sites/demos/pc/app/date-picker/clear.vue
@@ -41,6 +41,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
index 79ae7d8110..8e89c78684 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
@@ -15,7 +15,7 @@ const IconMinus = iconMinus()
 
 <style>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 
 .my-date-picker {
diff --git a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
index 3e66b38905..6ba5c6624d 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
@@ -23,7 +23,7 @@ export default {
 
 <style>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 
 .my-date-picker {
diff --git a/examples/sites/demos/pc/app/date-picker/custom-weeks-composition-api.vue b/examples/sites/demos/pc/app/date-picker/custom-weeks-composition-api.vue
index 4713aa4985..00e440f68e 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-weeks-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-weeks-composition-api.vue
@@ -48,6 +48,6 @@ function formatWeeks(customWeeks, weekFirstDays) {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/custom-weeks.vue b/examples/sites/demos/pc/app/date-picker/custom-weeks.vue
index b3cea104c8..2f3f276df8 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-weeks.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-weeks.vue
@@ -57,6 +57,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue b/examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue
index 0e26f8d5cc..55ee57366b 100644
--- a/examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue
@@ -31,12 +31,7 @@ const defaultTimeRange = ref(['09:00:00', '18:00:00'])
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/default-value.vue b/examples/sites/demos/pc/app/date-picker/default-value.vue
index d4167ea928..981b487166 100644
--- a/examples/sites/demos/pc/app/date-picker/default-value.vue
+++ b/examples/sites/demos/pc/app/date-picker/default-value.vue
@@ -39,12 +39,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue b/examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue
index 7044c4c876..81f4cb454b 100644
--- a/examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue
@@ -50,12 +50,7 @@ const pickerOptions = {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/disabled.vue b/examples/sites/demos/pc/app/date-picker/disabled.vue
index 3b17dcd0c7..1678dd3e14 100644
--- a/examples/sites/demos/pc/app/date-picker/disabled.vue
+++ b/examples/sites/demos/pc/app/date-picker/disabled.vue
@@ -57,12 +57,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/events-composition-api.vue b/examples/sites/demos/pc/app/date-picker/events-composition-api.vue
index 341b905d1f..7fc8ff6aad 100644
--- a/examples/sites/demos/pc/app/date-picker/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/events-composition-api.vue
@@ -1,20 +1,18 @@
 <template>
   <tiny-layout>
-    <tiny-row>
-      <tiny-col :span="4">
+    <tiny-row class="demo-row">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">focus:</label>
         <tiny-date-picker v-model="valueFocus" @focus="handleFocus"></tiny-date-picker>
       </tiny-col>
-      <tiny-col :span="4">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">blur:</label>
         <tiny-date-picker v-model="valueBlur" @blur="handleBlur"></tiny-date-picker>
       </tiny-col>
-      <tiny-col :span="4">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">change:</label>
         <tiny-date-picker v-model="valueChange" @change="handleChange"></tiny-date-picker>
       </tiny-col>
-    </tiny-row>
-    <tiny-row>
       <tiny-col :span="6">
         <label class="demo-date-picker-label">onPick:</label>
         <tiny-date-picker v-model="valueOnPick" type="daterange" :picker-options="pickerOptions"></tiny-date-picker>
@@ -58,6 +56,9 @@ const pickerOptions = {
 </script>
 
 <style scoped>
+.demo-row {
+  width: 80%;
+}
 .demo-date-picker-label {
   display: inline-block;
   margin: 12px 0;
diff --git a/examples/sites/demos/pc/app/date-picker/events.vue b/examples/sites/demos/pc/app/date-picker/events.vue
index b009573cb5..ee0147e4ef 100644
--- a/examples/sites/demos/pc/app/date-picker/events.vue
+++ b/examples/sites/demos/pc/app/date-picker/events.vue
@@ -1,20 +1,18 @@
 <template>
   <tiny-layout>
-    <tiny-row>
-      <tiny-col :span="4">
+    <tiny-row class="demo-row">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">focus:</label>
         <tiny-date-picker v-model="valueFocus" @focus="handleFocus"></tiny-date-picker>
       </tiny-col>
-      <tiny-col :span="4">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">blur:</label>
         <tiny-date-picker v-model="valueBlur" @blur="handleBlur"></tiny-date-picker>
       </tiny-col>
-      <tiny-col :span="4">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">change:</label>
         <tiny-date-picker v-model="valueChange" @change="handleChange"></tiny-date-picker>
       </tiny-col>
-    </tiny-row>
-    <tiny-row>
       <tiny-col :span="6">
         <label class="demo-date-picker-label">onPick:</label>
         <tiny-date-picker v-model="valueOnPick" type="daterange" :picker-options="pickerOptions"></tiny-date-picker>
@@ -61,6 +59,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-row {
+  width: 80%;
+}
 .demo-date-picker-label {
   display: inline-block;
   margin: 12px 0;
diff --git a/examples/sites/demos/pc/app/date-picker/filter-mode-composition-api.vue b/examples/sites/demos/pc/app/date-picker/filter-mode-composition-api.vue
index 18db78f05b..1ddcb3e16c 100644
--- a/examples/sites/demos/pc/app/date-picker/filter-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/filter-mode-composition-api.vue
@@ -15,7 +15,7 @@ const rangeValue = ref('')
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/filter-mode.vue b/examples/sites/demos/pc/app/date-picker/filter-mode.vue
index 36c22ccdf6..b21a659d9a 100644
--- a/examples/sites/demos/pc/app/date-picker/filter-mode.vue
+++ b/examples/sites/demos/pc/app/date-picker/filter-mode.vue
@@ -23,7 +23,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/format-composition-api.vue b/examples/sites/demos/pc/app/date-picker/format-composition-api.vue
index 0b26370777..bd500b40e4 100644
--- a/examples/sites/demos/pc/app/date-picker/format-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/format-composition-api.vue
@@ -35,7 +35,7 @@ const selectedValue = ref(1590076800000)
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/format.vue b/examples/sites/demos/pc/app/date-picker/format.vue
index c7360c8dde..821ac14745 100644
--- a/examples/sites/demos/pc/app/date-picker/format.vue
+++ b/examples/sites/demos/pc/app/date-picker/format.vue
@@ -43,7 +43,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/label-inside-composition-api.vue b/examples/sites/demos/pc/app/date-picker/label-inside-composition-api.vue
index ff0f3cd15a..a4165391cd 100644
--- a/examples/sites/demos/pc/app/date-picker/label-inside-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/label-inside-composition-api.vue
@@ -15,14 +15,7 @@ const dateRangeValue = ref([])
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-  :deep(.tiny-range__close-icon) {
-    right: -4px;
-  }
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/label-inside.vue b/examples/sites/demos/pc/app/date-picker/label-inside.vue
index fb2d2184ce..f44494411d 100644
--- a/examples/sites/demos/pc/app/date-picker/label-inside.vue
+++ b/examples/sites/demos/pc/app/date-picker/label-inside.vue
@@ -23,14 +23,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-  :deep(.tiny-range__close-icon) {
-    right: -4px;
-  }
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/multiple-dates-composition-api.vue b/examples/sites/demos/pc/app/date-picker/multiple-dates-composition-api.vue
index c8fd93c0de..db2d38075d 100644
--- a/examples/sites/demos/pc/app/date-picker/multiple-dates-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/multiple-dates-composition-api.vue
@@ -15,7 +15,7 @@ const yearsValue = ref('')
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/multiple-dates.vue b/examples/sites/demos/pc/app/date-picker/multiple-dates.vue
index f5a898aef9..ff80ec3c80 100644
--- a/examples/sites/demos/pc/app/date-picker/multiple-dates.vue
+++ b/examples/sites/demos/pc/app/date-picker/multiple-dates.vue
@@ -23,7 +23,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/now-composition-api.vue b/examples/sites/demos/pc/app/date-picker/now-composition-api.vue
index 50c971cdfe..b75fb3c2d1 100644
--- a/examples/sites/demos/pc/app/date-picker/now-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/now-composition-api.vue
@@ -38,7 +38,7 @@ const now = () => {
 
 <style scoped>
 .demo-date-picker {
-  width: 280px;
+  width: 360px;
 }
 .nowclass {
   display: inline-flex;
diff --git a/examples/sites/demos/pc/app/date-picker/now.vue b/examples/sites/demos/pc/app/date-picker/now.vue
index 3a7297a462..84af0a8f56 100644
--- a/examples/sites/demos/pc/app/date-picker/now.vue
+++ b/examples/sites/demos/pc/app/date-picker/now.vue
@@ -46,7 +46,7 @@ export default {
 
 <style scoped>
 .demo-date-picker {
-  width: 280px;
+  width: 360px;
 }
 .nowclass {
   display: inline-flex;
diff --git a/examples/sites/demos/pc/app/date-picker/size-composition-api.vue b/examples/sites/demos/pc/app/date-picker/size-composition-api.vue
index 099f3cf0cd..7626b5ff5b 100644
--- a/examples/sites/demos/pc/app/date-picker/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/size-composition-api.vue
@@ -52,12 +52,7 @@ const radioValue = ref('default')
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/size.vue b/examples/sites/demos/pc/app/date-picker/size.vue
index 4dd3a81694..c8526f7d50 100644
--- a/examples/sites/demos/pc/app/date-picker/size.vue
+++ b/examples/sites/demos/pc/app/date-picker/size.vue
@@ -58,12 +58,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/step-composition-api.vue b/examples/sites/demos/pc/app/date-picker/step-composition-api.vue
index f4134851f2..315a98856c 100644
--- a/examples/sites/demos/pc/app/date-picker/step-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/step-composition-api.vue
@@ -35,6 +35,6 @@ const value = ref('')
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/step.vue b/examples/sites/demos/pc/app/date-picker/step.vue
index 526c475bc6..91d3b5aa4c 100644
--- a/examples/sites/demos/pc/app/date-picker/step.vue
+++ b/examples/sites/demos/pc/app/date-picker/step.vue
@@ -36,6 +36,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue b/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue
index 90aae215fd..ac89908a3c 100644
--- a/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue
@@ -45,6 +45,6 @@ function selectChange(tz) {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/timezone.vue b/examples/sites/demos/pc/app/date-picker/timezone.vue
index e148dc86fe..cc63e9abca 100644
--- a/examples/sites/demos/pc/app/date-picker/timezone.vue
+++ b/examples/sites/demos/pc/app/date-picker/timezone.vue
@@ -55,6 +55,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/unlink-panels-composition-api.vue b/examples/sites/demos/pc/app/date-picker/unlink-panels-composition-api.vue
index 78799e78e7..98c8f99ae8 100644
--- a/examples/sites/demos/pc/app/date-picker/unlink-panels-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/unlink-panels-composition-api.vue
@@ -24,6 +24,6 @@ const value = ref([])
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/unlink-panels.vue b/examples/sites/demos/pc/app/date-picker/unlink-panels.vue
index fce19d102c..45443a4c9f 100644
--- a/examples/sites/demos/pc/app/date-picker/unlink-panels.vue
+++ b/examples/sites/demos/pc/app/date-picker/unlink-panels.vue
@@ -32,6 +32,6 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/validate-event-composition-api.vue b/examples/sites/demos/pc/app/date-picker/validate-event-composition-api.vue
index 73600329e9..514d981e0c 100644
--- a/examples/sites/demos/pc/app/date-picker/validate-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/validate-event-composition-api.vue
@@ -84,7 +84,7 @@ function resetForm() {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 400px;
+  width: 360px;
 
   :deep(.tiny-form-item .tiny-form-item) {
     margin-bottom: 8px;
diff --git a/examples/sites/demos/pc/app/date-picker/validate-event.vue b/examples/sites/demos/pc/app/date-picker/validate-event.vue
index 496bc43484..c9b7019c63 100644
--- a/examples/sites/demos/pc/app/date-picker/validate-event.vue
+++ b/examples/sites/demos/pc/app/date-picker/validate-event.vue
@@ -88,7 +88,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 400px;
+  width: 360px;
 
   :deep(.tiny-form-item .tiny-form-item) {
     margin-bottom: 8px;
diff --git a/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue
index 0593e49af6..530927feae 100644
--- a/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue
@@ -16,7 +16,7 @@
 import { ref } from 'vue'
 import { TimePicker as TinyTimePicker } from '@opentiny/vue'
 
-const value1 = ref(new Date(2016, 9, 10, 18, 40))
+const value1 = ref(new Date(2016, 9, 10, 18, 40, 20))
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/time-picker/basic-usage.spec.ts b/examples/sites/demos/pc/app/time-picker/basic-usage.spec.ts
index 7c32637c8d..681e3c76e0 100644
--- a/examples/sites/demos/pc/app/time-picker/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/time-picker/basic-usage.spec.ts
@@ -5,15 +5,15 @@ test('时间选择器基本用法', async ({ page }) => {
   await page.goto('time-picker#basic-usage')
 
   // 测试滚动选择时间
-  const timePicker = page.getByRole('textbox', { name: '18:42:00' }).first()
-  await page.getByRole('textbox', { name: '18:40:00' }).first().click()
+  const timePicker = page.getByRole('textbox', { name: '18:42:20' }).first()
+  await page.getByRole('textbox', { name: '18:40:20' }).first().click()
   await page.getByRole('listitem').filter({ hasText: '42' }).first().click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(timePicker).toBeVisible()
 
   // 测试箭头选择时间
-  const timePickerArrowControl = page.getByRole('textbox', { name: '19:42:00' }).nth(1)
-  await page.getByRole('textbox', { name: '18:42:00' }).nth(1).click()
+  const timePickerArrowControl = page.getByRole('textbox', { name: '19:42:20' }).nth(1)
+  await page.getByRole('textbox', { name: '18:42:20' }).nth(1).click()
   await page.locator('.tiny-time-spinner__wrapper > i:nth-child(2)').first().click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(timePickerArrowControl).toBeVisible()
diff --git a/examples/sites/demos/pc/app/time-picker/basic-usage.vue b/examples/sites/demos/pc/app/time-picker/basic-usage.vue
index 36a958282c..981e20a5c5 100644
--- a/examples/sites/demos/pc/app/time-picker/basic-usage.vue
+++ b/examples/sites/demos/pc/app/time-picker/basic-usage.vue
@@ -21,7 +21,7 @@ export default {
   },
   data() {
     return {
-      value1: new Date(2016, 9, 10, 18, 40)
+      value1: new Date(2016, 9, 10, 18, 40, 20)
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/time-picker/format.spec.ts b/examples/sites/demos/pc/app/time-picker/format.spec.ts
index 5babeec549..dcafe50c0b 100644
--- a/examples/sites/demos/pc/app/time-picker/format.spec.ts
+++ b/examples/sites/demos/pc/app/time-picker/format.spec.ts
@@ -12,7 +12,7 @@ test('时间格式化', async ({ page }) => {
 
   await page.getByRole('textbox', { name: '19:40:00 pm' }).click()
   await page.waitForTimeout(100)
-  await page.getByRole('listitem').filter({ hasText: '08 pm' }).locator('span').click()
+  await page.getByRole('listitem').filter({ hasText: '08 pm' }).locator('span').first().click()
   await page.getByRole('button', { name: '确定' }).click()
   await page.waitForTimeout(100)
   await expect(page.getByRole('textbox', { name: '20:40:00 pm' })).toBeVisible()
diff --git a/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue b/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue
index 17d2fdfb6d..3925e6f570 100644
--- a/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue
@@ -16,6 +16,6 @@ const value1 = ref([startTime, endTime])
 
 <style scoped lang="less">
 .demo-time-picker-wrap {
-  width: 360px;
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/is-range.vue b/examples/sites/demos/pc/app/time-picker/is-range.vue
index c88c0c18b8..a7c28ee54e 100644
--- a/examples/sites/demos/pc/app/time-picker/is-range.vue
+++ b/examples/sites/demos/pc/app/time-picker/is-range.vue
@@ -24,6 +24,6 @@ export default {
 
 <style scoped lang="less">
 .demo-time-picker-wrap {
-  width: 360px;
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/webdoc/time-picker.js b/examples/sites/demos/pc/app/time-picker/webdoc/time-picker.js
index 8093293f67..a8616d485c 100644
--- a/examples/sites/demos/pc/app/time-picker/webdoc/time-picker.js
+++ b/examples/sites/demos/pc/app/time-picker/webdoc/time-picker.js
@@ -22,7 +22,7 @@ export default {
         'en-US': 'Select time range'
       },
       desc: {
-        'zh-CN': '<p><code>picker-options</code> 设置固定时间范围</p>',
+        'zh-CN': '<p>通过<code>picker-options</code> 设置固定时间范围</p>',
         'en-US': '<p><code>picker-options</code> Setting a fixed time range.</p>'
       },
       codeFiles: ['picker-options.vue']
@@ -35,7 +35,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          "<p><code>is-range</code> 设置是否为范围选择，默认为 false，<code>range-separator</code>，设置范围选择分隔符（为可选值）默认为 '-'。</p>",
+          "<p>通过<code>is-range</code> 设置是否为范围选择，默认为 false，通过<code>range-separator</code>设置范围选择分隔符（为可选值）默认为 '-'。</p>",
         'en-US':
           "<p><code> is-range </code> whether the setting is range selection. Default is false, <code> range-separator </code>, and the range selection delimiter (optional) defaults to'-'.</p>"
       },
diff --git a/packages/theme/src/picker/index.less b/packages/theme/src/picker/index.less
index 888a7dede8..0719632349 100644
--- a/packages/theme/src/picker/index.less
+++ b/packages/theme/src/picker/index.less
@@ -114,21 +114,17 @@
       width: 12%;
     }
 
-    .@{range-prefix-cls}__close-box {
-      height: 16px;
-      z-index: 5;
-      position: relative;
-    }
-
     .@{range-prefix-cls}__close-icon {
-      width: 20px;
-      height: 18px;
+      width: 16px;
+      height: 16px;
       position: absolute;
-      right: -20px;
+      top: 16px;
+      right: 12px;
+      transform: translateY(-50%);
       background-color: #ffffff;
-      margin-top: -1px;
-
-      &,
+      fill: var(--tv-Picker-icon-color);
+      z-index: 5;
+      
       &:hover {
         fill: var(--tv-Picker-icon-color-hover);
       }
@@ -177,7 +173,7 @@
     }
 
     .@{range-prefix-cls}-separator {
-      line-height: 28px;
+      line-height: 20px;
       font-size: var(--tv-Picker-font-size);
     }
 
diff --git a/packages/theme/src/time-panel/index.less b/packages/theme/src/time-panel/index.less
index 45663d660a..61a26e12a8 100644
--- a/packages/theme/src/time-panel/index.less
+++ b/packages/theme/src/time-panel/index.less
@@ -36,13 +36,10 @@
     display: block;
   }
 
-  &__header-input {
-    margin: var(--tv-TimePanel-header-margin);
-  }
-
   &__header-title {
     display: flex;
     justify-content: space-around;
+    margin: var(--tv-TimePanel-header-margin);
     color: var(--tv-TimePanel-header-text-color);
     align-items: center;
   }
diff --git a/packages/theme/src/time-panel/vars.less b/packages/theme/src/time-panel/vars.less
index e74010011a..fcb84b88c6 100644
--- a/packages/theme/src/time-panel/vars.less
+++ b/packages/theme/src/time-panel/vars.less
@@ -29,7 +29,7 @@
   --tv-TimePanel-border-color-divider: var(--tv-color-border-divider, #f0f0f0);
 
   // 头部外间距
-  --tv-TimePanel-header-margin: var(--tv-space-xl, 16px) 2px 24px 2px;
+  --tv-TimePanel-header-margin: var(--tv-space-xl, 16px) 2px 0 2px;
   // 头部文本色
   --tv-TimePanel-header-text-color: var(--tv-color-text-weaken, #808080);
   // 内容区底部内间距
diff --git a/packages/theme/src/time-spinner/index.less b/packages/theme/src/time-spinner/index.less
index 21085ceb06..d21a9901ff 100644
--- a/packages/theme/src/time-spinner/index.less
+++ b/packages/theme/src/time-spinner/index.less
@@ -54,6 +54,9 @@
     }
 
     .@{time-spinner-prefix-cls}__list {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
       transform: translateY(-6px);
       margin: var(--tv-TimeSpinner-list-margin);
     }
@@ -64,7 +67,12 @@
       }
     }
   }
-
+  &__wrapper.is-arrow {
+    height: 220px;
+  }
+  &__wrapper.is-arrow .@{time-spinner-prefix-cls}__list{
+    height: 200px;
+  }
   &__arrow {
     height: 30px;
     line-height: 30px;
diff --git a/packages/vue/src/picker/src/pc.vue b/packages/vue/src/picker/src/pc.vue
index f5407f9ef5..02a3a3ec2b 100644
--- a/packages/vue/src/picker/src/pc.vue
+++ b/packages/vue/src/picker/src/pc.vue
@@ -120,11 +120,11 @@
       />
       <i class="tiny-input__icon tiny-input__icon">
         <transition name="tiny-transition-icon-scale-in">
-          <div v-if="state.haveTrigger" class="tiny-range__close-box">
+          <div v-if="state.haveTrigger">
             <component
               :is="state.showClose ? clearIcon : null"
               @click="handleClickIcon"
-              class="baseClearicon tiny-range__close-icon"
+              class="tiny-range__close-icon"
             />
           </div>
         </transition>
diff --git a/packages/vue/src/time/src/pc.vue b/packages/vue/src/time/src/pc.vue
index 6a29bd7dee..6b6a1a4fc6 100644
--- a/packages/vue/src/time/src/pc.vue
+++ b/packages/vue/src/time/src/pc.vue
@@ -13,9 +13,6 @@
   <transition name="tiny-zoom-in-top" @after-leave="$emit('dodestroy')">
     <div v-show="state.visible" class="tiny-time tiny-time-panel tiny-popper" :class="state.popperClass">
       <div class="tiny-time-panel__header">
-        <div class="tiny-time-panel__header-input">
-          <tiny-input v-model="state.displayValue" :placeholder="state.format"></tiny-input>
-        </div>
         <div class="tiny-time-panel__header-title">
           <span>{{ t('ui.datepicker.hour') }}</span>
           <span>{{ t('ui.datepicker.minute') }}</span>
@@ -58,14 +55,12 @@
 import { renderless, api } from '@opentiny/vue-renderless/time/vue'
 import { props, setup, defineComponent } from '@opentiny/vue-common'
 import TimeSpinner from '@opentiny/vue-time-spinner'
-import Input from '@opentiny/vue-input'
 import Button from '@opentiny/vue-button'
 
 export default defineComponent({
   emits: ['dodestroy', 'pick', 'select-range'],
   components: {
     TimeSpinner,
-    TinyInput: Input,
     TinyButton: Button
   },
   props: [...props, 'show', 'timeArrowControl', 'emitter', 'value', 'step'],