feat(DateTimeRange): add ShowSelectedValue parameter (#5800)

* refactor: 使用模式语法

* refactor: 精简代码

* refactor: 代码规范

* doc: 增加24节气变量开关多语言

* feat: 增加 OnDateClick 回调方法

* doc: 增加节气开关

* doc: 增加 OnDateClick 回调方法文档

* feat: 增加 ShowSelectedValue 参数

* doc: 更新示例

* doc: 增加 ShowSelectedValue 说明

* test: 更新单元测试

Author: ArgoZhang

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

@@ -13,9 +13,33 @@
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["BindValueTitle"]" Introduction="@Localizer["BindValueIntro"]" Name="BindValue">
+    <section ignore>
+        <GroupBox Title="@Localizer["Feature"]">
+            <div class="row g-3 form-inline text-end">
+                <div class="col-12 col-sm-3">
+                    <Switch DisplayText="@Localizer["FeatureShowLunar"]" ShowLabel="true" @bind-Value="_showLunar" />
+                </div>
+                <div class="col-12 col-sm-3">
+                    <Switch DisplayText="@Localizer["FeatureShowSolarTerm"]" ShowLabel="true" @bind-Value="_showSolarTerm" />
+                </div>
+                <div class="col-12 col-sm-3">
+                    <Switch DisplayText="@Localizer["FeatureShowFestivals"]" ShowLabel="true" @bind-Value="_showFestivals" />
+                </div>
+                <div class="col-12 col-sm-3">
+                    <Switch DisplayText="@Localizer["FeatureShowHolidays"]" ShowLabel="true" @bind-Value="_showHolidays" />
+                </div>
+            </div>
+        </GroupBox>
+        <div class="mt-3">
+            <Pre>builder.Services.AddBootstrapHolidayService();</Pre>
+        </div>
+    </section>
     <div class="row g-3">
         <div class="col-12 col-sm-6">
-            <DateTimeRange @bind-Value="@BindValueDemoDateTimeRangeValue" OnValueChanged="v => BindValueDemoOnValueChanged(v, 1)" ShowLunar="_showLunar" ShowSolarTerm="_showSolarTerm" ShowFestivals="_showFestivals" ShowHolidays="_showHolidays"></DateTimeRange>
+            <DateTimeRange @bind-Value="@BindValueDemoDateTimeRangeValue" OnValueChanged="v => BindValueDemoOnValueChanged(v, 1)"
+                           ShowLunar="_showLunar" ShowSolarTerm="_showSolarTerm"
+                           ShowFestivals="_showFestivals" ShowHolidays="_showHolidays"
+                           ShowSelectedValue="true"></DateTimeRange>
         </div>
         <div class="col-12 col-sm-6">
             <BootstrapInputGroup>
@@ -56,7 +80,7 @@
 
 <DemoBlock Title="@Localizer["SidebarTitle"]" Introduction="@Localizer["SidebarIntro"]" Name="Sidebar">
     <section ignore class="mb-3">@((MarkupString)Localizer["SidebarTip"].Value)</section>
-    <DateTimeRange Value="@SidebarDateTimeRangeValue" ShowSidebar="true" />
+    <DateTimeRange Value="@SidebarDateTimeRangeValue" ShowSidebar="true"></DateTimeRange>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TodayTitle"]" Introduction="@Localizer["TodayIntro"]" Name="Today">
@@ -81,7 +105,7 @@
                 <DateTimeRange @bind-Value="@ValidateFormModel.Range" />
             </div>
             <div class="col-12">
-                <Button ButtonType="ButtonType.Submit" Icon="fa-fw fa-solid fa-floppy-disk" Text="@Localizer["Submit"]" />
+                <Button ButtonType="ButtonType.Submit" Icon="fa-fw fa-solid fa-floppy-disk" Text="@Localizer["Submit"]"></Button>
             </div>
         </div>
     </ValidateForm>

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

@@ -100,6 +100,8 @@ private Task MaxMinOnValueChanged(DateTimeRangeValue val, int index)
     /// </summary>
     protected override void OnInitialized()
     {
+        base.OnInitialized();
+
         ValidateFormModel = new ValidateFormRangeFoo()
         {
             DateTime = DateTime.Now,
@@ -148,6 +150,12 @@ private static List<EventItem> GetEvents() =>
             Name = "OnValueChanged",
             Description="ValueChanged callback delegate",
             Type ="Func<DateTimeRangeValue,Task>"
+        },
+        new()
+        {
+            Name = "OnDateClick",
+            Description="Date cell click event callback",
+            Type ="Func<DateTime,Task>"
         }
     ];
 
@@ -174,6 +182,14 @@ private static List<AttributeItem> GetAttributes() =>
             DefaultValue = "false"
         },
         new()
