diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx
index 3260eaee..5c88cfd6 100644
--- a/src/date-picker/DatePicker.tsx
+++ b/src/date-picker/DatePicker.tsx
@@ -98,10 +98,15 @@ export default class DatePicker extends Component<DatePickerProps> {
    * 管理value的受控/非受控状态
    */
   private setupValueControl(props: DatePickerProps) {
-    const [value, setValue] = useControlled(props, 'value', (val, context) => props.onChange?.(val, context), {
-      defaultValue: props.defaultValue,
-      activeComponent: this,
-    });
+    const [value, setValue] = useControlled(
+      props,
+      'value',
+      (val, context) => this.fire('change', { value: val, ...context }),
+      {
+        defaultValue: props.defaultValue,
+        activeComponent: this,
+      },
+    );
     this.valueState = value as DateValue;
     this.setValueState = (nextValue, context) => {
       setValue(nextValue, context);
@@ -117,7 +122,7 @@ export default class DatePicker extends Component<DatePickerProps> {
     const [visible, setVisible] = useControlled(
       props,
       'popupVisible',
-      (val, context) => props.onVisibleChange?.(val, context),
+      (val, context) => this.fire('visible-change', { visible: val, ...context }),
       {
         defaultPopupVisible: props.defaultPopupVisible,
         activeComponent: this,
@@ -219,7 +224,7 @@ export default class DatePicker extends Component<DatePickerProps> {
     this.inputValueSignal.value = '';
     this.setValueState?.(undefined, { trigger: 'clear', dayjsValue: dayjs() });
     this.setPopupVisibleState?.(false, { trigger: 'clear', ...detail });
-    this.props.onClear?.(detail);
+    this.fire('clear', detail);
   };
 
   /**
@@ -253,7 +258,7 @@ export default class DatePicker extends Component<DatePickerProps> {
       dayjsValue,
       trigger: 'pick',
     });
-    this.props.onPick?.(date, { dayjsValue, trigger: 'pick' });
+    this.fire('pick', { value: date, dayjsValue, trigger: 'pick' });
     this.setPopupVisibleState?.(false, { trigger: 'pick' });
   };
 
@@ -363,7 +368,7 @@ export default class DatePicker extends Component<DatePickerProps> {
       dayjsValue,
       trigger: 'preset',
     });
-    this.props.onPresetClick?.(context);
+    this.fire('preset-click', context);
   };
 
   private renderPanel(props: DatePickerProps) {
diff --git a/src/date-picker/DateRangePicker.tsx b/src/date-picker/DateRangePicker.tsx
index 2cfdee3d..fb20c12c 100644
--- a/src/date-picker/DateRangePicker.tsx
+++ b/src/date-picker/DateRangePicker.tsx
@@ -107,10 +107,15 @@ export default class DateRangePicker extends Component<DateRangePickerProps> {
    * 设置值的受控逻辑
    */
   private setupValueControl(props: DateRangePickerProps) {
-    const [value, setValue] = useControlled(props, 'value', (val, context) => props.onChange?.(val, context), {
-      defaultValue: props.defaultValue,
-      activeComponent: this,
-    });
+    const [value, setValue] = useControlled(
+      props,
+      'value',
+      (val, context) => this.fire('change', { value: val, ...context }),
+      {
+        defaultValue: props.defaultValue,
+        activeComponent: this,
+      },
+    );
     this.valueState = (value as DateRangeValue) || [];
     this.setValueState = (nextValue, context) => {
       setValue(nextValue, context);
@@ -126,7 +131,7 @@ export default class DateRangePicker extends Component<DateRangePickerProps> {
     const [visible, setVisible] = useControlled(
       props,
       'popupVisible',
-      (val, context) => props.onVisibleChange?.(val, context),
+      (val, context) => this.fire('visible-change', { visible: val, ...context }),
       {
         defaultPopupVisible: props.defaultPopupVisible,
         activeComponent: this,
@@ -222,7 +227,7 @@ export default class DateRangePicker extends Component<DateRangePickerProps> {
     this.hoverValueSignal.value = ['', ''];
     this.setValueState?.([], { trigger: 'clear', dayjsValue: [dayjs(), dayjs()] });
     this.setPopupVisibleState?.(false, { trigger: 'clear', ...detail });
-    this.props.onClear?.(detail);
+    this.fire('clear', detail);
   };
 
   /**
@@ -271,7 +276,7 @@ export default class DateRangePicker extends Component<DateRangePickerProps> {
     }
 
     const dayjsValue = parseToDayjs(date, format);
-    this.props.onPick?.(date, { dayjsValue, trigger: 'pick', partial });
+    this.fire('pick', { value: date, dayjsValue, trigger: 'pick', partial });
 
     // 首次点击不关闭，第二次点击（两端都有值）后关闭
     if (isFirstClick) {
@@ -482,7 +487,7 @@ export default class DateRangePicker extends Component<DateRangePickerProps> {
       dayjsValue: formattedPreset.map((p) => parseToDayjs(p, format)),
       trigger: 'preset',
     });
-    this.props.onPresetClick?.(context);
+    this.fire('preset-click', context);
   };
 
   /** 处理范围输入框变化，检测清空操作 */
diff --git a/src/date-picker/_example/base.tsx b/src/date-picker/_example/base.tsx
index 23dd9143..be75f30a 100644
--- a/src/date-picker/_example/base.tsx
+++ b/src/date-picker/_example/base.tsx
@@ -9,13 +9,13 @@ export default class DatePickerBaseDemo extends Component {
     rangeValue: ['', ''],
   };
 
-  handleDateChange = (value: string) => {
-    this.state.dateValue = value;
+  handleDateChange = (e: CustomEvent) => {
+    this.state.dateValue = e.detail.value;
     this.update();
   };
 
-  handleRangeChange = (value: string[]) => {
-    this.state.rangeValue = value;
+  handleRangeChange = (e: CustomEvent) => {
+    this.state.rangeValue = e.detail.value;
     this.update();
   };
 
diff --git a/src/date-picker/_example/input.tsx b/src/date-picker/_example/input.tsx
index 2f75bb05..2374e4d7 100644
--- a/src/date-picker/_example/input.tsx
+++ b/src/date-picker/_example/input.tsx
@@ -7,8 +7,8 @@ export default class DatePickerBaseDemo extends Component {
     dateValue: '',
   };
 
-  handleDateChange = (value: string) => {
-    this.state.dateValue = value;
+  handleDateChange = (e: CustomEvent) => {
+    this.state.dateValue = e.detail.value;
     this.update();
   };
 
diff --git a/src/date-picker/_example/limit.tsx b/src/date-picker/_example/limit.tsx
index 07c93e03..69292e07 100644
--- a/src/date-picker/_example/limit.tsx
+++ b/src/date-picker/_example/limit.tsx
@@ -20,8 +20,8 @@ export default class DatePickerLimitDemo extends Component {
     rangeValue: ['', ''],
   };
 
-  handleRangeChange = (value: string[]) => {
-    this.state.rangeValue = value;
+  handleRangeChange = (e: CustomEvent) => {
+    this.state.rangeValue = e.detail.value;
     this.update();
   };
 
diff --git a/src/date-picker/_example/month.tsx b/src/date-picker/_example/month.tsx
index 0884a3d6..12518d63 100644
--- a/src/date-picker/_example/month.tsx
+++ b/src/date-picker/_example/month.tsx
@@ -9,13 +9,13 @@ export default class DatePickerMonthDemo extends Component {
     rangeValue: ['', ''],
   };
 
-  handleChange = (value: string) => {
-    this.state.value = value;
+  handleChange = (e: CustomEvent) => {
+    this.state.value = e.detail.value;
     this.update();
   };
 
-  handleRangeChange = (value: string[]) => {
-    this.state.rangeValue = value;
+  handleRangeChange = (e: CustomEvent) => {
+    this.state.rangeValue = e.detail.value;
     this.update();
   };
 
diff --git a/src/date-picker/_example/presets.tsx b/src/date-picker/_example/presets.tsx
index d8a6604b..fe0af563 100644
--- a/src/date-picker/_example/presets.tsx
+++ b/src/date-picker/_example/presets.tsx
@@ -27,18 +27,18 @@ export default class DatePickerPresetsDemo extends Component {
     value3: ['', ''],
   };
 
-  handleChange1 = (value: string) => {
-    this.state.value1 = value;
+  handleChange1 = (e: CustomEvent) => {
+    this.state.value1 = e.detail.value;
     this.update();
   };
 
-  handleChange2 = (value: string[]) => {
-    this.state.value2 = value;
+  handleChange2 = (e: CustomEvent) => {
+    this.state.value2 = e.detail.value;
     this.update();
   };
 
-  handleChange3 = (value: string[]) => {
-    this.state.value3 = value;
+  handleChange3 = (e: CustomEvent) => {
+    this.state.value3 = e.detail.value;
     this.update();
   };
 
diff --git a/src/date-picker/_example/quarter.tsx b/src/date-picker/_example/quarter.tsx
index cfcceab2..6b5703d0 100644
--- a/src/date-picker/_example/quarter.tsx
+++ b/src/date-picker/_example/quarter.tsx
@@ -9,13 +9,13 @@ export default class DatePickerQuarterDemo extends Component {
     rangeValue: ['', ''],
   };
 
-  handleChange = (value: string) => {
-    this.state.value = value;
+  handleChange = (e: CustomEvent) => {
+    this.state.value = e.detail.value;
     this.update();
   };
 
-  handleRangeChange = (value: string[]) => {
-    this.state.rangeValue = value;
+  handleRangeChange = (e: CustomEvent) => {
+    this.state.rangeValue = e.detail.value;
     this.update();
   };
 
diff --git a/src/date-picker/_example/week.tsx b/src/date-picker/_example/week.tsx
index c97a5ae7..4192a906 100644
--- a/src/date-picker/_example/week.tsx
+++ b/src/date-picker/_example/week.tsx
@@ -9,13 +9,13 @@ export default class DatePickerWeekDemo extends Component {
     rangeValue: ['', ''],
   };
 
-  handleChange = (value: string) => {
-    this.state.value = value;
+  handleChange = (e: CustomEvent) => {
+    this.state.value = e.detail.value;
     this.update();
   };
 
-  handleRangeChange = (value: string[]) => {
-    this.state.rangeValue = value;
+  handleRangeChange = (e: CustomEvent) => {
+    this.state.rangeValue = e.detail.value;
     this.update();
   };
 
diff --git a/src/date-picker/_example/year.tsx b/src/date-picker/_example/year.tsx
index 94e6e41a..de740a3a 100644
--- a/src/date-picker/_example/year.tsx
+++ b/src/date-picker/_example/year.tsx
@@ -9,13 +9,13 @@ export default class DatePickerYearDemo extends Component {
     rangeValue: ['', ''],
   };
 
-  handleChange = (value: string) => {
-    this.state.value = value;
+  handleChange = (e: CustomEvent) => {
+    this.state.value = e.detail.value;
     this.update();
   };
 
-  handleRangeChange = (value: string[]) => {
-    this.state.rangeValue = value;
+  handleRangeChange = (e: CustomEvent) => {
+    this.state.rangeValue = e.detail.value;
     this.update();
   };