feat(DateTimeRange): add RenderMode parameter

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

@@ -64,6 +64,11 @@
     <DateTimeRange Value="@TodayDateTimeRangeValue" ShowToday="true" />
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["SingleViewTitle"]" Introduction="@Localizer["SingleViewTitle"]" Name="SingleView">
+    <section ignore class="mb-3">@((MarkupString)Localizer["SingleViewTitle"].Value)</section>
+    <DateTimeRange Value="@TodayDateTimeRangeValue" RenderMode="DatePickerRenderMode.Single" />
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm">
     <FormInlineSwitch @bind-Value="@ValidateFormRowType" class="mb-2" />
 

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

@@ -3819,8 +3819,10 @@
     "SidebarIntro": "When the <code>ShowSidebar</code> property value is set to <code>true</code>, the component displays the shortcut sidebar",
     "SidebarTip": "by setting <code>ShowSidebar</code> The parameter enables the display sidebar shortcut options function, by setting <code>SidebarItems</code> The parameter collection replaces the default shortcuts built into the component",
     "TodayTitle": "Show today button",
+    "SingleViewTitle": "Single view mode",
     "TodayIntro": "When the <code>ShowToday</code> attribute value is set to <code>true</code>, the today shortcut button is displayed below the component",
     "TodayTip": "Click <code>Today</code> Button，time limit <code>yyyy-MM-dd 00:00:00 to yyyy-MM-dd 23:59:59</code>",
+    "SingleViewTip": "<code>RenderMode = Single </code> allows you to see the date time range in one panel",
     "ValidateFormTitle": "Used in the form",
     "ValidateFormIntro": "Build components into <code>ValidateForm</code> used in",
     "AutoCloseTitle": "AutoClose",

src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor

@@ -38,8 +38,8 @@
                             </button>
                         }
                         <div class="d-flex align-items-center justify-content-center flex-fill">
-                            <DynamicElement TagName="span" role="button" class="picker-panel-header-label" TriggerClick="@(Ranger == null)" OnClick="() => SwitchView(DatePickerViewMode.Year)">@YearString</DynamicElement>
-                            <DynamicElement TagName="span" role="button" class="@CurrentMonthViewClassName" TriggerClick="@(Ranger == null)" OnClick="() => SwitchView(DatePickerViewMode.Month)">@MonthString</DynamicElement>
+                            <DynamicElement TagName="span" role="button" class="picker-panel-header-label" OnClick="() => SwitchView(DatePickerViewMode.Year)">@YearString</DynamicElement>
+                            <DynamicElement TagName="span" role="button" class="@CurrentMonthViewClassName" OnClick="() => SwitchView(DatePickerViewMode.Month)">@MonthString</DynamicElement>
                             @if (IsDateTimeMode)
                             {
                                 <span role="button" class="picker-panel-header-label" @onclick="SwitchTimeView">@CurrentTime.ToString(TimeFormat)</span>

src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor

@@ -36,15 +36,18 @@
                 <DatePickerBody Value="@StartValue" ValueChanged="UpdateValue" OnDateChanged="OnStartDateChanged"
                                 DateFormat="@DateFormat" TimeFormat="@TimeFormat" ViewMode="ViewMode"
                                 ShowLunar="ShowLunar" ShowSolarTerm="ShowSolarTerm" ShowFestivals="ShowFestivals" ShowHolidays="ShowHolidays"
-                                ShowRightButtons="false" MaxValue="MaxValue" MinValue="MinValue">
-                    @ChildContent
-                </DatePickerBody>
-                <DatePickerBody Value="@EndValue" ValueChanged="UpdateValue" OnDateChanged="OnEndDateChanged"
-                                DateFormat="@DateFormat" TimeFormat="@TimeFormat" ViewMode="ViewMode"
-                                ShowLunar="ShowLunar" ShowSolarTerm="ShowSolarTerm" ShowFestivals="ShowFestivals" ShowHolidays="ShowHolidays"
-                                ShowLeftButtons="false" MaxValue="MaxValue" MinValue="MinValue">
+                                ShowRightButtons="@_showRightButtons" MaxValue="MaxValue" MinValue="MinValue">
                     @ChildContent
                 </DatePickerBody>
+                @if (RenderMode == DatePickerRenderMode.Double)
+                {
+                    <DatePickerBody Value="@EndValue" ValueChanged="UpdateValue" OnDateChanged="OnEndDateChanged"
+                                    DateFormat="@DateFormat" TimeFormat="@TimeFormat" ViewMode="ViewMode"
+                                    ShowLunar="ShowLunar" ShowSolarTerm="ShowSolarTerm" ShowFestivals="ShowFestivals" ShowHolidays="ShowHolidays"
+                                    ShowLeftButtons="false" MaxValue="MaxValue" MinValue="MinValue">
+                        @ChildContent
+                    </DatePickerBody>
+                }
             </CascadingValue>
         </div>
         <div class="picker-panel-footer">

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

@@ -126,6 +126,12 @@ private string? EndValueString
     [Parameter]
     public DatePickerViewMode ViewMode { get; set; } = DatePickerViewMode.Date;
 
+    /// <summary>
+    /// 获得/设置 组件显示模式 默认为显示年月日模式
+    /// </summary>
+    [Parameter]
+    public DatePickerRenderMode RenderMode { get; set; } = DatePickerRenderMode.Double;
+
     /// <summary>
     /// 获得/设置 今天按钮文字
     /// </summary>
@@ -270,6 +276,8 @@ public bool AllowNull
         .AddClass("disabled", IsDisabled)
         .Build();
 
+    private bool _showRightButtons = false;
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -294,6 +302,8 @@ protected override void OnInitialized()
                 }
             }
         }
+
+        _showRightButtons = RenderMode == DatePickerRenderMode.Single;
     }
 
     /// <summary>

src/BootstrapBlazor/Enums/DatePickerRenderMode.cs

@@ -0,0 +1,20 @@
+// Copyright (c) Argo Zhang ([email protected]). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// DateTimePicker 组件视图显示模式
+/// </summary>
+public enum DatePickerRenderMode
+{
+    /// <summary>
+    /// Single Component Mode
+    /// </summary>
+    Single,
+    /// <summary>
+    /// Double Panel Mode
+    /// </summary>
+    Double
+}