feat(DateTimeRange): add AutoClose parameter (#5802)

* feat: 增加 AutoClose 参数

* doc: 更新文档

* test: 更新单元测试

* doc: 增加 AutoClose 说明文档

* chore: bump version 9.5.5

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/DateTimeRanges.razor

@@ -39,7 +39,7 @@
             <DateTimeRange @bind-Value="@BindValueDemoDateTimeRangeValue" OnValueChanged="v => BindValueDemoOnValueChanged(v, 1)"
                            ShowLunar="_showLunar" ShowSolarTerm="_showSolarTerm"
                            ShowFestivals="_showFestivals" ShowHolidays="_showHolidays"
-                           ShowSelectedValue="true"></DateTimeRange>
+                           ShowSelectedValue="true" AutoClose="true"></DateTimeRange>
         </div>
         <div class="col-12 col-sm-6">
             <BootstrapInputGroup>

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -3987,7 +3987,7 @@
     "NormalTitle": "Basic skills",
     "NormalIntro": "Take 'day' as the basic unit, select a period of time",
     "BindValueTitle": "Data two-way binding",
-    "BindValueIntro": "Click the confirm button, the time selection box value is the same as the text box value",
+    "BindValueIntro": "Click the confirm button, the time selection box value is the same as the text box value. Enable auto-close by setting <code>AutoClose=\"true\"</code>. Directly display the selected value by setting <code>ShowSelectedValue=\"true\"</code>",
     "MaxMinValueTitle": "Max and Min",
     "MaxMinValueIntro": "set time range",
     "DisabledTitle": "Disabled",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -3987,7 +3987,7 @@
     "NormalTitle": "基本功能",
     "NormalIntro": "以「日」为基本单位，选择一段时间",
     "BindValueTitle": "数据双向绑定",
-    "BindValueIntro": "点击确认按钮时间选择框值与文本框值一致",
+    "BindValueIntro": "点击确认按钮时间选择框值与文本框值一致，通过设置 <code>AutoClose=\"true\"</code> 实现自动关闭功能，通过设置 <code>ShowSelectedValue=\"true\"</code> 直接显示选中值",
     "MaxMinValueTitle": "最大值和最小值",
     "MaxMinValueIntro": "设置时间的取值范围",
     "DisabledTitle": "禁用",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.5.4</Version>
+    <Version>9.5.5</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs

@@ -101,6 +101,12 @@ private string? EndValueString
     [Parameter]
     public bool AutoCloseClickSideBar { get; set; }
 
+    /// <summary>
+    /// Gets or sets whether to automatically close the popup after a date range is selected. Default is false.
+    /// </summary>
+    [Parameter]
+    public bool AutoClose { get; set; }
+
     /// <summary>
     /// Gets or sets whether show the selected value. Default is false.
     /// </summary>
@@ -509,7 +515,15 @@ private async Task UpdateValue(DateTime d)
         {
             await OnDateClick(d);
         }
-        StateHasChanged();
+
+        if (AutoClose && SelectedValue.Start != DateTime.MinValue && SelectedValue.End != DateTime.MinValue)
+        {
+            await ClickConfirmButton();
+        }
+        else
+        {
+            StateHasChanged();
+        }
     }
 
     /// <summary>

test/UnitTest/Components/DateTimeRangeTest.cs

@@ -79,8 +79,15 @@ public void StarEqualEnd_Ok()
     public async Task RangeValue_Ok()
     {
         var val = DateTime.Today;
+        var confirmValue = new DateTimeRangeValue();
         var cut = Context.RenderComponent<DateTimeRange>(pb =>
         {
+            pb.Add(a => a.OnConfirm, v =>
+            {
+                confirmValue = v;
+                return Task.CompletedTask;
+            });
+            pb.Add(a => a.AutoClose, true);
             pb.Add(a => a.ShowSelectedValue, true);
             pb.Add(a => a.OnDateClick, d =>
             {
@@ -113,12 +120,9 @@ await cut.InvokeAsync(() =>
         input = inputs[1];
         Assert.Equal(start.ToString("yyyy-MM-dd"), input.GetAttribute("value"));
 
-        // confirm
-        var confirm = cut.FindAll(".is-confirm")[cut.FindAll(".is-confirm").Count - 1];
-        await cut.InvokeAsync(() =>
-        {
-            confirm.Click();
-        });
+        // 由于设置了 AutoClose 属性所以这里不需要点击确定按钮
+        Assert.Equal(val, confirmValue.Start);
+        Assert.Equal(start, confirmValue.End.Date);
 
         var value = cut.Instance.Value;
         var startDate = DateTime.Today.AddDays(1 - DateTime.Today.Day).AddMonths(-1);