diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor index d515b753b46..2f92e5742a4 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor @@ -5,7 +5,7 @@

@Localizer["Description"]

- diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index 1eb7e4c700e..a11bab70aa0 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@  - 9.9.3 + 9.10.0-beta01 diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor index 4c373fdc0a1..8db866aa238 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor +++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor @@ -40,7 +40,7 @@
@YearString @MonthString - @if (IsDateTimeMode) + @if (IsDateTimeMode && PickTimeMode == PickTimeMode.Clock) { @CurrentTime.ToString(TimeFormat) } @@ -80,12 +80,12 @@ else if (IsDisabled(day)) { - @if(ShowLunar) + @if (ShowLunar) { @text @GetLunarText(day) } - else if(DayDisabledTemplate != null) + else if (DayDisabledTemplate != null) { @DayDisabledTemplate(day) } @@ -155,7 +155,8 @@ @ChildContent - @@ -164,6 +165,18 @@
+ @if (IsDateTimeMode && PickTimeMode == PickTimeMode.Dropdown) + { +
+ @TimePlaceHolder + + +
+ } @if (ShowFooter) {
diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs index 27a4b85a114..9f1238d5018 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs +++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs @@ -45,10 +45,7 @@ private DateTime StartDate /// private DateTime SelectValue { get; set; } - /// - /// 获得/设置 是否显示时刻选择框 - /// - 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; + /// + /// 获得/设置 选择时间方式 默认使用 + /// + [Parameter] + public PickTimeMode PickTimeMode { get; set; } = PickTimeMode.Dropdown; + [Inject] [NotNull] private ICalendarFestivals? CalendarFestivals { get; set; } @@ -594,6 +597,7 @@ private async Task OnValueChanged() /// private async Task OnClickPrevYear() { + _showTimePicker = false; CurrentDate = CurrentViewMode == DatePickerViewMode.Year ? GetSafeYearDateTime(CurrentDate, -20) : GetSafeYearDateTime(CurrentDate, -1); @@ -613,6 +617,7 @@ private async Task OnClickPrevYear() /// private async Task OnClickPrevMonth() { + _showTimePicker = false; CurrentDate = CurrentDate.GetSafeMonthDateTime(-1); _render = false; @@ -630,6 +635,7 @@ private async Task OnClickPrevMonth() /// private async Task OnClickNextYear() { + _showTimePicker = false; CurrentDate = CurrentViewMode == DatePickerViewMode.Year ? GetSafeYearDateTime(CurrentDate, 20) : GetSafeYearDateTime(CurrentDate, 1); @@ -649,6 +655,7 @@ private async Task OnClickNextYear() /// 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); /// @@ -702,6 +738,7 @@ private async Task OnTimeChanged(TimeSpan time) /// 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(); } diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss index 5e7c7235b51..a5aa64fc7d5 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss +++ b/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; diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor index 8391db6a7a2..32af2f35364 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor @@ -8,7 +8,9 @@ }
- + @if (ShowIcon) { @@ -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 diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs index 6c33c822087..9c12354d9bd 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs @@ -118,6 +118,12 @@ public string? Format [Parameter] public DatePickerViewMode ViewMode { get; set; } = DatePickerViewMode.Date; + /// + /// 获得/设置 选择时间方式 默认使用 + /// + [Parameter] + public PickTimeMode PickTimeMode { get; set; } = PickTimeMode.Dropdown; + /// /// 获得/设置 是否显示快捷侧边栏 默认不显示 /// diff --git a/src/BootstrapBlazor/Components/DateTimePicker/PickTimeMode.cs b/src/BootstrapBlazor/Components/DateTimePicker/PickTimeMode.cs new file mode 100644 index 00000000000..71cffe69f79 --- /dev/null +++ b/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(argo@live.ca) Website: https://www.blazor.zone + +namespace BootstrapBlazor.Components; + +/// +/// 组件选择时间方式枚举 +/// +public enum PickTimeMode +{ + /// + /// 使用 Dropdown 下拉方式选择时间 + /// + Dropdown, + + /// + /// 使用 Clock 拖拽指针方式选择时间 + /// + Clock +} diff --git a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs index 7a3e6ed4d4f..70e320f5ff6 100644 --- a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs +++ b/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 diff --git a/src/BootstrapBlazor/Components/TimePicker/TimePicker.razor b/src/BootstrapBlazor/Components/TimePicker/TimePicker.razor index 03b10d32123..6809009689a 100644 --- a/src/BootstrapBlazor/Components/TimePicker/TimePicker.razor +++ b/src/BootstrapBlazor/Components/TimePicker/TimePicker.razor @@ -15,7 +15,3 @@
- -@code { - -} diff --git a/test/UnitTest/Components/DateTimePickerTest.cs b/test/UnitTest/Components/DateTimePickerTest.cs index 8cb7b56ba3f..1cd102d62d8 100644 --- a/test/UnitTest/Components/DateTimePickerTest.cs +++ b/test/UnitTest/Components/DateTimePickerTest.cs @@ -322,6 +322,7 @@ public void SwitchTimeView_Ok() { builder.Add(a => a.Value, new DateTime(2023, 10, 1, 1, 0, 0)); builder.Add(a => a.ViewMode, DatePickerViewMode.DateTime); + builder.Add(a => a.PickTimeMode, PickTimeMode.Clock); }); var labels = cut.FindAll(".picker-panel-header-label"); @@ -354,6 +355,39 @@ public void NotDateTime_Error() Context.RenderComponent>(); }); } + + [Fact] + public async Task PickTimeMode_Ok() + { + var cut = Context.RenderComponent(builder => + { + builder.Add(a => a.ViewMode, DatePickerViewMode.DateTime); + builder.Add(a => a.PickTimeMode, PickTimeMode.Dropdown); + builder.Add(a => a.ShowFooter, true); + builder.Add(a => a.Value, DateTime.Today.AddDays(-1)); + builder.Add(a => a.TimeFormat, "hh\\:mm"); + }); + + cut.Contains("picker-panel-time"); + + // 点击时间选择器 + var input = cut.Find(".picker-panel-time .form-control"); + await cut.InvokeAsync(() => input.Click()); + cut.Contains("picker-panel-time show"); + + // 点击时间选择器下拉框中的确定按钮 + var picker = cut.FindComponent(); + await cut.InvokeAsync(() => picker.Instance.OnClose!()); + + var ts = DateTime.Now.TimeOfDay; + await cut.InvokeAsync(() => picker.Instance.OnConfirm!(ts)); + Assert.Contains(ts.ToString("hh\\:mm"), cut.Markup); + + cut.SetParametersAndRender(pb => + { + pb.Add(a => a.TimeFormat, null); + }); + } #endregion #region DatePicker