diff --git a/src/BootstrapBlazor.Shared/Samples/DateTimePickers.razor b/src/BootstrapBlazor.Shared/Samples/DateTimePickers.razor
index 8bee2a2c7327f90067936204e8ec138753264511..ab80e29b70b334eb6d874f15800de20aee164477 100644
--- a/src/BootstrapBlazor.Shared/Samples/DateTimePickers.razor
+++ b/src/BootstrapBlazor.Shared/Samples/DateTimePickers.razor
@@ -50,7 +50,7 @@
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="Date">
-    <div class="row g-3">
+    <div class="row">
         <div class="col-sm-4">
             <DateTimePicker TValue="DateTime" Value="@DateTime.Today" />
         </div>
@@ -101,7 +101,7 @@
 <DemoBlock Title="@Localizer["Block9Title"]" Introduction="@Localizer["Block9Intro"]" Name="ShowLabel">
     <p>@((MarkupString)Localizer["P3"].Value)</p>
     <p>@((MarkupString)Localizer["P4"].Value)</p>
-    <div class="row g-3">
+    <div class="row">
         <div class="col-12">
             <DateTimePicker TValue="DateTime?" @bind-Value="@BindNullValue" DisplayText="@Localizer["DisplayText"]" ShowLabel="true" />
         </div>
@@ -120,7 +120,7 @@
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["Block11Title"]" Introduction="@Localizer["Block12Title"]" Name="ViewModel">
-    <div class="row g-3">
+    <div class="row">
         <div class="col-12">
             <DateTimePicker TValue="DateTime" ShowSidebar="true" ViewMode="DatePickerViewMode.DateTime" />
         </div>
@@ -128,7 +128,7 @@
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["Block12Title"]" Introduction="@Localizer["Block12Intro"]" Name="MinValue">
-    <div class="row g-3">
+    <div class="row">
         <div class="col-12">
             <DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" Value="@(DateTime.Today.AddDays(3 - DateTime.Today.Day))"
                             MinValue="@(DateTime.Today.AddDays(1 - DateTime.Today.Day))" MaxValue="@(DateTime.Today.AddDays(46 - DateTime.Today.Day))" />
@@ -137,7 +137,7 @@
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["BlockAutoCloseTitle"]" Introduction="@Localizer["BlockAutoCloseIntro"]" Name="AutoClose">
-    <div class="row g-3">
+    <div class="row">
         <div class="col-12">
             <DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" Value="@(DateTime.Today.AddDays(3 - DateTime.Today.Day))"
                             AutoClose="true" />
diff --git a/src/BootstrapBlazor.Shared/Samples/DateTimeRanges.razor b/src/BootstrapBlazor.Shared/Samples/DateTimeRanges.razor
index c778f06defaf99412c54aa14a2b051a99332ca1c..b289876c409241845012a61bd0dcdc1c54a713fb 100644
--- a/src/BootstrapBlazor.Shared/Samples/DateTimeRanges.razor
+++ b/src/BootstrapBlazor.Shared/Samples/DateTimeRanges.razor
@@ -75,6 +75,14 @@
     </ValidateForm>
 </DemoBlock>
 
+<DemoBlock Title="自动关闭" Introduction="点击侧边栏快捷方式自动关闭弹窗" Name="AutoClose">
+    <div class="row">
+        <div class="col-12 col-sm-6">
+            <DateTimeRange Value="@DateTimeRangeValue4" ShowSidebar="true" AutoCloseClickSideBar="true" />
+        </div>
+    </div>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />
 
 <EventTable Items="@GetEvents()" />
diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor
index e05b868d741181a5743a4b9c189c40d705c80434..3f4e145b248e26b2b1f8384dd88673442b95a16f 100644
--- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor
+++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor
@@ -1,7 +1,7 @@
 @namespace BootstrapBlazor.Components
 @inherits BootstrapComponentBase
 
