diff --git a/modules/docs/src/Volo.Docs.Admin.Web/Pages/Docs/Admin/Documents/Index.cshtml b/modules/docs/src/Volo.Docs.Admin.Web/Pages/Docs/Admin/Documents/Index.cshtml
index 738327def9..c7f1fcb3c8 100644
--- a/modules/docs/src/Volo.Docs.Admin.Web/Pages/Docs/Admin/Documents/Index.cshtml
+++ b/modules/docs/src/Volo.Docs.Admin.Web/Pages/Docs/Admin/Documents/Index.cshtml
@@ -89,34 +89,34 @@
                             <div class="input-group mb-2">
                                 <div class="input-group-text">@L["CreationTime"].Value</div>
 
-                                    <input type="date"
+                                    <input type="text"
                                        id="CreationTimeMin"
                                        name="CreationTimeMin"
-                                       class="form-control datepicker"
+                                       class="form-control daterangesinglepicker"
                                        placeholder="@L["StartDate"].Value">
                                     
-                                    <input type="date"
+                                    <input type="text"
                                        id="CreationTimeMax"
                                        name="CreationTimeMax"
                                        placeholder="@L["EndDate"].Value"
-                                       class="form-control datepicker">
+                                       class="form-control daterangesinglepicker">
                             </div>
                         </abp-column>
 
                         <abp-column size="_4">
                             <div class="input-group mb-2">
                                 <div class="input-group-text">@L["LastUpdateTime"].Value</div>
-                                    <input type="date"
+                                    <input type="text"
                                        id="LastUpdatedTimeMin"
                                        name="LastUpdatedTimeMin"
-                                       class="form-control datepicker"
+                                       class="form-control daterangesinglepicker"
                                        placeholder="@L["StartDate"].Value">
                                     <span>-</span>
-                                    <input type="date"
+                                    <input type="text"
                                        id="LastUpdatedTimeMax"
                                        name="LastUpdatedTimeMax"
                                        placeholder="@L["EndDate"].Value"
-                                       class="form-control datepicker">
+                                       class="form-control daterangesinglepicker">
                             </div>
                         </abp-column>
 
@@ -124,17 +124,17 @@
                             <div class="input-group mb-2">
                                 <div class="input-group-text">@L["LastCachedTime"].Value</div>
 
-                                    <input type="date"
+                                    <input type="text"
                                        id="LastCachedTimeMin"
                                        name="LastCachedTimeMin"
-                                       class="form-control datepicker"
+                                       class="form-control daterangesinglepicker"
                                        placeholder="@L["StartDate"].Value">
                                        
-                                    <input type="date"
+                                    <input type="text"
                                        id="LastCachedTimeMax"
                                        name="LastCachedTimeMax"
                                        placeholder="@L["EndDate"].Value"
-                                       class="form-control datepicker">
+                                       class="form-control daterangesinglepicker">
                             </div>
                         </abp-column>
                         
@@ -156,17 +156,17 @@
                             <div class="input-group mb-2">
                                 <div class="input-group-text">@L["LastSignificantUpdateTime"].Value</div>
 
-                                    <input type="date"
+                                    <input type="text"
                                        id="LastSignificantUpdateTimeMin"
                                        name="LastSignificantUpdateTimeMin"
-                                       class="form-control datepicker"
+                                       class="form-control daterangesinglepicker"
                                        placeholder="@L["StartDate"].Value">
                                        
-                                    <input type="date"
+                                    <input type="text"
                                        id="LastSignificantUpdateTimeMax"
                                        name="LastSignificantUpdateTimeMax"
                                        placeholder="@L["EndDate"].Value"
-                                       class="form-control datepicker">
+                                       class="form-control daterangesinglepicker">
                             </div>
                         </abp-column>
                         
diff --git a/modules/docs/src/Volo.Docs.Admin.Web/Pages/Docs/Admin/Documents/index.js b/modules/docs/src/Volo.Docs.Admin.Web/Pages/Docs/Admin/Documents/index.js
index 5f4dc9b8d7..4f6bd5f61b 100644
--- a/modules/docs/src/Volo.Docs.Admin.Web/Pages/Docs/Admin/Documents/index.js
+++ b/modules/docs/src/Volo.Docs.Admin.Web/Pages/Docs/Admin/Documents/index.js
@@ -3,9 +3,33 @@ $(function () {
     var service = window.volo.docs.admin.documentsAdmin;
 
     var getFormattedDate = function ($datePicker) {
-        return $datePicker.data().datepicker.getFormattedDate('yyyy-mm-dd');
+        var date = moment($datePicker.val());
+        if (!date.isValid()) {
+            return null;
+        }
+        return date.toISOString();
     };
 
+    $('.daterangesinglepicker').daterangepicker({
+        "singleDatePicker": true,
+        "showDropdowns": true,
+        "autoUpdateInput": false,
+        "autoApply": true,
+        "opens": "center",
+        "drops": "auto"
+    });
+
+
+    $('.daterangesinglepicker').on('apply.daterangepicker', function (ev, picker) {
+        $(this).val(picker.startDate.format('l'));
+    });
+    $('.daterangesinglepicker').on('cancel.daterangepicker', function (ev, picker) {
+        $(this).val('');
+    });
+    $('.daterangesinglepicker').on('hide.daterangepicker', function (ev, picker) {
+        $(this).val('');
+    });
+
     var getFilter = function () {
         return {
             projectId: $('#ProjectId').val(),