diff --git a/components/doc/calendar/rangedoc.js b/components/doc/calendar/rangedoc.js
index eda74a7be1..1b668042a7 100644
--- a/components/doc/calendar/rangedoc.js
+++ b/components/doc/calendar/rangedoc.js
@@ -8,7 +8,7 @@ export function RangeDoc(props) {
 
     const code = {
         basic: `
-<Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="range" readOnlyInput />
+<Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="range" readOnlyInput hideOnRangeSelection />
         `,
         javascript: `
 import React, { useState } from "react";
@@ -19,7 +19,7 @@ export default function RangeDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="range" readOnlyInput />
+            <Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="range" readOnlyInput hideOnRangeSelection />
         </div>
     )
 }
@@ -34,7 +34,7 @@ export default function RangeDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="range" readOnlyInput />
+            <Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="range" readOnlyInput hideOnRangeSelection />
         </div>
 
     )
@@ -50,7 +50,7 @@ export default function RangeDemo() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="range" readOnlyInput />
+                <Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="range" readOnlyInput hideOnRangeSelection />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index 2f6b1b5098..d17a2019b8 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -1630,6 +1630,12 @@ export const Calendar = React.memo(
 
                     selectedValues = [startDate, endDate];
                     updateModel(event, selectedValues);
+
+                    if (props.hideOnRangeSelection && endDate !== null) {
+                        setTimeout(() => {
+                            setOverlayVisibleState(false);
+                        }, 150);
+                    }
                 } else {
                     selectedValues = [date, null];
                     updateModel(event, selectedValues);
diff --git a/components/lib/calendar/CalendarBase.js b/components/lib/calendar/CalendarBase.js
index f4c6ae6c28..1ca0ea7da3 100644
--- a/components/lib/calendar/CalendarBase.js
+++ b/components/lib/calendar/CalendarBase.js
@@ -249,6 +249,7 @@ export const CalendarBase = ComponentBase.extend({
         formatDateTime: null,
         headerTemplate: null,
         hideOnDateTimeSelect: false,
+        hideOnRangeSelection: false,
         hourFormat: '24',
         icon: null,
         iconPos: 'right',
diff --git a/components/lib/calendar/calendar.d.ts b/components/lib/calendar/calendar.d.ts
index fb1c21b155..e6be7fbb79 100644
--- a/components/lib/calendar/calendar.d.ts
+++ b/components/lib/calendar/calendar.d.ts
@@ -587,6 +587,10 @@ interface CalendarBaseProps {
      * @defaultValue false
      */
     hideOnDateTimeSelect?: boolean | undefined;
+    /**
+     * Whether to hide the overlay on date selection is completed when selectionMode is range.
+     */
+    hideOnRangeSelection?: boolean | undefined;
     /**
      * Specifies 12 or 24 hour format.
      * @defaultValue 24