diff --git a/docs/component/datetime-picker.md b/docs/component/datetime-picker.md
index e3941dac5..567415ecc 100644
--- a/docs/component/datetime-picker.md
+++ b/docs/component/datetime-picker.md
@@ -255,6 +255,40 @@ const displayFormatTabLabel = (items) => {
 
 ```
 
+## 自定义icon
+
+添加 `right-icon` 插槽来自定义右侧图标。
+
+
+```html
+ <wd-datetime-picker label="自定义icon" v-model="value" ref="dateTimePickerRef">
+        <template #right-icon="{ disabled, readonly }">
+          <view @click.stop="rightIconClick" v-if="!disabled && !readonly">
+            <wd-icon custom-class="wd-picker__arrow" :name="isEmpty ? 'arrow-right' : 'close'" />
+          </view>
+        </template>
+</wd-datetime-picker>
+```
+
+```typescript
+import type {,
+  DatetimePickerExpose
+} from '@/uni_modules/wot-design-uni/components/wd-datetime-picker/types'
+
+const value = ref<any[]>(['', Date.now()])
+const dateTimePickerRef=ref<DatetimePickerExpose>(null)
+
+/* right-icon点击事件 */
+function rightIconClick() {
+  if (isEmpty.value) {
+    dateTimePickerRef.value!.open()
+    return
+  }
+  value.value = []
+}
+```
+
+
 ## Attributes
 
 | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
@@ -328,6 +362,7 @@ const displayFormatTabLabel = (items) => {
 |------|-----|---------|
 | default | 使用默认插槽 | - |
 | label | 左侧标题插槽 | - |
+| right-icon | 右侧图标插槽,作用域参数：{ disabled, readonly } | $LOWEST_VERSION$ |
 
 ## 外部样式类
 
diff --git a/src/pages/datetimePicker/Index.vue b/src/pages/datetimePicker/Index.vue
index 7c4e5cc6a..c4a26718d 100644
--- a/src/pages/datetimePicker/Index.vue
+++ b/src/pages/datetimePicker/Index.vue
@@ -33,6 +33,15 @@
     <demo-block title="范围tab展示格式" transparent>
       <wd-datetime-picker label="日期选择" v-model="value15" @confirm="handleConfirm15" :display-format-tab-label="displayFormatTabLabel" />
     </demo-block>
+    <demo-block title="自定义icon" transparent>
+      <wd-datetime-picker label="自定义icon" v-model="value18" ref="dateTimePickerRef">
+        <template #right-icon="{ disabled, readonly }">
+          <view @click.stop="rightIconClick" v-if="!disabled && !readonly">
+            <wd-icon custom-class="wd-picker__arrow" :name="isEmpty ? 'arrow-right' : 'close'" />
+          </view>
+        </template>
+      </wd-datetime-picker>
+    </demo-block>
   </page-wraper>
 </template>
 <script lang="ts" setup>
@@ -41,9 +50,10 @@ import type { DatetimePickerViewFilter, DatetimePickerViewFormatter } from '@/un
 import type {
   DatetimePickerDisplayFormat,
   DatetimePickerDisplayFormatTabLabel,
-  DatetimePickerInstance
+  DatetimePickerInstance,
+  DatetimePickerExpose
 } from '@/uni_modules/wot-design-uni/components/wd-datetime-picker/types'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 const value1 = ref<string>('')
 const value2 = ref<number>(Date.now())
@@ -62,10 +72,13 @@ const value14 = ref<any[]>(['', ''])
 const value15 = ref<any[]>(['', Date.now()])
 const value16 = ref(Date.now())
 const value17 = ref(Date.now())
+const value18 = ref<any[]>(['', Date.now()])
 
 const minDate = ref<number>(Date.now())
 const maxDate = ref<number>(new Date(new Date().getFullYear() + 1, new Date().getMonth(), new Date().getDate()).getTime())
 
+const dateTimePickerRef = ref<DatetimePickerExpose>()
+
 const formatter: DatetimePickerViewFormatter = (type, value) => {
   switch (type) {
     case 'year':
@@ -160,5 +173,18 @@ function handleConfirm16({ value }: any) {
 }
 /** picker触发cancel事件，同步触发cancel事件 */
 function onCancel() {}
+/* 自定义icon */
+const isEmpty = computed(() => {
+  return value18.value.every((item) => item == '')
+})
+/* right-icon点击事件 */
+function rightIconClick() {
+  if (isEmpty.value) {
+    dateTimePickerRef.value!.open()
+    return
+  }
+  value18.value = []
+  toast.success('清空成功')
+}
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue
index 946755f4e..8273ffed4 100644
--- a/src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue
@@ -38,7 +38,9 @@
                 {{ showValue ? showValue : placeholder || translate('placeholder') }}
               </view>
             </view>
-            <wd-icon v-if="!disabled && !readonly" custom-class="wd-picker__arrow" name="arrow-right" />
+            <slot name="right-icon" :disabled="disabled" :readonly="readonly">
+              <wd-icon v-if="!disabled && !readonly" custom-class="wd-picker__arrow" name="arrow-right" />
+            </slot>
           </view>
           <view v-if="errorMessage" class="wd-picker__error-message">{{ errorMessage }}</view>
         </view>
diff --git a/src/uni_modules/wot-design-uni/components/wd-pagination/index.scss b/src/uni_modules/wot-design-uni/components/wd-pagination/index.scss
index c464c50aa..c1f4c41a3 100644
--- a/src/uni_modules/wot-design-uni/components/wd-pagination/index.scss
+++ b/src/uni_modules/wot-design-uni/components/wd-pagination/index.scss
@@ -33,10 +33,11 @@
   @include edeep(nav) {
     min-width: $-pagination-nav-width;
     @include m(active){
-      color: rgba(0,0,0,0.65)      
+      opacity:0.935;
     }
     @include m(disabled){
-      color: rgba(0,0,0,0.15)      
+     // color: rgba(0,0,0,0.15)    
+      opacity:0.985;  
     }
   }
   @include e(size){
@@ -54,4 +55,4 @@
   @include e(current){
     color: $-pagination-nav-current-color;
   }
-}
\ No newline at end of file
+}