Skip to content

doc(DateTimePicker): update IsButton/PickTimeMode sample #8673

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ArgoZhang merged 2 commits into from
Nov 5, 2026
Merged

doc(DateTimePicker): update IsButton/PickTimeMode sample #8673

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
47dcf04
doc: 完善说明
ArgoZhang Nov 5, 2026
a397809
doc: 更新样式
ArgoZhang Nov 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions src/BootstrapBlazor.Server/Components/Pages/GlobalOption.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/BootstrapBlazor.Server/Components/Samples/Anchors.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
37 changes: 27 additions & 10 deletions src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

@sourcery-ai sourcery-ai Bot Nov 5, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Medium · Changing options discards pending date

When the user changes either sample option while a date/time selection is still unconfirmed, the control binding rerenders the picker, and DateTimePicker.OnParametersSet reloads SelectedValue from the unchanged external Value; DatePickerBody.OnParametersSet then resets its draft date and time from that value, so the user's unconfirmed selection is lost.

Preserve the picker draft when unrelated parameters change, or avoid rerendering/resetting the picker draft for these option updates.

Also at src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor:24.

Prompt for AI agents 
In `src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor` at line 19:

**Changing options discards pending date**

When the user changes either sample option while a date/time selection is still unconfirmed, the control binding rerenders the picker, and `DateTimePicker.OnParametersSet` reloads `SelectedValue` from the unchanged external `Value`; `DatePickerBody.OnParametersSet` then resets its draft date and time from that value, so the user's unconfirmed selection is lost.

Preserve the picker draft when unrelated parameters change, or avoid rerendering/resetting the picker draft for these option updates.

Also at `src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor:24`.

</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" />
Expand Down
3 changes: 1 addition & 2 deletions src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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)
{
Expand Down
9 changes: 8 additions & 1 deletion src/BootstrapBlazor.Server/Locales/en-US.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
9 changes: 8 additions & 1 deletion src/BootstrapBlazor.Server/Locales/zh-CN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": "自定义日期显示",
Expand Down
Loading