+        {
+            Name = nameof(DateTimeRange.ShowSelectedValue),
+            Description = "Whether to show the selected value",
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new()
         {
             Name = "ShowToday",
             Description = "Whether to show today shortcut button",

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

@@ -4007,7 +4007,12 @@
     "Submit": "Submit",
     "Limit": "time limit",
     "ViewModeTitle": "ViewMode",
-    "ViewModeIntro": "By setting <code>ViewMode=\"DatePickerViewMode.Year\"</code>, the component view is the year view, and by setting <code>ViewMode=\"DatePickerViewMode.Month\"</code>, the component view is the year view."
+    "ViewModeIntro": "By setting <code>ViewMode=\"DatePickerViewMode.Year\"</code>, the component view is the year view, and by setting <code>ViewMode=\"DatePickerViewMode.Month\"</code>, the component view is the year view.",
+    "Feature": "Feature",
+    "FeatureShowLunar": "Lunar",
+    "FeatureShowSolarTerm": "Solar Term",
+    "FeatureShowFestivals": "Festivals",
+    "FeatureShowHolidays": "Holidays"
   },
   "BootstrapBlazor.Server.Components.Samples.Ips": {
     "IpNormalTitle": "Basic usage",

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

@@ -4007,7 +4007,12 @@
     "Submit": "提交",
     "Limit": "时间范围",
     "ViewModeTitle": "显示模式",
-    "ViewModeIntro": "通过设置 <code>ViewMode=\"DatePickerViewMode.Year\"</code> 使组件视图为年视图，设置 <code>ViewMode=\"DatePickerViewMode.Month\"</code> 使组件视图为年视图"
+    "ViewModeIntro": "通过设置 <code>ViewMode=\"DatePickerViewMode.Year\"</code> 使组件视图为年视图，设置 <code>ViewMode=\"DatePickerViewMode.Month\"</code> 使组件视图为年视图",
+    "Feature": "功能体验区",
+    "FeatureShowLunar": "显示农历",
+    "FeatureShowSolarTerm": "24 节气",
+    "FeatureShowFestivals": "节日",
+    "FeatureShowHolidays": "法定假日"
   },
   "BootstrapBlazor.Server.Components.Samples.Ips": {
     "IpNormalTitle": "基础用法",

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

@@ -5,7 +5,6 @@
 
 using Microsoft.Extensions.Localization;
 using System.Globalization;
-using System.Reflection;
 
 namespace BootstrapBlazor.Components;
 
@@ -102,6 +101,12 @@ private string? EndValueString
     [Parameter]
     public bool AutoCloseClickSideBar { get; set; }
 
+    /// <summary>
+    /// Gets or sets whether show the selected value. Default is false.
+    /// </summary>
+    [Parameter]
+    public bool ShowSelectedValue { get; set; }
+
     /// <summary>
     /// 获得/设置 清空按钮文字
     /// </summary>
@@ -252,6 +257,12 @@ public bool AllowNull
     [Parameter]
     public bool ShowHolidays { get; set; }
 
+    /// <summary>
+    /// Gets or sets the date value changed event callback.
+    /// </summary>
+    [Parameter]
+    public Func<DateTime, Task>? OnDateClick { get; set; }
+
     [Inject]
     [NotNull]
     private IStringLocalizer<DateTimeRange>? Localizer { get; set; }
@@ -344,7 +355,6 @@ private async Task OnClickSidebarItem(DateTimeRangeSidebarItem item)
 
         if (AutoCloseClickSideBar)
         {
-            await InvokeVoidAsync("hide", Id);
             await ClickConfirmButton();
         }
     }
@@ -450,7 +460,7 @@ private async Task ClickConfirmButton()
     /// 更新值方法
     /// </summary>
     /// <param name="d"></param>
-    private void UpdateValue(DateTime d)
+    private async Task UpdateValue(DateTime d)
     {
         if (SelectedValue.Start == DateTime.MinValue)
         {
@@ -477,7 +487,7 @@ private void UpdateValue(DateTime d)
             SelectedValue.End = DateTime.MinValue;
         }
 
-        if (ViewMode == DatePickerViewMode.Year || ViewMode == DatePickerViewMode.Month)
+        if (ViewMode is DatePickerViewMode.Year or DatePickerViewMode.Month)
         {
             if (SelectedValue.Start != DateTime.MinValue)
             {
@@ -488,6 +498,17 @@ private void UpdateValue(DateTime d)
                 EndValue = SelectedValue.End;
             }
         }
+
+        if (ShowSelectedValue)
+        {
+            Value.Start = SelectedValue.Start;
+            Value.End = SelectedValue.End;
+        }
+
+        if (OnDateClick != null)
+        {
+            await OnDateClick(d);
+        }
         StateHasChanged();
     }
 

test/UnitTest/Components/DateTimeRangeTest.cs

@@ -78,20 +78,40 @@ public void StarEqualEnd_Ok()
     [Fact]
     public async Task RangeValue_Ok()
     {
-        var cut = Context.RenderComponent<DateTimeRange>();
+        var val = DateTime.Today;
+        var cut = Context.RenderComponent<DateTimeRange>(pb =>
+        {
+            pb.Add(a => a.ShowSelectedValue, true);
+            pb.Add(a => a.OnDateClick, d =>
+            {
+                val = d;
+                return Task.CompletedTask;
+            });
+        });
         var cells = cut.FindAll(".date-table tbody span");
         var end = cells.First(i => i.TextContent == "7");
         await cut.InvokeAsync(() =>
         {
             end.Click();
         });
+        Assert.Equal(7, val.Day);
+        var inputs = cut.FindAll(".datetime-range-input");
+        var input = inputs[0];
+        var start = val;
+        Assert.Equal(start.ToString("yyyy-MM-dd"), input.GetAttribute("value"));
 
         cells = cut.FindAll(".date-table tbody span");
         var first = cells.First(i => i.TextContent == "1");
         await cut.InvokeAsync(() =>
         {
             first.Click();
         });
+        inputs = cut.FindAll(".datetime-range-input");
+        input = inputs[0];
+        Assert.Equal(val.ToString("yyyy-MM-dd"), input.GetAttribute("value"));
+
+        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];