-<div @attributes="@AdditionalAttributes" class="picker-panel">
+<div @attributes="@AdditionalAttributes" class="@ClassString">
     <div class="picker-panel-body-wrapper">
         @if (ShowSidebar)
         {
diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs
index 5d2baefc76fcb6c18183ce1da80b5276c9236f2d..fd005983411a112bf3595793f271be05658a4a47 100644
--- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs
+++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs
@@ -45,6 +45,10 @@ public sealed partial class DatePickerBody
     /// </summary>
     private bool ShowTimePicker { get; set; }
 
+    private string? ClassString => CssBuilder.Default("picker-panel")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
     /// <summary>
     /// 获得/设置 日期样式
     /// </summary>
@@ -205,12 +209,6 @@ public sealed partial class DatePickerBody
     [NotNull]
     public string? DatePlaceHolder { get; set; }
 
-    /// <summary>
-    /// 获得/设置 是否显示本组件默认为 false 不显示
-    /// </summary>
-    [Parameter]
-    public bool IsShown { get; set; }
-
     /// <summary>
     /// 获得/设置 是否允许为空 默认 false 不允许为空
     /// </summary>
diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerCell.razor b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerCell.razor
index 89be97d1459c552ea1059b3dc5e538ddec900d7e..8d01607d28de386bc81afa1bc192495cb9bc2759 100644
--- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerCell.razor
+++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerCell.razor
@@ -1,4 +1,4 @@
 @namespace BootstrapBlazor.Components
 @inherits BootstrapComponentBase
 
-<span @attributes="@AdditionalAttributes" class="cell" @onclick="e => OnClick(Value)">@Text</span>
+<span @attributes="@AdditionalAttributes" class="@ClassString" @onclick="e => OnClick(Value)">@Text</span>
diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerCell.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerCell.razor.cs
index ad0e6e7ffd36e206d1bb1725162c718d76689347..5a30fdfc2262f8265a9ff9883df62af3626a325d 100644
--- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerCell.razor.cs
+++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerCell.razor.cs
@@ -9,6 +9,10 @@ namespace BootstrapBlazor.Components;
 /// </summary>
 public sealed partial class DatePickerCell
 {
+    private string? ClassString => CssBuilder.Default("cell")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
     /// <summary>
     /// 获得/设置 日期
     /// </summary>
diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs
index 2915963cb6db832b4276f52dd9f231cd126bdb53..d8259f64c173bf42d309afe460c37d05c6798603 100644
--- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs
+++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs
@@ -131,7 +131,7 @@ public sealed partial class DateTimePicker<TValue>
     public Func<TValue, Task>? OnDateTimeChanged { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否点击确认关闭弹窗 默认 false
+    /// 获得/设置 是否点击日期后自动关闭弹窗 默认 false
     /// </summary>
     [Parameter]
     public bool AutoClose { get; set; }
diff --git a/src/BootstrapBlazor/Components/DateTimePicker/TimePickerBody.razor b/src/BootstrapBlazor/Components/DateTimePicker/TimePickerBody.razor
index 1e9a3255d5d7f0c2d496105aef3c501f064bc03c..ad8dde544ffc17b7030483b638116e32f4b0ec16 100644
--- a/src/BootstrapBlazor/Components/DateTimePicker/TimePickerBody.razor
+++ b/src/BootstrapBlazor/Components/DateTimePicker/TimePickerBody.razor
@@ -1,7 +1,7 @@
 @namespace BootstrapBlazor.Components
 @inherits BootstrapComponentBase
 
-<div @attributes="@AdditionalAttributes" class="@ClassName" @ref="TimePickerElement">
+<div @attributes="@AdditionalAttributes" class="@ClassString" @ref="TimePickerElement">
     <div class="time-panel-content has-seconds">
         <div class="time-spinner has-seconds">
             <TimePickerCell @bind-Value="@CurrentTime" ItemHeightCallback="@ItemHeightCallback" ViewMode="TimePickerCellViewMode.Hour" />
diff --git a/src/BootstrapBlazor/Components/DateTimePicker/TimePickerBody.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/TimePickerBody.razor.cs
index 53e36ff82bbc6b6ca2cd6dbb8c7da1b3c5580d27..4859cd933ddaec90cd608537c29c4b2b188986cb 100644
--- a/src/BootstrapBlazor/Components/DateTimePicker/TimePickerBody.razor.cs
+++ b/src/BootstrapBlazor/Components/DateTimePicker/TimePickerBody.razor.cs
@@ -24,7 +24,7 @@ public sealed partial class TimePickerBody
     /// <summary>
     /// 获得/设置 样式
     /// </summary>
-    private string? ClassName => CssBuilder.Default("time-panel")
+    private string? ClassString => CssBuilder.Default("time-panel")
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
diff --git a/src/BootstrapBlazor/Components/DateTimePicker/TimePickerCell.razor b/src/BootstrapBlazor/Components/DateTimePicker/TimePickerCell.razor
index a04b59a56724b2155e167272afe224f78aded2b0..7c8ef29b1a85689a867007af8ed47697813adc95 100644
--- a/src/BootstrapBlazor/Components/DateTimePicker/TimePickerCell.razor
+++ b/src/BootstrapBlazor/Components/DateTimePicker/TimePickerCell.razor
@@ -1,7 +1,7 @@
 @namespace BootstrapBlazor.Components
 @inherits BootstrapComponentBase
 
-<div @attributes="@AdditionalAttributes" class="time-spinner-wrapper is-arrow" @ref="@TimeCellElement">
+<div @attributes="@AdditionalAttributes" class="@ClassString" @ref="@TimeCellElement">
     <i class="time-spinner-arrow fa-solid fa-angle-up" @onclick="OnClickUp"></i>
     <i class="time-spinner-arrow fa-solid fa-angle-down" @onclick="OnClickDown"></i>
     <div class="time-spinner-list-wrapper">
diff --git a/src/BootstrapBlazor/Components/DateTimePicker/TimePickerCell.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/TimePickerCell.razor.cs
index 97bc2de56be418b5c200d5dff5224dd347fc1db9..acc8b324a109623f9ff1396f4d0afe56506476c0 100644
--- a/src/BootstrapBlazor/Components/DateTimePicker/TimePickerCell.razor.cs
+++ b/src/BootstrapBlazor/Components/DateTimePicker/TimePickerCell.razor.cs
@@ -11,6 +11,10 @@ public partial class TimePickerCell : IDisposable
 {
     private ElementReference TimeCellElement { get; set; }
 
+    private string? ClassString => CssBuilder.Default("time-spinner-wrapper is-arrow")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
     /// <summary>
     /// 获得 当前样式名称
     /// </summary>
diff --git a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs
index 0945e7979241dce1bd3e029fccf7a62f39d0003c..27d4ad409b7aa60a680f0b6d751dafa2acf08f23 100644
--- a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs
+++ b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs
@@ -61,6 +61,12 @@ public partial class DateTimeRange
     [NotNull]
     private string? DateFormat { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否点击快捷侧边栏自动关闭弹窗 默认 false
+    /// </summary>
+    [Parameter]
+    public bool AutoCloseClickSideBar { get; set; }
+
     /// <summary>
     /// 获得/设置 清空按钮文字
     /// </summary>
@@ -239,6 +245,11 @@ public partial class DateTimeRange
         StartValue = item.StartDateTime;
         EndValue = StartValue.AddMonths(1);
         await ClickConfirmButton();
+
+        if (AutoCloseClickSideBar)
+        {
+            await JSRuntime.InvokeVoidAsync(identifier: "bb.Popover.invoke", $"#{Id}", "hide");
+        }
     }
 
     /// <summary>
@@ -261,9 +272,9 @@ public partial class DateTimeRange
         {
             await ValueChanged.InvokeAsync(Value);
         }
-        if (IsNeedValidate && FieldIdentifier != null)
+        if (IsNeedValidate && EditContext != null && FieldIdentifier != null)
         {
-            EditContext?.NotifyFieldChanged(FieldIdentifier.Value);
+            EditContext.NotifyFieldChanged(FieldIdentifier.Value);
         }
     }
 
@@ -316,9 +327,9 @@ public partial class DateTimeRange
             await ValueChanged.InvokeAsync(Value);
         }
 
-        if (IsNeedValidate && FieldIdentifier != null)
+        if (IsNeedValidate && EditContext != null && FieldIdentifier != null)
         {
-            EditContext?.NotifyFieldChanged(FieldIdentifier.Value);
+            EditContext.NotifyFieldChanged(FieldIdentifier.Value);
         }
     }
 
diff --git a/test/UnitTest/Components/DateTimePickerTest.cs b/test/UnitTest/Components/DateTimePickerTest.cs
index ff9e9750e680827e7de59ab0732c6148f8b28278..d389a5f9afdbdf951fc1e37763209f54dcdbe4b7 100644
--- a/test/UnitTest/Components/DateTimePickerTest.cs
+++ b/test/UnitTest/Components/DateTimePickerTest.cs
@@ -335,20 +335,6 @@ public class DateTimePickerTest : BootstrapBlazorTestBase
         });
     }
 
