feat(DateTimePicker): add PickTimeMode parameter (#6670)

* refactor: 代码格式化

* style: 微调日历数字字体大小

* doc: 代码格式化

* refactor: 结束时间精确到毫秒

* refactor: 代码格式化

* refactor: 私有属性改为变量

* feat: 增加时间选择器

* style: 调整间隙

* feat: 增加选择时间方式枚举参数

* refactor: 增加切换视图时关闭时间选择器逻辑

* feat: 增加秒针控制

* doc: 更新示例

* chore: bump version 9.10.0-beta01

* feat: 增加 PickTimeMode 参数

* test: 增加单元测试

Author: ArgoZhang

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

@@ -5,7 +5,7 @@
 <h4>@Localizer["Description"]</h4>
 
 <DemoBlock Title="@Localizer["DateTimePickerTitle"]" Introduction="@Localizer["DateTimePickerIntro"]" Name="DateTimePicker">
-    <DateTimePicker ViewMode="DatePickerViewMode.DateTime"
+    <DateTimePicker ViewMode="DatePickerViewMode.DateTime" TimeFormat="hh\:mm"
                     Value="@DateTimePickerValue" OnValueChanged="@TimePickerValueChanged">
         <TimePickerSetting ShowClockScale="true" IsAutoSwitch="false" />
     </DateTimePicker>

src/BootstrapBlazor/BootstrapBlazor.csproj

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

src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor

@@ -40,7 +40,7 @@
                         <div class="@HeaderLabelString">
                             <span role="button" class="picker-panel-header-label" @onclick="() => SwitchView(DatePickerViewMode.Year)">@YearString</span>
                             <span role="button" class="@CurrentMonthViewClassName" @onclick="() => SwitchView(DatePickerViewMode.Month)">@MonthString</span>
-                            @if (IsDateTimeMode)
+                            @if (IsDateTimeMode && PickTimeMode == PickTimeMode.Clock)
                             {
                                 <span role="button" class="picker-panel-header-label" @onclick="SwitchTimeView">@CurrentTime.ToString(TimeFormat)</span>
                             }
@@ -80,12 +80,12 @@
                                                 else if (IsDisabled(day))
                                                 {
                                                     <span class="cell">
-                                                        @if(ShowLunar)
+                                                        @if (ShowLunar)
                                                         {
                                                             <span>@text</span>
                                                             <span class="bb-picker-body-lunar-text">@GetLunarText(day)</span>
                                                         }
-                                                        else if(DayDisabledTemplate != null)
+                                                        else if (DayDisabledTemplate != null)
                                                         {
                                                             @DayDisabledTemplate(day)
                                                         }
@@ -155,7 +155,8 @@
                         @ChildContent
                     </CascadingValue>
                     <CascadingValue Value="this" IsFixed="true">
-                        <ClockPicker Value="CurrentTime" OnValueChanged="OnTimeChanged" @ref="TimePickerPanel" class="clock-panel-body"
+                        <ClockPicker @ref="TimePickerPanel" class="clock-panel-body"
+                                     Value="CurrentTime" OnValueChanged="OnTimeChanged" 
                                      ShowClockScale="TimePickerOption.ShowClockScale" IsAutoSwitch="TimePickerOption.IsAutoSwitch"
                                      ShowMinute="TimePickerOption.ShowMinute" ShowSecond="TimePickerOption.ShowSecond">
                         </ClockPicker>
@@ -164,6 +165,18 @@
             </div>
         </div>
     </div>
+    @if (IsDateTimeMode && PickTimeMode == PickTimeMode.Dropdown)
+    {
+        <div class="@TimePickerClassString">
+            <span>@TimePlaceHolder</span>
+            <input type="text" autocomplete="off" readonly class="form-control"
+                   value="@CurrentTime.ToString(TimeFormat)"
+                   @onclick="@OnShowTimePicker" />
+            <TimePicker Value="CurrentTime" HasSeconds="HasSeconds"
+                        ShowRequired="false" ShowLabel="false" SkipValidate="true"
+                        OnClose="OnCloseTime" OnConfirm="OnConfirmTime"></TimePicker>
+        </div>
+    }
     @if (ShowFooter)
     {
         <div class="picker-panel-footer">

src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs

@@ -45,10 +45,7 @@ private DateTime StartDate
     /// </summary>
     private DateTime SelectValue { get; set; }
 
-    /// <summary>
-    /// 获得/设置 是否显示时刻选择框
-    /// </summary>
-    private bool ShowTimePicker { get; set; }
+    private bool _showClockPicker;
 
     private string? ClassString => CssBuilder.Default("picker-panel")
         .AddClass("is-sidebar", ShowSidebar)
@@ -71,7 +68,7 @@ private DateTime StartDate
         .Build();
 
     private string? WrapperClassString => CssBuilder.Default("picker-panel-body-main-wrapper")
-        .AddClass("is-open", ShowTimePicker)
+        .AddClass("is-open", _showClockPicker)
         .Build();
 
     private bool IsDisabled(DateTime day) => day < MinValue || day > MaxValue || IsDisableDay(day);
@@ -394,6 +391,12 @@ public bool AllowNull
     [Parameter]
     public DayOfWeek FirstDayOfWeek { get; set; } = DayOfWeek.Sunday;
 
+    /// <summary>
+    /// 获得/设置 选择时间方式 默认使用 <see cref="PickTimeMode.Dropdown"/>
+    /// </summary>
+    [Parameter]
+    public PickTimeMode PickTimeMode { get; set; } = PickTimeMode.Dropdown;
+
     [Inject]
     [NotNull]
     private ICalendarFestivals? CalendarFestivals { get; set; }
@@ -594,6 +597,7 @@ private async Task OnValueChanged()
     /// </summary>
     private async Task OnClickPrevYear()
     {
+        _showTimePicker = false;
         CurrentDate = CurrentViewMode == DatePickerViewMode.Year
             ? GetSafeYearDateTime(CurrentDate, -20)
             : GetSafeYearDateTime(CurrentDate, -1);
@@ -613,6 +617,7 @@ private async Task OnClickPrevYear()
     /// </summary>
     private async Task OnClickPrevMonth()
     {
+        _showTimePicker = false;
         CurrentDate = CurrentDate.GetSafeMonthDateTime(-1);
 
         _render = false;
@@ -630,6 +635,7 @@ private async Task OnClickPrevMonth()
     /// </summary>
     private async Task OnClickNextYear()
     {
+        _showTimePicker = false;
         CurrentDate = CurrentViewMode == DatePickerViewMode.Year
             ? GetSafeYearDateTime(CurrentDate, 20)
             : GetSafeYearDateTime(CurrentDate, 1);
@@ -649,6 +655,7 @@ private async Task OnClickNextYear()
     /// </summary>
     private async Task OnClickNextMonth()
     {
+        _showTimePicker = false;
         CurrentDate = CurrentDate.GetSafeMonthDateTime(1);
 
         _render = false;
@@ -694,6 +701,35 @@ private async Task OnTimeChanged(TimeSpan time)
         }
     }
 
+    private string? TimePickerClassString => CssBuilder.Default("picker-panel-time")
+        .AddClass("show", _showTimePicker)
+        .Build();
+
+    private bool _showTimePicker;
+
+    private Task OnConfirmTime(TimeSpan time)
+    {
+        _showTimePicker = false;
+        CurrentTime = time;
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+
+    private Task OnCloseTime()
+    {
+        _showTimePicker = false;
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+
+    private void OnShowTimePicker()
+    {
+        _showTimePicker = true;
+        StateHasChanged();
+    }
+
+    private bool HasSeconds => TimeFormat.Contains('s');
+
     private bool ShouldConfirm => !IsDateTimeMode && (AutoClose || ShowFooter == false);
 
     /// <summary>
@@ -702,6 +738,7 @@ private async Task OnTimeChanged(TimeSpan time)
     /// <param name="view"></param>
     private async Task SwitchView(DatePickerViewMode view)
     {
+        _showTimePicker = false;
         if (AllowSwitchModes[ViewMode].Contains(view))
         {
             CurrentViewMode = view;
@@ -720,12 +757,13 @@ private async Task SwitchView(DatePickerViewMode view)
 
     private void SwitchTimeView()
     {
-        ShowTimePicker = true;
+        _showClockPicker = true;
     }
 
     internal void SwitchDateView()
     {
-        ShowTimePicker = false;
+        _showClockPicker = false;
+        _showTimePicker = false;
         StateHasChanged();
     }
 
@@ -851,7 +889,8 @@ private async Task ClickConfirmButton()
     private async Task ClickClearButton()
     {
         // 关闭 TimerPicker
-        ShowTimePicker = false;
+        _showClockPicker = false;
+        _showTimePicker = false;
 
         CurrentDate = DateTime.MinValue;
         CurrentTime = TimeSpan.Zero;
@@ -876,7 +915,8 @@ private async Task OnClickSidebarButton(DateTime d)
     private void ResetTimePickerPanel()
     {
         // 关闭 TimerPicker
-        ShowTimePicker = false;
+        _showClockPicker = false;
+        _showTimePicker = false;
 
         TimePickerPanel?.Reset();
     }

src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss

@@ -91,9 +91,12 @@
                 table {
                     table-layout: fixed;
                     width: 100%;
-                    font-size: 12px;
                     user-select: none;
 
+                    .date-table-row {
+                        font-size: 12px;
+                    }
+
                     td {
                         text-align: center;
 
@@ -319,6 +322,33 @@
     }
 }
 
+.picker-panel-time {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    padding: 4px 1rem;
+    border-top: var(--bs-border-width) solid var(--bs-border-color);
+    position: relative;
+
+    .form-control {
+        font-size: 14px;
+        width: 178px;
+        cursor: pointer;
+        padding: 3px 8px;
+        text-align: center;
+    }
+
+    .bb-time-picker {
+        position: absolute;
+        bottom: 2.5rem;
+        right: 1rem;
+    }
+
+    &:not(.show) .bb-time-picker {
+        display: none;
+    }
+}
+
 .picker-panel-footer {
     border-top: var(--bs-border-width) solid var(--bs-border-color);
     padding: 4px;

src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor

@@ -8,7 +8,9 @@
     <BootstrapLabel required="@Required" for="@Id" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
 <div @attributes="@AdditionalAttributes" tabindex="@TabIndexString" id="@Id" class="@ClassString" data-bb-dropdown=".picker-panel">
-    <input readonly="@ReadonlyString" class="@InputClassName" @bind="@CurrentValueAsString" placeholder="@PlaceholderString" disabled="@Disabled" data-bs-toggle="@Constants.DropdownToggleString" data-bs-placement="@PlacementString" data-bs-custom-class="@CustomClassString" @onblur="OnBlur" />
+    <input readonly="@ReadonlyString" class="@InputClassName" @bind="@CurrentValueAsString" placeholder="@PlaceholderString"
+           disabled="@Disabled" data-bs-toggle="@Constants.DropdownToggleString" data-bs-placement="@PlacementString"
+           data-bs-custom-class="@CustomClassString" @onblur="OnBlur" />
     @if (ShowIcon)
     {
         <i class="@DateTimePickerIconClassString"></i>
@@ -19,7 +21,7 @@
                     ShowLunar="ShowLunar" ShowSolarTerm="ShowSolarTerm" ShowFestivals="ShowFestivals" ShowHolidays="ShowHolidays"
                     OnConfirm="OnConfirm" OnClear="OnClear" MinValue="MinValue" MaxValue="MaxValue"
                     AutoClose="AutoClose" ViewMode="ViewMode" DayTemplate="DayTemplate!" DayDisabledTemplate="DayDisabledTemplate!"
-                    OnGetDisabledDaysCallback="OnGetDisabledDaysCallback!"
+                    PickTimeMode="PickTimeMode" OnGetDisabledDaysCallback="OnGetDisabledDaysCallback!"
                     EnableDisabledDaysCache="EnableDisabledDaysCache">
         @ChildContent
     </DatePickerBody>

src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs

@@ -118,6 +118,12 @@ public string? Format
     [Parameter]
     public DatePickerViewMode ViewMode { get; set; } = DatePickerViewMode.Date;
 
+    /// <summary>
+    /// 获得/设置 选择时间方式 默认使用 <see cref="PickTimeMode.Dropdown"/>
+    /// </summary>
+    [Parameter]
+    public PickTimeMode PickTimeMode { get; set; } = PickTimeMode.Dropdown;
+
     /// <summary>
     /// 获得/设置 是否显示快捷侧边栏 默认不显示
     /// </summary>

src/BootstrapBlazor/Components/DateTimePicker/PickTimeMode.cs

@@ -0,0 +1,22 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// <see cref="DateTimePicker{TValue}"/> 组件选择时间方式枚举
+/// </summary>
+public enum PickTimeMode
+{
+    /// <summary>
+    /// 使用 Dropdown 下拉方式选择时间
+    /// </summary>
+    Dropdown,
+
+    /// <summary>
+    /// 使用 Clock 拖拽指针方式选择时间
+    /// </summary>
+    Clock
+}

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

@@ -322,10 +322,10 @@ protected override void OnParametersSet()
 
         SidebarItems ??=
         [
-            new() { Text = Localizer["Last7Days"], StartDateTime = DateTime.Today.AddDays(-7), EndDateTime = DateTime.Today.AddDays(1).AddSeconds(-1) },
-            new() { Text = Localizer["Last30Days"], StartDateTime = DateTime.Today.AddDays(-30), EndDateTime = DateTime.Today.AddDays(1).AddSeconds(-1) },
-            new() { Text = Localizer["ThisMonth"], StartDateTime = DateTime.Today.AddDays(1 - DateTime.Today.Day), EndDateTime = DateTime.Today.AddDays(1 - DateTime.Today.Day).AddMonths(1).AddSeconds(-1) },
-            new() { Text = Localizer["LastMonth"], StartDateTime = DateTime.Today.AddDays(1- DateTime.Today.Day).AddMonths(-1), EndDateTime = DateTime.Today.AddDays(1- DateTime.Today.Day).AddSeconds(-1) },
+            new() { Text = Localizer["Last7Days"], StartDateTime = DateTime.Today.AddDays(-7), EndDateTime = DateTime.Today.AddDays(1).AddMilliseconds(-1) },
+            new() { Text = Localizer["Last30Days"], StartDateTime = DateTime.Today.AddDays(-30), EndDateTime = DateTime.Today.AddDays(1).AddMilliseconds(-1) },
+            new() { Text = Localizer["ThisMonth"], StartDateTime = DateTime.Today.AddDays(1 - DateTime.Today.Day), EndDateTime = DateTime.Today.AddDays(1 - DateTime.Today.Day).AddMonths(1).AddMilliseconds(-1) },
+            new() { Text = Localizer["LastMonth"], StartDateTime = DateTime.Today.AddDays(1- DateTime.Today.Day).AddMonths(-1), EndDateTime = DateTime.Today.AddDays(1- DateTime.Today.Day).AddMilliseconds(-1) },
         ];
 
         ResetBodyValue();
@@ -478,7 +478,7 @@ private async Task UpdateValue(DateTime d)
             // 结束时间为空
             if (d < SelectedValue.Start)
             {
-                SelectedValue.End = SelectedValue.Start;
+                SelectedValue.End = SelectedValue.Start.AddDays(1).AddMilliseconds(-1);
                 SelectedValue.Start = d;
             }
             else

src/BootstrapBlazor/Components/TimePicker/TimePicker.razor

@@ -15,7 +15,3 @@
         <button type="button" class="btn time-panel-btn confirm" @onclick="@OnClickConfirm">@ConfirmButtonText</button>
     </div>
 </div>
-
-@code {
-
-}