diff --git a/src/BootstrapBlazor.Server/Components/Pages/GlobalOption.razor b/src/BootstrapBlazor.Server/Components/Pages/GlobalOption.razor
index 8d18fcab022..a4a2d41fb49 100644
--- a/src/BootstrapBlazor.Server/Components/Pages/GlobalOption.razor
+++ b/src/BootstrapBlazor.Server/Components/Pages/GlobalOption.razor
@@ -51,7 +51,7 @@
 
 <p class="code-label"><code>TableSettings</code> 表格全局统一配置</p>
 
-<ul class="demo-ul">
+<ul class="ul-demo">
     <li><code>CheckboxColumnWidth</code> 复选框列宽度</li>
     <li><code>DetailColumnWidth</code> 明细行 Row Header 宽度</li>
     <li><code>ShowCheckboxTextColumnWidth</code> 显示文字的复选框列宽度</li>
@@ -69,7 +69,7 @@
 
 <p>@((MarkupString)Localizer["DateTimeSettingsIntro"].Value)</p>
 
-<ul class="demo-ul">
+<ul class="ul-demo">
     <li>@((MarkupString)Localizer["DateTimeSettingsParseDateTimeCallback"].Value)</li>
     <li>@((MarkupString)Localizer["DateTimeSettingsParseDateTimeOffsetCallback"].Value)</li>
 </ul>
@@ -83,7 +83,7 @@
 <p class="code-label"><code>StepSettings</code> 步长全局统一配置各种数据类型的步长值</p>
 
 <p class="code-label"><code>ConnectionHubOptions</code> 步长全局统一配置各种数据类型的步长值</p>
-<ul class="demo-ul">
+<ul class="ul-demo">
     <li><code>Enable</code> 是否开启</li>
     <li><code>EnableIpLocator</code> 是否开启 IP 定位功能</li>
     <li><code>ExpirationScanFrequency</code> 过期扫描周期</li>
@@ -92,30 +92,30 @@
 </ul>
 
 <p class="code-label"><code>WebClientOptions</code> <code>WebClientService</code> 配置项</p>
-<ul class="demo-ul">
+<ul class="ul-demo">
     <li><code>EnableIpLocator</code> 是否开启 IP 定位功能</li>
 </ul>
 
 <p class="code-label"><code>IIpLocatorProvider</code> 服务内部使用</p>
-<ul class="demo-ul">
+<ul class="ul-demo">
     <li><code>ProviderName</code> 定位器名称</li>
     <li><code>EnableCache</code> 是否开启缓存降低请求频率</li>
     <li><code>SlidingExpiration</code> 是否开启缓存降低请求频率</li>
 </ul>
 
 <p class="code-label"><code>ScrollOptions</code> 滚动条配置</p>
-<ul class="demo-ul">
+<ul class="ul-demo">
     <li><code>ScrollWidth</code> 滚动条宽度</li>
     <li><code>ScrollHoverWidth</code> 滚动条鼠标悬浮宽度</li>
 </ul>
 
 <p class="code-label"><code>ContextMenuOptions</code> 右键菜单配置</p>
-<ul class="demo-ul">
+<ul class="ul-demo">
     <li><code>OnTouchDelay</code> 移动端触控延时</li>
 </ul>
 
 <p class="code-label"><code>CacheManagerOptions</code> 缓存配置项</p>
-<ul class="demo-ul">
+<ul class="ul-demo">
     <li><code>Enable</code> 是否开启</li>
     <li><code>SlidingExpiration</code> 滑动缓存时长 默认 5 分钟</li>
     <li><code>AbsoluteExpiration</code> 绝对过期时长 默认 10 秒钟</li>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Anchors.razor b/src/BootstrapBlazor.Server/Components/Samples/Anchors.razor
index ff3eb3d3aae..060dc1cf513 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Anchors.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/Anchors.razor
@@ -7,7 +7,7 @@
 <DemoBlock Title="@Localizer["BaseUsageText"]" Introduction="@Localizer["IntroText1"]" Name="Normal">
     <div style="height: 400px; overflow: auto;">
         <p>@((MarkupString)Localizer["IntroText2"].Value)</p>
-        <ul class="demo-ul">
+        <ul class="ul-demo">
             <li>
                 <Anchor Target="anchor1" Offset="50">Anchor1</Anchor>
             </li>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor
index 04e6cbfce33..d7cc008a755 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor
@@ -5,16 +5,33 @@
 <h4>@Localizer["Description"]</h4>
 
 <DemoBlock Title="@Localizer["DateTimePickerTitle"]" Introduction="@Localizer["DateTimePickerIntro"]" Name="DateTimePicker">
