feat(TimePicker): add TimePicker component (#2109)

* add timepickerpanel component * 修改部分css名称 * update css * chore: 更新字典 * test: 更新单元测试 * update css config * update js * add js invoke method * add init value * add isam init value * chore: 更新字典 * refactor: 格式化代码 * refactor: 重构组件增加 TimePicker 组件 * refactor: 更新 Footer * refactor: 调整样式 * regactor: switch to am/pm method * refactor: switch to hour/min face * none... * refactor: 重构setTime方法 * refactor: 重构setTime方法 * refactor: 重构handleMove方法解决指针位置计算不正确的问题，添加data-bb-ishour属性，重构setTime方法获取当前为小时还是分钟，重构face-wrap样式，使其内部元素居中。 * refactor: 添加秒针 * refactor: 自动切换到下一个指针 * refactor: Object.freeze timeMode * refactor: fix bug * refactor: 初始化值的时候判断AM还是PM * refactor: 调整小时指针 * refactor: 调整其他指针 * refactor: 重构代码 * refactor: 更新上午下午按钮样式 * feat: 增加初始化指针逻辑 * refactor: 增加拖动时针逻辑 * refactor: 增加时间文字样式 * refactor: 增加 OnValueChanged 方法 * doc: 更新示例 * revert: 撤销 OnValueChanged 更改 * chore: 微调动画 * refactor: 更新 Value 赋值逻辑 * refactor: 小时赋值增加上午下午逻辑 * refactor: 增加表盘刻度动画 * refactor: 保护小时取值范围 * refactor: 样式变量化 * feat: 增加表盘刻度 * refactor: 修复下午 12 点显示不正确 * feat: 增加点击选中时刻功能 * feat: 支持移动端 * refactor: 增加分钟秒是否显示功能 * test: 增加 TimePicker 单元测试 * test: 增加参数单元测试 * test: 增加单元测试 * refactor: 精简代码 * chore: 增加热更新支持 * chore: 更新 Row 样式 * refactor: 集成 TimePickerPanel * chore: 更新样式 * doc: 更新示例 * refactor: 增加 IsAutoSwitch 参数 * chore: 更新样式 * feat: 增加赋值逻辑 * refactor: 增加 TimePickerSetting 组件用于设置参数 * doc: 增加 TimePickerSettings 配置 * chore: 更改样式名称 * feat: 增加视图切换逻辑 * refactor: 微调间隙防止溢出 * refactor: 增加鼠标悬浮样式 * refactor: 更新英文版单词长度 * refactor: 精简代码 * feat: 增加 Time 切换 Date 视图逻辑 * fix: 支持点击更新时间 * refactor: 清理代码 * feat: 增加点击日期选中当前时间逻辑 * refactor: 精简代码 * chore: 更新脚本 * refactor: 移除不使用的参数 * test: 更新单元测试 * test: 更新单元测试 * Revert "refactor: 移除不使用的参数" This reverts commit cfba1dc. * feat: 增加格式化参数 * refactor: 更新样式 * feat: 增加 ChildContent 参数 * refactor: 增加格式参数 * feat: 点击刻度增加设置时间逻辑 * fix: 修复点击 11 点变成下午问题 * fix: 增加 Key 修复时间不变问题 * feat: 增加 Value 双绑支持 * chore: 更新样式 * fix: 修复脚本无法更新 dom 问题 * fix: 修复更改时间时同步到组件值问题 * refactor: 减小间隙防止折行 * feat: 增加 Reset 方法 * refactor: 更改方法可见性 * refactor: 修复上下午切换报错问题 * refactor: 减小日期内边距大小，更新demo * refactor: demo增加初始值为now * feat: 更新样式调整不折行 * refactor: 优化代码 * doc: 更新注释文档 * refactor: 重构代码 * refactor: Range 组件 * chore: 更新打包文件 * feat: 更新样式支持侧边栏 * test: 更新单元测试 * refactor: 重构侧边栏自动关闭逻辑 * feat: 重构切换年月功能 * feat: 增加首次查询标志位 * chore: 更新样式 * refactor: 重构 Body 组件 * test: 增加 OnDateChanged 回调方法 * feat: 更新选择时间段逻辑 * test: 增加单元测试 * chore: 移除不使用的变量 * test: 增加单元测试 * test: 增加单元测试 * test: 增加单元测试 * test: 增加单元测试 * refactor: 占位符更改为属性 * refactor: 重构 PickerBody 组件 * refactor: 移除 OnClear 回调 * refactor: 增加重置逻辑 * doc: 更新示例 * refactor: 更新 DateTimePicker 逻辑 * chore: 更新框架 * chore: 更新打包文件 * refactor: Format 标记为过期使用 DateTimeFormat * refactor: 重构代码精简可为空逻辑 * fix: 修复数据类型判断逻辑 * refactor: 移除 AutoClose 客户端设置 * test: 更新单元测试 * refactor: 更新 AutoToDay 逻辑 * test: 更新单元测试 * refactor: 增加 ShowClearButton 参数 * test: 更新单元测试 * test: 更新单元测试 * refactor: 精简代码 * test: 更新单元测试 * chore: 更新资源文件 * feat: 增加 Clear 按钮回调方法 * refactor: 支持 AutoToday 逻辑 * test: 增加单元测试 * doc: 重构代码 * test: 更新单元测试 * test: 增加单元测试 * test: 增加单元测试 * feat: 增加 DisplayMinValueAsEmpty 参数 * test: 增加单元测试 * refactor: 重构代码 * refactor: 移除 Format 格式参数 * refactor: 增加关闭时间选择框代码 * refactor: 重构代码 * refactor: 精简 GetValue 逻辑 * refactor: 重构代码 * doc: 更新示例 * test: 更新单元测试 * test: 修复单元测试失败问题 * refactor: 调整单元测试 * doc: 更新示例文档 * chore: 更新样式 * refactor: 更正 Range 开始结束逻辑 * feat: 结束时间为 23:59:59 * refactor: 精简 dom 结构 * doc: 更新示例代码 * doc: 更新示例 * refactor: 精简选中时间范围逻辑 * refactor: 重构代码 * test: 更新单元测试 * test: 增加单元测试 * refactor: 重构代码 * test: 增加单元测试 * refactor: 移除未使用的 ref 引用值变量 * chore: 拆分样式文件 * chore: 重构样式表 * chore: 调整 dom 结构 * chore: 更新样式 * chore: 重构样式 * doc: 更新示例 * chore: 更新样式打包文件 * refactor: 精简样式 * chore: 更新格式 * chore: 调整文本框宽度 * refactor: 更新 DateTime 视图逻辑 * test: 更新单元测试 * refactor: 更改 AllowNull 参数为 ShowClearButton * refactor: ViewMode 稍后开放 * refactor: 更改 ViewMode 代码 * refactor: 更新组件 * refactor: 更新示例 * refactor: 更新组件 * refactor: 更改命名空间 * test: 移除命名空间 * feat: 增加扩展方法 * refactor: 移除命名空间 * refactor: 使用扩展方法 * fix: 修复 Today 月份一样问题 * test: 更新 DateTimePicker 单元测试 * test: 更新 Range 单元测试 * refactor: 微调样式 * doc: 更新示例 * refactor: 临时禁用 DateTime 模式 * test: 更新单元测试 * doc: 增加 TimerPicker 组件文档 * doc: 增加 ClockPicker 组件文档 * doc: 更新 TimePicker 映射文件 * refactor: 更新 TimePicer 组件 * refactor: 更新 OnConfirm 逻辑 * refactor: 更新 Timer 组件 * test: 更新单元测试 * test: 增加 TimePickerBody 单元测试 * test: 更新单元测试 * feat: TimePicker 增加双向绑定支持 * refactor: 增加 ClockPicker 组件 * test: 更新单元测试 * refactor: 更新时间选择器菜单 * doc: 更新 DateTimePicker 示例文档 * doc: 增加 TimePicker 示例代码 * doc: 增加秒示例代码 --------- Co-authored-by: Argo-AscioTech <argo@live.ca>
dotnetcore · Feb 20, 2024 · cbcb8ae · cbcb8ae
1 parent 8e32e16
commit cbcb8ae
Show file tree

Hide file tree

Showing 53 changed files with 2,488 additions and 713 deletions.
diff --git a/exclusion.dic b/exclusion.dic
@@ -9,6 +9,7 @@ colspan
 cors
 dest
 dissubmit
+dropup
 editform
 ellips
 fullscreen
@@ -32,6 +33,7 @@ teng
 thead
 tbody
 tfoot
+timepanel
 oninput
 onkeyup
 ontouchstart

diff --git a/src/BootstrapBlazor.Server/Components/Samples/ClockPickers.razor b/src/BootstrapBlazor.Server/Components/Samples/ClockPickers.razor
@@ -0,0 +1,7 @@
+@page "/clock-picker"
+
+<h3>@Localizer["Title"]</h3>
+
+<h4>@Localizer["Description"]</h4>
+
+
diff --git a/src/BootstrapBlazor.Server/Components/Samples/ClockPickers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/ClockPickers.razor.cs
@@ -0,0 +1,16 @@
+// Copyright (c) Argo Zhang (argo@163.com). 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.Server.Components.Samples;
+
+/// <summary>
+/// ClockPicker 组件示例代码
+/// </summary>
+public partial class ClockPickers
+{
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<ClockPickers>? Localizer { get; set; }
+
+}
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor
@@ -4,37 +4,19 @@
 
 <h4>@Localizer["Description"]</h4>
 
-<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
-    <DatePickerBody @bind-Value="Value" OnConfirm="@NormalOnConfirm" ShowFooter="false" />
-    <ConsoleLogger @ref="NormalLogger" />
-</DemoBlock>
-
-<DemoBlock Title="@Localizer["ValueChangedTitle"]" Introduction="@Localizer["ValueChangedIntro"]" Name="ValueChanged">
-    <TimePickerBody @bind-Value="@ValueChangedValue" OnConfirm="ValueChangedOnConfirm" />
-    <ConsoleLogger @ref="ValueChangedLogger" />
+<DemoBlock Title="@Localizer["DateTimePickerTitle"]"
+           Introduction="@Localizer["DateTimePickerIntro"]"
+           Name="DateTimePicker">
+    <DateTimePicker ViewMode="DatePickerViewMode.DateTime"
+                    Value="@DateTimePickerValue" OnValueChanged="@TimePickerValueChanged">
+        <TimePickerSetting ShowClockScale="true" IsAutoSwitch="false" />
+    </DateTimePicker>
+    <ConsoleLogger @ref="TimePickerLogger" class="mt-3" />
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["HasSecondsTitle"]" Introduction="@Localizer["HasSecondsIntro"]" Name="HasSeconds">
-    <TimePickerBody @bind-Value="@ValueChangedValue" OnConfirm="ValueChangedOnConfirm" HasSeconds="false" />
-</DemoBlock>
-
-<DemoBlock Title="@Localizer["TimeTitle"]" Introduction="@Localizer["TimeIntro"]" Name="Time">
-    <div class="row g-3">
-        <div class="col-12 col-sm-6">
-            <div class="d-flex flex-column">
-                <div class="mb-1"><code>TimeSpan</code></div>
-                <TimePickerBody @bind-Value="@SpanValue" />
-                <BootstrapInput Value="@SpanValue" Formatter="@FormatterSpanString" Readonly="true" style="width: 180px; margin-top: 0.5rem;" />
-            </div>
-        </div>
-        <div class="col-12 col-sm-6">
-            <div class="d-flex flex-column">
-                <div class="mb-1"><code>string</code></div>
-                <TimePickerBody @bind-Value="@TimeValue" />
-                <BootstrapInput Value="@TimeValue.ToString(@"hh\:mm\:ss")" Readonly="true" style="width: 180px; margin-top: 0.5rem;" />
-            </div>
-        </div>
-    </div>
+<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
+    <DatePickerBody @bind-Value="Value" OnConfirm="@NormalOnConfirm" ShowFooter="false" />
+    <ConsoleLogger @ref="NormalLogger" class="mt-3" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm">
@@ -44,20 +26,20 @@
                 <DateTimePicker @bind-Value="@ValidateFormValue" />
             </div>
             <div class="col-12 col-sm-auto align-self-end">
-                <Button ButtonType="ButtonType.Submit" Text="@Localizer["SubmitText"]" Icon="fa-solid fa-floppy-disk"></Button>
+                <Button ButtonType="ButtonType.Submit" Text="@Localizer["SubmitText"]" Icon="fa-solid fa-floppy-disk" />
             </div>
         </div>
     </ValidateForm>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["DateTimeOffsetTitle"]" Introduction="@Localizer["DateTimeOffsetIntro"]" Name="DateTimeOffset">
-    <DateTimePicker TValue="DateTimeOffset?" Value="DateTimeOffsetValue" />
-</DemoBlock>
-
 <DemoBlock Title="@Localizer["ShowIconTitle"]" Introduction="@Localizer["ShowIconIntro"]" Name="ShowIcon">
     <DateTimePicker TValue="DateTimeOffset?" ShowIcon="false" />
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["DateTimeOffsetTitle"]" Introduction="@Localizer["DateTimeOffsetIntro"]" Name="DateTimeOffset">
+    <DateTimePicker @bind-Value="DateTimeOffsetValue" />
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["BindValueTitle"]" Introduction="@Localizer["BindValueIntro"]" Name="BindValue">
     <div class="row g-3">
         <div class="col-sm-6">
@@ -73,16 +55,16 @@
     <p>@((MarkupString)Localizer["ViewModeTip"].Value)</p>
     <div class="row g-3">
         <div class="col-12 col-sm-6">
-            <DateTimePicker TValue="DateTime" ShowLabel="true" DisplayText="Year" ViewMode="DatePickerViewMode.Year" Format="yyyy" />
+            <DateTimePicker @bind-Value="YearValue" ShowLabel="true" DisplayText="Year" ViewMode="DatePickerViewMode.Year" DateFormat="yyyy" />
         </div>
         <div class="col-12 col-sm-6">
-            <DateTimePicker TValue="DateTime" ShowLabel="true" DisplayText="Month" ViewMode="DatePickerViewMode.Month" Format="yyyy-MM" />
+            <DateTimePicker @bind-Value="MonthValue" ShowLabel="true" DisplayText="Month" ViewMode="DatePickerViewMode.Month" DateFormat="yyyy-MM" />
         </div>
         <div class="col-12 col-sm-6">
-            <DateTimePicker TValue="DateTime" ShowLabel="true" DisplayText="Date" ViewMode="DatePickerViewMode.Date" Format="yyyy-MM-dd" />
+            <DateTimePicker @bind-Value="DateValue" ShowLabel="true" DisplayText="Date" ViewMode="DatePickerViewMode.Date" DateFormat="yyyy-MM-dd" />
         </div>
         <div class="col-12 col-sm-6">
-            <DateTimePicker TValue="DateTime" ShowLabel="true" DisplayText="DateTime" ViewMode="DatePickerViewMode.DateTime" Format="yyyy-MM-dd HH:mm:ss" />
+            <DateTimePicker @bind-Value="DateTimeValue" ShowLabel="true" DisplayText="DateTime" ViewMode="DatePickerViewMode.DateTime" DateTimeFormat="yyyy-MM-dd HH:mm:ss" />
         </div>
     </div>
 </DemoBlock>
@@ -100,15 +82,16 @@
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["ShowLabelTitle"]" Introduction="@Localizer["ShowLabelIntro"]" Name="ShowLabel">
-    <p>@((MarkupString)Localizer["ShowLabelTip1"].Value)</p>
-    <p>@((MarkupString)Localizer["ShowLabelTip2"].Value)</p>
+    <section ignore class="mb-3">
+        @((MarkupString)Localizer["ShowLabelTip"].Value)
+    </section>
     <DateTimePicker ShowLabel="true" DisplayText="@Localizer["DisplayText"]" @bind-Value="@ShowLabelValue" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["DisabledTitle"]" Introduction="@Localizer["DisabledIntro"]" Name="IsDisabled">
     <div class="row g-3">
         <div class="col-12 col-sm-6">
-            <DateTimePicker TValue="DateTime" IsDisabled="IsDisabled" />
+            <DateTimePicker IsDisabled="IsDisabled" Value="DateTime.Today" />
         </div>
         <div class="col-12 col-sm-6">
             <Switch @bind-Value="@IsDisabled" />
@@ -117,39 +100,40 @@
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["ShowSidebarTitle"]" Introduction="@Localizer["ShowSidebarIntro"]" Name="ShowSidebar">
-    <DateTimePicker TValue="DateTime" ShowSidebar="true" ViewMode="DatePickerViewMode.DateTime" />
+    <DateTimePicker ShowSidebar="true" @bind-Value="SidebarValue" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["MinValueTitle"]" Introduction="@Localizer["MinValueIntro"]" Name="MinValue">
-    <DateTimePicker TValue="DateTime"
-                    ViewMode="DatePickerViewMode.Date"
-                    Value="@(DateTime.Today.AddDays(3 - DateTime.Today.Day))"
+    <DateTimePicker @bind-Value="@AllowValue"
                     MinValue="@(DateTime.Today.AddDays(1 - DateTime.Today.Day))"
                     MaxValue="@(DateTime.Today.AddDays(46 - DateTime.Today.Day))" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["BlockAutoCloseTitle"]" Introduction="@Localizer["BlockAutoCloseIntro"]" Name="AutoClose">
-    <DateTimePicker AutoClose="false" TValue="DateTime" ViewMode="DatePickerViewMode.Date" Value="@(DateTime.Today.AddDays(3 - DateTime.Today.Day))" />
+    <section ignore class="mb-3">
+        @((MarkupString)Localizer["BlockAutoCloseDesc"].Value)
+    </section>
+    <DateTimePicker @bind-Value="@AutoCloseValue" AutoClose="false" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["BlockGroupTitle"]" Introduction="@Localizer["BlockGroupIntro"]" Name="Group">
     <div class="row g-3">
-        <div class="col-12 col-sm-6 col-md-4">
+        <div class="col-12 col-sm-6">
             <BootstrapInputGroup>
                 <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupLabel"]" />
-                <DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" />
+                <DateTimePicker TValue="DateTime" ShowIcon="false" />
             </BootstrapInputGroup>
         </div>
-        <div class="col-12 col-sm-6 col-md-4">
+        <div class="col-12 col-sm-6">
             <BootstrapInputGroup>
-                <DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" />
+                <DateTimePicker TValue="DateTime" />
                 <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" />
             </BootstrapInputGroup>
         </div>
-        <div class="col-12 col-sm-6 col-md-4">
+        <div class="col-12 col-sm-6">
             <BootstrapInputGroup>
                 <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupLabel"]" />
-                <DateTimePicker TValue="DateTime" ViewMode="DatePickerViewMode.Date" />
+                <DateTimePicker TValue="DateTime" ShowIcon="false" />
                 <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" />
             </BootstrapInputGroup>
         </div>

diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs
@@ -9,25 +9,26 @@ namespace BootstrapBlazor.Server.Components.Samples;
 /// </summary>
 public sealed partial class DateTimePickers
 {
-    [NotNull]
-    private ConsoleLogger? NormalLogger { get; set; }
+    private DateTime DateTimePickerValue { get; set; }
 
-    private DateTime Value { get; set; } = DateTime.Today;
+    [NotNull]
+    private ConsoleLogger? TimePickerLogger { get; set; }
 
-    private Task NormalOnConfirm()
+    private Task TimePickerValueChanged(DateTime dt)
     {
-        NormalLogger.Log($"Value: {Value:yyyy-MM-dd}");
+        TimePickerLogger.Log($"Value: {dt}");
         return Task.CompletedTask;
     }
 
     [NotNull]
-    private ConsoleLogger? ValueChangedLogger { get; set; }
+    private ConsoleLogger? NormalLogger { get; set; }
 
-    private TimeSpan ValueChangedValue { get; set; } = DateTime.Now - DateTime.Today;
+    private DateTime Value { get; set; } = DateTime.Today;
 
-    private void ValueChangedOnConfirm()
+    private Task NormalOnConfirm()
     {
-        ValueChangedLogger.Log($"Value: {ValueChangedValue:hh\\:mm\\:ss}");
+        NormalLogger.Log($"Value: {Value:yyyy-MM-dd}");
+        return Task.CompletedTask;
     }
 
     /// <summary>
@@ -42,6 +43,20 @@ private void ValueChangedOnConfirm()
 
     private TimeSpan SpanValue { get; set; } = DateTime.Now.Subtract(DateTime.Today);
 
+    private DateTime AutoCloseValue { get; set; } = DateTime.Today;
+
+    private DateTime AllowValue { get; set; } = DateTime.Today;
+
+    private DateTime SidebarValue { get; set; } = DateTime.Today;
+
+    private DateTime YearValue { get; set; } = DateTime.Today;
+
+    private DateTime MonthValue { get; set; } = DateTime.Today;
+
+    private DateTime DateValue { get; set; } = DateTime.Today;
+
+    private DateTime DateTimeValue { get; set; } = DateTime.Today;
+
     private static string FormatterSpanString(TimeSpan ts)
     {
         return ts.ToString("hh\\:mm\\:ss");

diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimeRanges.razor b/src/BootstrapBlazor.Server/Components/Samples/DateTimeRanges.razor
@@ -6,8 +6,8 @@
 <h4>@Localizer["Description"]</h4>
 
 <DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
-    <DateTimeRange @bind-Value="@NormalDateTimeRangeValue" OnConfirm="NormalOnConfirm" />
-    <ConsoleLogger @ref="NormalLogger" />
+    <DateTimeRange @bind-Value="@NormalDateTimeRangeValue" OnConfirm="OnNormalConfirm" ShowSidebar="true" ViewMode="DatePickerViewMode.DateTime" />
+    <ConsoleLogger @ref="NormalLogger" class="mt-3" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["BindValueTitle"]" Introduction="@Localizer["BindValueIntro"]" Name="BindValue">
@@ -53,17 +53,17 @@
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["SidebarTitle"]" Introduction="@Localizer["SidebarIntro"]" Name="Sidebar">
-    <p>@((MarkupString)Localizer["SidebarTip"].Value)</p>
+    <section ignore class="mb-3">@((MarkupString)Localizer["SidebarTip"].Value)</section>
     <DateTimeRange Value="@SidebarDateTimeRangeValue" ShowSidebar="true" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["TodayTitle"]" Introduction="@Localizer["TodayIntro"]" Name="Today">
-    <p>@((MarkupString)Localizer["TodayTip"].Value)</p>
+    <section ignore class="mb-3">@((MarkupString)Localizer["TodayTip"].Value)</section>
     <DateTimeRange Value="@TodayDateTimeRangeValue" ShowToday="true" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm">
-    <FormInlineSwitch @bind-Value="@ValidateFormRowType" class="mb-3" />
+    <FormInlineSwitch @bind-Value="@ValidateFormRowType" class="mb-2" />
 
     <ValidateForm Model="@ValidateFormModel">
         <div class="@ValidateFormClassString">

diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimeRanges.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/DateTimeRanges.razor.cs
@@ -14,7 +14,7 @@ public sealed partial class DateTimeRanges
 
     private DateTimeRangeValue NormalDateTimeRangeValue { get; set; } = new();
 
-    private Task NormalOnConfirm(DateTimeRangeValue value)
+    private Task OnNormalConfirm(DateTimeRangeValue value)
     {
         NormalLogger.Log($"选择的时间范围是: {value.Start:yyyy-MM-dd} - {value.End:yyyy-MM-dd}");
         return Task.CompletedTask;
@@ -119,7 +119,7 @@ private class ValidateFormRangeFoo : Foo
     /// 获得事件方法
     /// </summary>
     /// <returns></returns>
-    private static EventItem[] GetEvents() =>
+    private static List<EventItem> GetEvents() =>
     [
         new()
         {
@@ -145,7 +145,7 @@ private static EventItem[] GetEvents() =>
     /// Get property method
     /// </summary>
     /// <returns></returns>
-    private static AttributeItem[] GetAttributes() =>
+    private static List<AttributeItem> GetAttributes() =>
     [
         new()
         {

diff --git a/src/BootstrapBlazor.Server/Components/Samples/TimePickers.razor b/src/BootstrapBlazor.Server/Components/Samples/TimePickers.razor
@@ -0,0 +1,21 @@
+@page "/time-picker"
+
+<h3>@Localizer["Title"]</h3>
+
+<h4>@Localizer["Description"]</h4>
+
+<DemoBlock Title="@Localizer["OnConfirmTitle"]" Introduction="@Localizer["OnConfirmIntro"]" Name="OnConfirm">
+    <TimePickerBody Value="@Value" OnConfirm="OnConfirm" />
+    <ConsoleLogger @ref="Logger" class="mt-3" />
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["HasSecondsTitle"]" Introduction="@Localizer["HasSecondsIntro"]" Name="HasSeconds">
+    <div class="row">
+        <div class="col-12 col-sm-6">
+            <TimePickerBody @bind-Value="@SecondValue" HasSeconds="false" />
+        </div>
+        <div class="col-12 col-sm-6">
+            <Display Value="@SecondValue" FormatString="hh\:mm" />
+        </div>
+    </div>
+</DemoBlock>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/TimePickers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/TimePickers.razor.cs
@@ -0,0 +1,29 @@
+// Copyright (c) Argo Zhang (argo@163.com). 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.Server.Components.Samples;
+
+/// <summary>
+/// TimePicker 组件示例代码
+/// </summary>
+public partial class TimePickers
+{
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<TimePickers>? Localizer { get; set; }
+
+    [NotNull]
+    private ConsoleLogger? Logger { get; set; }
+
+    private TimeSpan Value { get; set; } = DateTime.Now - DateTime.Today;
+
+    private TimeSpan SecondValue { get; set; } = TimeSpan.FromMinutes(1.5);
+
+    private Task OnConfirm(TimeSpan ts)
+    {
+        Value = ts;
+        Logger.Log($"Value: {Value:hh\\:mm\\:ss}");
+        return Task.CompletedTask;
+    }
+}