-    [Fact]
-    public void IsShown_Ok()
-    {
-        var cut = Context.RenderComponent<DatePickerBody>(builder =>
-        {
-            builder.Add(a => a.Value, DateTime.Now);
-            builder.Add(a => a.IsShown, true);
-        });
-
-        var value = cut.Find(".picker-panel").ClassList.Contains("d-none");
-
-        Assert.False(value);
-    }
-
     [Fact]
     public void ShowFooter_Ok()
     {
diff --git a/test/UnitTest/Components/DateTimeRangeTest.cs b/test/UnitTest/Components/DateTimeRangeTest.cs
index c8c312a96aa0184cab44caae2d974079240aec4e..0563055a37cabef44618dde6f582f17d4d190ef4 100644
--- a/test/UnitTest/Components/DateTimeRangeTest.cs
+++ b/test/UnitTest/Components/DateTimeRangeTest.cs
@@ -67,18 +67,6 @@ public class DateTimeRangeTest : BootstrapBlazorTestBase
         cut.Contains($"data-bs-placement=\"{Placement.Top.ToDescriptionString()}\"");
     }
 
-    [Fact]
-    public void IsShown_Ok()
-    {
-        var cut = Context.RenderComponent<DateTimeRange>(builder =>
-        {
-            builder.Add(a => a.Value, new DateTimeRangeValue { Start = DateTime.Now, End = DateTime.Now.AddDays(30) });
-            builder.Add(a => a.IsShown, true);
-        });
-
-        Assert.Contains("d-none", cut.Markup);
-    }
-
     [Fact]
     public void AllowNull_Ok()
     {
@@ -115,14 +103,18 @@ public class DateTimeRangeTest : BootstrapBlazorTestBase
         {
             builder.Add(a => a.Value, new DateTimeRangeValue { Start = DateTime.Now, End = DateTime.Now.AddDays(30) });
             builder.Add(a => a.ShowSidebar, true);
+            builder.Add(a => a.AutoCloseClickSideBar, true);
             builder.Add(a => a.SidebarItems, new DateTimeRangeSidebarItem[]
             {
                     new DateTimeRangeSidebarItem(){ Text = "Test" }
             });
         });
 