-	<section ignore class="row g-3 mb-3">
-		<div class="col-12 col-sm-6">
-			<BootstrapInputGroup>
-				<BootstrapInputGroupLabel DisplayText="IsButton"></BootstrapInputGroupLabel>
-				<Switch @bind-Value="_isButton"></Switch>
-			</BootstrapInputGroup>
-		</div>
-	</section>
-	<DateTimePicker ViewMode="DatePickerViewMode.DateTime" TimeFormat="hh\:mm" IsButton="_isButton"
-					Value="@DateTimePickerValue" OnValueChanged="@TimePickerValueChanged">
+    <section ignore>
+        <p>@Localizer["DateTimePickerParameters"]</p>
+        <ul class="ul-demo">
+            <li>@((MarkupString)Localizer["DateTimePickerIsButtonIntro"].Value)</li>
+            <li>@((MarkupString)Localizer["DateTimePickerPickTimeModeIntro"].Value)</li>
+        </ul>
+        <div class="row g-3">
+		    <div class="col-12 col-sm-6">
+			    <BootstrapInputGroup>
+				    <BootstrapInputGroupLabel DisplayText="@Localizer["DateTimePickerIsButtonLabel"]"></BootstrapInputGroupLabel>
+				    <Switch @bind-Value="_isButton"></Switch>
+			    </BootstrapInputGroup>
+		    </div>
+            <div class="col-12 col-sm-6">
+                <BootstrapInputGroup>
+                    <BootstrapInputGroupLabel DisplayText="@Localizer["DateTimePickerPickTimeModeLabel"]"></BootstrapInputGroupLabel>
+                    <Segmented @bind-Value="_pickTimeMode">
+                        <SegmentedItem Text="@Localizer["DateTimePickerDropdownText"]" Value="PickTimeMode.Dropdown" />
+                        <SegmentedItem Text="@Localizer["DateTimePickerClockText"]" Value="PickTimeMode.Clock" />
+                    </Segmented>
+                </BootstrapInputGroup>
+            </div>
+        </div>
+    </section>
+	<DateTimePicker ViewMode="DatePickerViewMode.DateTime" TimeFormat="hh\:mm"
+					Value="@DateTimePickerValue" OnValueChanged="@TimePickerValueChanged"
+                    IsButton="_isButton" PickTimeMode="@_pickTimeMode">
 		<TimePickerSetting ShowClockScale="true" IsAutoSwitch="false" />
 	</DateTimePicker>
 	<ConsoleLogger @ref="TimePickerLogger" class="mt-3" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs
index d7b42dc91d2..be3fc89fdad 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs
+++ b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs
@@ -3,8 +3,6 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
 
-using System.Globalization;
-
 namespace BootstrapBlazor.Server.Components.Samples;
 
 /// <summary>
@@ -100,6 +98,7 @@ private string BindValueString
     private DateTime? _disabledNullValue = DateTime.Today;
     private DateTime _disabledValue = DateTime.Today;
     private bool _isButton = false;
+    private PickTimeMode _pickTimeMode = PickTimeMode.Clock;
 
     private async Task<List<DateTime>> OnGetDisabledDaysCallback(DateTime start, DateTime end)
     {
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 4e17d12a453..2412507590b 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -1727,7 +1727,14 @@
     "BlockGroupTitle": "InputGroup",
     "DateTimeOffsetIntro": "Select the control based on the date of the day in 「day」 as the base unit",
     "DateTimeOffsetTitle": "Click on the pop-up date box",
-    "DateTimePickerIntro": "Select the hour, minute, and second on the clock dial to obtain the current date and time.",
+    "DateTimePickerIntro": "Select the time using dropdowns or a clock dial to obtain the date and time.",
+    "DateTimePickerParameters": "Parameters:",
+    "DateTimePickerIsButtonIntro": "<code>IsButton</code> controls whether DateTimePicker is displayed as a button or an input field",
+    "DateTimePickerPickTimeModeIntro": "<code>PickTimeMode</code> controls whether the time picker uses dropdowns or a clock. In <code>Clock</code> mode, click a time value in the <b>Header</b> to switch to the clock dial, then drag to select the time. In <code>Dropdown</code> mode, select the time using dropdowns",
+    "DateTimePickerIsButtonLabel": "Button mode",
+    "DateTimePickerPickTimeModeLabel": "Time picker mode",
+    "DateTimePickerDropdownText": "Dropdown",
+    "DateTimePickerClockText": "Clock",
     "DateTimePickerTitle": "Select the time",
     "DayTemplateIntro": "By setting the <code>DayTemplate</code> custom display template, the disabled date template is <code>DayDisabledTemplate</code>",
     "DayTemplateTitle": "Custom date display",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index ffd743a2e45..f792eaf3d8f 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -1727,7 +1727,14 @@
     "BlockGroupTitle": "组合使用",
     "DateTimeOffsetIntro": "以「日」为基本单位，基础的日期选择控件，此示例绑定 <code>DateTimeOffset</code> 数据类型",
     "DateTimeOffsetTitle": "点击弹出日期框",
-    "DateTimePickerIntro": "通过时钟表盘选择时分秒，获取当前的日期和时间。",
+    "DateTimePickerIntro": "通过下拉框或时钟表盘选择时间，获取日期和时间。",
+    "DateTimePickerParameters": "参数说明：",
+    "DateTimePickerIsButtonIntro": "<code>IsButton</code> 控制 DateTimePicker 是以按钮形式还是输入框形式显示",
+    "DateTimePickerPickTimeModeIntro": "<code>PickTimeMode</code> 控制时间选择器是以下拉框还是时钟形式显示。<code>Clock</code> 模式下点击 <b>Header</b> 上的时间刻度切换到时钟表盘，通过鼠标拖动选择时间；<code>Dropdown</code> 模式下通过下拉框选择时间",
+    "DateTimePickerIsButtonLabel": "按钮形式",
+    "DateTimePickerPickTimeModeLabel": "时间选择模式",
+    "DateTimePickerDropdownText": "下拉框",
+    "DateTimePickerClockText": "时钟",
     "DateTimePickerTitle": "时间选择",
     "DayTemplateIntro": "通过设置 <code>DayTemplate</code> 自定义显示模板，禁用的日期模板为 <code>DayDisabledTemplate</code>",
     "DayTemplateTitle": "自定义日期显示",