diff --git a/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DatePicker.cshtml b/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DatePicker.cshtml
index 4d426701d1..f14ae38a5a 100644
--- a/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DatePicker.cshtml
+++ b/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DatePicker.cshtml
@@ -1,10 +1,6 @@
 @page
 @model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.DatePickerModel
 
-@{
-    ViewData["Title"] = "DatePicker";
-}
-
 @section styles {
     <abp-style-bundle>
         <abp-style src="/css/demo.css"/>
@@ -21,7 +17,7 @@
                 singleOpenAndClearButton: false,
                 placeholder: "New Picker",
             });
-        newPicker.insertBefore($('.test-picker').parent());
+        newPicker.insertAfter($('.test-picker').parent());
     </script>
 }
 
@@ -30,7 +26,7 @@
 <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
 <script>hljs.initHighlightingOnLoad();</script>
 
-<h2>DatePicker</h2>
+<h2>DatePicker & DateRangePicker</h2>
 
 
 <div class="demo-with-code">
diff --git a/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DatePicker.cshtml.cs b/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DatePicker.cshtml.cs
index 78b5afa2b0..c16bb876f4 100644
--- a/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DatePicker.cshtml.cs
+++ b/modules/basic-theme/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DatePicker.cshtml.cs
@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.ComponentModel;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.RazorPages;
 using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form.DatePicker;
@@ -10,6 +11,7 @@ public class DatePickerModel : PageModel
 {
     
     [BindProperty]
+    [DisplayName("Start Date - End Date")]
     public DateTime StartDate { get; set; }
     [BindProperty]
     public DateTime EndDate { get; set; }
@@ -18,45 +20,54 @@ public class DatePickerModel : PageModel
     public DateTime DateTime { get; set; }
     
     [BindProperty]
+    [DisplayName("Nullable Start Date - Nullable End Date")]
     public DateTime? NullableStartDate { get; set; }
     
     [BindProperty]
     public DateTime? NullableEndDate { get; set; }
     
     [BindProperty]
+    [DisplayName("Nullable DateTime")]
     public DateTime? NullableDateTime { get; set; }
     
     [BindProperty]
+    [DisplayName("Start DateTime Offset - End DateTime Offset")]
     public DateTimeOffset StartDateTimeOffset { get; set; }
     
     [BindProperty]
     public DateTimeOffset EndDateTimeOffset { get; set; }
     
     [BindProperty]
+    [DisplayName("DateTime DateTime Offset")]
     public DateTimeOffset DateTimeDateTimeOffset { get; set; }
     
     [BindProperty]
+    [DisplayName("Nullable Start DateTime Offset - Nullable End DateTime Offset")]
     public DateTimeOffset? NullableStartDateTimeOffset { get; set; }
     
     [BindProperty]
     public DateTimeOffset? NullableEndDateTimeOffset { get; set; }
     
     [BindProperty]
+    [DisplayName("Nullable DateTime DateTime Offset")]
     public DateTimeOffset? NullableDateTimeDateTimeOffset { get; set; }
     
     [BindProperty]
+    [DisplayName("String Start Date - String End Date")]
     public string StringStartDate { get; set; }
     
     [BindProperty]
     public string StringEndDate { get; set; }
     
     [BindProperty]
+    [DisplayName("String Date")]
     public string StringDate { get; set; }
 
     public class DynamicForm
     {
         [BindProperty]
         [DateRangePicker("MyPicker",true)]
+        [DisplayName("Start Date - End Date")]
         public DateTime StartDate { get; set; }
         
         [BindProperty]
@@ -71,6 +82,7 @@ public class DatePickerModel : PageModel
         [BindProperty]
         [DatePickerOptions(nameof(DatePickerOptions))]
         [DateRangePicker("MyPicker2",true)]
+        [DisplayName("Nullable Start Date - Nullable End Date")]
         public DateTime? NullableStartDate { get; set; }
         [BindProperty]
         [DateRangePicker("MyPicker2")]
@@ -78,11 +90,13 @@ public class DatePickerModel : PageModel
         
         [BindProperty]
         [DatePickerOptions(nameof(DatePickerOptions))]
+        [DisplayName("Nullable DateTime")]
         public DateTime? NullableDateTime { get; set; }
         
         [BindProperty]
         [DatePickerOptions(nameof(DatePickerOptions))]
         [DateRangePicker("MyPicker3",true)]
+        [DisplayName("Start DateTime Offset - End DateTime Offset")]
         public DateTimeOffset StartDateTimeOffset { get; set; }
         
         [BindProperty]
@@ -92,11 +106,13 @@ public class DatePickerModel : PageModel
         
         [BindProperty]
         [DatePickerOptions(nameof(DatePickerOptions))]
+        [DisplayName("DateTime DateTime Offset")]
         public DateTimeOffset DateTimeDateTimeOffset { get; set; }
         
         [BindProperty]
         [DatePickerOptions(nameof(DatePickerOptions))]
         [DateRangePicker("MyPicker4",true)]
+        [DisplayName("Nullable Start DateTime Offset - Nullable End DateTime Offset")]
         public DateTimeOffset? NullableStartDateTimeOffset { get; set; }
         
         [BindProperty]
@@ -106,11 +122,13 @@ public class DatePickerModel : PageModel
         
         [BindProperty]
         [DatePickerOptions(nameof(DatePickerOptions))]
+        [DisplayName("Nullable DateTime DateTime Offset")]
         public DateTimeOffset? NullableDateTimeDateTimeOffset { get; set; }
         
         [BindProperty]
         [DatePickerOptions(nameof(DatePickerOptions))]
         [DateRangePicker("MyPicker5",true)]
+        [DisplayName("String Start Date - String End Date")]
         public string StringStartDate { get; set; }
         
         [BindProperty]
@@ -121,6 +139,7 @@ public class DatePickerModel : PageModel
         [BindProperty]
         [DatePickerOptions(nameof(DatePickerOptions))]
         [DatePicker]
+        [DisplayName("String Date")]
         public string StringDate { get; set; }
     }