From 91cdaeecbd5ac251bbc6ecb564800ac31b7f55f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Thu, 30 Jun 2022 17:21:29 +0300
Subject: [PATCH] Fixed #2684 - Add hideOnRangeSelection property to Calendar

---
 api-generator/components/calendar.js  |  6 ++++++
 src/components/calendar/Calendar.d.ts |  4 ++++
 src/components/calendar/Calendar.vue  | 10 ++++++++++
 src/views/calendar/CalendarDoc.vue    |  6 ++++++
 4 files changed, 26 insertions(+)

diff --git a/api-generator/components/calendar.js b/api-generator/components/calendar.js
index d9eeb84cf..bccfcaedc 100644
--- a/api-generator/components/calendar.js
+++ b/api-generator/components/calendar.js
@@ -198,6 +198,12 @@ const CalendarProps = [
         default: "false",
         description: "Whether to hide the overlay on date selection when showTime is enabled."
     },
+    {
+        name: "hideOnRangeSelection",
+        type: "boolean",
+        default: "false",
+        description: "Whether to hide the overlay on date selection is completed when selectionMode is range."
+    },
     {
         name: "timeSeparator",
         type: "string",
diff --git a/src/components/calendar/Calendar.d.ts b/src/components/calendar/Calendar.d.ts
index d60d36e1c..1dc49ed08 100755
--- a/src/components/calendar/Calendar.d.ts
+++ b/src/components/calendar/Calendar.d.ts
@@ -215,6 +215,10 @@ export interface CalendarProps {
      * Whether to hide the overlay on date selection when showTime is enabled.
      */
     hideOnDateTimeSelect?: boolean | undefined;
+    /**
+     * Whether to hide the overlay on date selection is completed when selectionMode is range.
+     */
+    hideOnRangeSelection?: boolean | undefined;
     /**
      * Separator of time selector.
      * Default value is ':'.
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 2de385c33..0a537fbd4 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -283,6 +283,10 @@ export default {
             type: Boolean,
             default: false
         },
+        hideOnRangeSelection: {
+            type: Boolean,
+            default: false
+        },
         timeSeparator: {
             type: String,
             default: ':'
@@ -939,6 +943,12 @@ export default {
             if (modelVal !== null) {
                 this.updateModel(modelVal);
             }
+
+            if (this.isRangeSelection() && this.hideOnRangeSelection && modelVal[1] !== null) {
+                setTimeout(() => {
+                    this.overlayVisible = false;
+                }, 150);
+            }
             this.$emit('date-select', date);
         },
         updateModel(value) {
diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue
index 9dc814cdd..dab1a72da 100755
--- a/src/views/calendar/CalendarDoc.vue
+++ b/src/views/calendar/CalendarDoc.vue
@@ -398,6 +398,12 @@ export default {
                         <td>false</td>
                         <td>Whether to hide the overlay on date selection when showTime is enabled.</td>
                     </tr>
+                    <tr>
+                        <td>hideOnRangeSelection</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether to hide the overlay on date selection is completed when selectionMode is range.</td>
+                    </tr>
                     <tr>
                         <td>timeSeparator</td>
                         <td>string</td>