-        var text = cut.Find(".picker-panel-sidebar").TextContent;
+        var item = cut.Find(".sidebar-item > div");
+        var text = item.TextContent;
         Assert.Equal("Test", text);
+
+        cut.InvokeAsync(() => item.Click());
     }
 
     [Fact]
@@ -268,6 +260,47 @@ public class DateTimeRangeTest : BootstrapBlazorTestBase
             validate = cut.Instance.Validate();
         });
         Assert.False(validate);
+
+        var range = cut.FindComponent<DateTimeRange>();
+        var clear = range.Find(".is-clear");
+        await cut.InvokeAsync(() => clear.Click());
+
+        range.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.IsDisabled, true);
+            pb.Add(a => a.AllowNull, true);
+        });
+        await cut.InvokeAsync(() => clear.Click());
+    }
+
+    [Fact]
+    public async Task InValidateForm_Confirm()
+    {
+        var foo = new Dummy
+        {
+            Value = new DateTimeRangeValue()
+        };
+        var cut = Context.RenderComponent<ValidateForm>(pb =>
+        {
+            pb.Add(a => a.ValidateAllProperties, true);
+            pb.Add(a => a.Model, foo);
+            pb.AddChildContent<DateTimeRange>(pb =>
+            {
+                pb.Add(a => a.AllowNull, false);
+                pb.Add(a => a.Value, foo.Value);
+                pb.Add(a => a.ValueExpression, Utility.GenerateValueExpression(foo, nameof(Dummy.Value), typeof(DateTimeRangeValue)));
+            });
+        });
+
+        var range = cut.FindComponent<DateTimeRange>();
+        var confirm = range.Find(".is-confirm");
+        await cut.InvokeAsync(() => confirm.Click());
+
+        range.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.IsDisabled, true);
+        });
+        await cut.InvokeAsync(() => confirm.Click());
     }
 
     [Fact]