diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/date-range-picker/date-range-picker-extensions.js b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/date-range-picker/date-range-picker-extensions.js
index 7dae64e38e..44615e5acd 100644
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/date-range-picker/date-range-picker-extensions.js
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/date-range-picker/date-range-picker-extensions.js
@@ -304,6 +304,9 @@
 
     function setOptions(options, $datePickerElement, singleDatePicker) {
         options.singleDatePicker = singleDatePicker;
+
+        var $modal = $datePickerElement.closest('.modal.fade');
+
         var defaultOptions = {
             showDropdowns: true,
             opens: "center",
@@ -320,7 +323,8 @@
                 clearLabel: abp.localization.localize('Clear', 'AbpUi'),
                 applyLabel: abp.localization.localize('Apply', 'AbpUi'),
             },
-            singleOpenAndClearButton: true
+            singleOpenAndClearButton: true,
+            parentEl: $modal.length > 0 ? $modal : 'body'
         };
         var locale = defaultOptions.locale;
         $.extend(options, defaultOptions);