diff --git a/src/RangeCalendar.tsx b/src/RangeCalendar.tsx
index ca5b801a..73ebf99f 100644
--- a/src/RangeCalendar.tsx
+++ b/src/RangeCalendar.tsx
@@ -802,6 +802,7 @@ class RangeCalendar extends React.Component<RangeCalendarProps, RangeCalendarSta
               enablePrev
               enableNext={!isClosestMonths || this.isMonthYearPanelShow(mode[1])}
               clearIcon={clearIcon}
+              onClear={this.clear}
             />
             <span className={`${prefixCls}-range-middle`}>{seperator}</span>
             <CalendarPart
@@ -826,6 +827,7 @@ class RangeCalendar extends React.Component<RangeCalendarProps, RangeCalendarSta
               enablePrev={!isClosestMonths || this.isMonthYearPanelShow(mode[0])}
               enableNext
               clearIcon={clearIcon}
+              onClear={this.clear}
             />
           </div>
           <div className={cls}>
diff --git a/src/range-calendar/CalendarPart.tsx b/src/range-calendar/CalendarPart.tsx
index 28745818..a6cc4d11 100644
--- a/src/range-calendar/CalendarPart.tsx
+++ b/src/range-calendar/CalendarPart.tsx
@@ -83,6 +83,7 @@ const CalendarPart: React.FC<CalendarPartProps> = props => {
     enablePrev,
     enableNext,
     clearIcon,
+    onClear,
     showClear,
     inputMode,
   } = props;
@@ -120,6 +121,7 @@ const CalendarPart: React.FC<CalendarPartProps> = props => {
       placeholder={placeholder}
       value={value as Moment}
       showClear={showClear || false}
+      onClear={onClear}
       selectedValue={selectedValue[index]}
       onChange={onInputChange}
       onSelect={onInputSelect}
diff --git a/tests/__snapshots__/FullCalendar.spec.js.snap b/tests/__snapshots__/FullCalendar.spec.js.snap
index 9a28ab07..02f0fbc7 100644
--- a/tests/__snapshots__/FullCalendar.spec.js.snap
+++ b/tests/__snapshots__/FullCalendar.spec.js.snap
@@ -724,6 +724,7 @@ exports[`FullCalendar renders date mode correctly 1`] = `
             aria-owns="undefined_list"
             autocomplete="off"
             class="rc-select-selection-search-input"
+            readonly=""
             role="combobox"
             style="opacity:0"
             value=""
@@ -764,6 +765,7 @@ exports[`FullCalendar renders date mode correctly 1`] = `
             aria-owns="undefined_list"
             autocomplete="off"
             class="rc-select-selection-search-input"
+            readonly=""
             role="combobox"
             style="opacity:0"
             value=""
@@ -1503,6 +1505,7 @@ exports[`FullCalendar renders fullscreen correctly 1`] = `
             aria-owns="undefined_list"
             autocomplete="off"
             class="rc-select-selection-search-input"
+            readonly=""
             role="combobox"
             style="opacity:0"
             value=""
@@ -1543,6 +1546,7 @@ exports[`FullCalendar renders fullscreen correctly 1`] = `
             aria-owns="undefined_list"
             autocomplete="off"
             class="rc-select-selection-search-input"
+            readonly=""
             role="combobox"
             style="opacity:0"
             value=""
@@ -2282,6 +2286,7 @@ exports[`FullCalendar renders month mode correctly 1`] = `
             aria-owns="undefined_list"
             autocomplete="off"
             class="rc-select-selection-search-input"
+            readonly=""
             role="combobox"
             style="opacity:0"
             value=""
@@ -2510,6 +2515,7 @@ exports[`FullCalendar type renders defaultType correctly 1`] = `
             aria-owns="undefined_list"
             autocomplete="off"
             class="rc-select-selection-search-input"
+            readonly=""
             role="combobox"
             style="opacity:0"
             value=""
@@ -2550,6 +2556,7 @@ exports[`FullCalendar type renders defaultType correctly 1`] = `
             aria-owns="undefined_list"
             autocomplete="off"
             class="rc-select-selection-search-input"
+            readonly=""
             role="combobox"
             style="opacity:0"
             value=""