feat(DateTimePicker): add PickTimeMode parameter

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/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 == DateTimePickerTimeMode.PickTimeByClock)
                             {
                                 <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 == DateTimePickerTimeMode.PickTimeByDropdown)
+    {
+        <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="DateTimePickerTimeMode.PickTimeByDropdown"/>
+    /// </summary>
+    [Parameter]
+    public DateTimePickerTimeMode PickTimeMode { get; set; } = DateTimePickerTimeMode.PickTimeByDropdown;
+
     [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,49 @@ private async Task OnTimeChanged(TimeSpan time)
         }
     }
 
+    private string? TimePickerClassString => CssBuilder.Default("picker-panel-time")
+        .AddClass("show", _showTimePicker)
+        .Build();
+
+    private bool _showTimePicker;
+
+    private async Task OnConfirmTime(TimeSpan time)
+    {
+        _showTimePicker = false;
+        CurrentTime = time;
+        if (ShouldConfirm)
+        {
+            await ClickConfirmButton();
+        }
+        else
+        {
+            StateHasChanged();
+        }
+    }
+
+    private Task OnCloseTime()
+    {
+        _showTimePicker = false;
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+
+    private void OnShowTimePicker()
+    {
+        _showTimePicker = true;
+        StateHasChanged();
+    }
+
+    private bool HasSeconds()
+    {
+        if (TimeFormat != null)
+        {
+            return TimeFormat.Contains('s');
+        }
+
+        return TimePickerOption.ShowSecond;
+    }
+
     private bool ShouldConfirm => !IsDateTimeMode && (AutoClose || ShowFooter == false);
 
     /// <summary>
@@ -702,6 +752,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 +771,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 +903,8 @@ private async Task ClickConfirmButton()
     private async Task ClickClearButton()
     {
         // 关闭 TimerPicker
-        ShowTimePicker = false;
+        _showClockPicker = false;
+        _showTimePicker = false;
 
         CurrentDate = DateTime.MinValue;
         CurrentTime = TimeSpan.Zero;
@@ -876,7 +929,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>

src/BootstrapBlazor/Components/DateTimePicker/DateTimePickerTimeMode.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 DateTimePickerTimeMode
+{
+    /// <summary>
+    /// 使用 Dropdown 下拉方式选择时间
+    /// </summary>
+    PickTimeByDropdown,
+
+    /// <summary>
+    /// 使用 Clock 拖拽指针方式选择时间
+    /// </summary>
+    PickTimeByClock
+}

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 {
-
-}