Tony-ST0754 · Nov 1, 2026 · Nov 1, 2026 · Nov 1, 2026 · Nov 1, 2026 · Nov 2, 2026
diff --git a/AGENTS.md b/AGENTS.md
@@ -34,6 +34,7 @@
 
 - 所有用户可见文本必须使用 `IStringLocalizer`
 - 禁止硬编码中文/英文 UI 文本
+- 本地化文件使用 json 文件存储在 localization 文件夹与相应项目 Locales 目录下
 
 ---
 

diff --git a/localization/de.json b/localization/de.json
@@ -56,10 +56,7 @@
     "Months": "Jan,Feb,Mär,Apr,Mai,Jun,Jul,Aug,Sep,Okt,Nov,Dez",
     "MonthLists": "Jan,Feb,Mär,Apr,Mai,Jun,Jul,Aug,Sep,Okt,Nov,Dez",
     "WeekLists": "So,Mo,Di,Mi,Do,Fr,Sa",
-    "GenericTypeErrorMessage": "DateTimePicker unterstützt nur DateTime, DateTime?, DateTimeOffset, DateTimeOffset?",
-    "Today": "Heute",
-    "Yesterday": "Gestern",
-    "Week": "Vor einer Woche"
+    "GenericTypeErrorMessage": "DateTimePicker unterstützt nur DateTime, DateTime?, DateTimeOffset, DateTimeOffset?"
   },
   "BootstrapBlazor.Components.DateTimeRange": {
     "SeparateText": "Bis",

diff --git a/localization/es.json b/localization/es.json
@@ -56,10 +56,7 @@
     "Months": "Ene,Feb,Mar,Abr,May,Jun,Jul,Ago,Sep,Oct,Nov,Dic",
     "MonthLists": "Ene,Feb,Mar,Abr,May,Jun,Jul,Ago,Sep,Oct,Nov,Dic",
     "WeekLists": "Dom,Lun,Mar,Mié,Jue,Vie,Sáb",
-    "GenericTypeErrorMessage": "DateTimePicker solo soporta DateTime, DateTime?, DateTimeOffset, DateTimeOffset?",
-    "Today": "Hoy",
-    "Yesterday": "Ayer",
-    "Week": "Hace una semana"
+    "GenericTypeErrorMessage": "DateTimePicker solo soporta DateTime, DateTime?, DateTimeOffset, DateTimeOffset?"
   },
   "BootstrapBlazor.Components.DateTimeRange": {
     "SeparateText": "A",

diff --git a/localization/it.json b/localization/it.json
@@ -56,10 +56,7 @@
     "Months": "Gennaio,Febbraio,Marzo,Aprile,Maggio,Giugno,Luglio,Agosto,Settembre,Ottobre,Novembre,Dicembre",
     "MonthLists": "Gen,Feb,Mar,Apr,Mag,Giu,Lug,Ago,Set,Ott,Nov,Dic",
     "WeekLists": "Dom,Lun,Mar,Mer,Gio,Ven,Sab",
-    "GenericTypeErrorMessage": "DateTimePicker supporta solo DateTime o Nullable<DateTime>",
-    "Today": "Oggi",
-    "Yesterday": "Ieri",
-    "Week": "Una settimana fa"
+    "GenericTypeErrorMessage": "DateTimePicker supporta solo DateTime o Nullable<DateTime>"
   },
   "BootstrapBlazor.Components.DateTimeRange": {
     "SeparateText": "A",

diff --git a/localization/km-KH.json b/localization/km-KH.json
@@ -56,10 +56,7 @@
     "Months": "មករា,កុម្ភៈ,មីនា,មេសា,ឧសភា,មិថុនា,កក្កដា,សីហា,កញ្ញា,តុលា,វិច្ឆិកា,ធ្នូ",
     "MonthLists": "មករា,កុម្ភៈ,មីនា,មេសា,ឧសភា,មិថុនា,កក្កដា,សីហា,កញ្ញា,តុលា,វិច្ឆិកា,ធ្នូ",
     "WeekLists": "អាទិត្យ,ចន្ទ,អង្គារ,ពុធ,ព្រហស្បតិ៍,សុក្រ,សៅរ៍",
-    "GenericTypeErrorMessage": "DateTimePicker ដំណើរការតែ DateTime, DateTime?, DateTimeOffset និង DateTimeOffset? ប៉ុណ្ណោះ",
-    "Today": "ថ្ងៃនេះ",
-    "Yesterday": "ម្សិលមិញ",
-    "Week": "មួយសប្តាហ៍មុន"
+    "GenericTypeErrorMessage": "DateTimePicker ដំណើរការតែ DateTime, DateTime?, DateTimeOffset និង DateTimeOffset? ប៉ុណ្ណោះ"
   },
   "BootstrapBlazor.Components.DateTimeRange": {
     "SeparateText": "ដល់",

diff --git a/localization/pt-BR.json b/localization/pt-BR.json
@@ -56,10 +56,7 @@
     "Months": "Jan,Fev,Mar,Abr,Mai,Jun,Jul,Ago,Set,Out,Nov,Dez",
     "MonthLists": "Jan,Fev,Mar,Abr,Mai,Jun,Jul,Ago,Set,Out,Nov,Dez",
     "WeekLists": "Dom,Seg,Ter,Qua,Qui,Sex,Sáb",
-    "GenericTypeErrorMessage": "DateTimePicker só suporta DateTime DateTime? DateTimeOffset DateTimeOffset?",
-    "Today": "Hoje",
-    "Yesterday": "Ontem",
-    "Week": "Há uma semana"
+    "GenericTypeErrorMessage": "DateTimePicker só suporta DateTime DateTime? DateTimeOffset DateTimeOffset?"
   },
   "BootstrapBlazor.Components.DateTimeRange": {
     "SeparateText": "Até",

diff --git a/localization/pt.json b/localization/pt.json
@@ -56,10 +56,7 @@
     "Months": "Jan,Fev,Mar,Abr,Mai,Jun,Jul,Ago,Set,Out,Nov,Dez",
     "MonthLists": "Jan,Fev,Mar,Abr,Mai,Jun,Jul,Ago,Set,Out,Nov,Dez",
     "WeekLists": "Dom,Seg,Ter,Qua,Qui,Sex,Sáb",
-    "GenericTypeErrorMessage": "DateTimePicker suporta apenas DateTime, DateTime?, DateTimeOffset, DateTimeOffset?",
-    "Today": "Hoje",
-    "Yesterday": "Ontem",
-    "Week": "Uma semana atrás"
+    "GenericTypeErrorMessage": "DateTimePicker suporta apenas DateTime, DateTime?, DateTimeOffset, DateTimeOffset?"
   },
   "BootstrapBlazor.Components.DateTimeRange": {
     "SeparateText": "Até",

diff --git a/localization/ru-RU.json b/localization/ru-RU.json
@@ -56,10 +56,7 @@
     "Months": "Янв,Фев,Мар,Апр,Май,Июн,Июл,Авг,Сен,Окт,Ноя,Дек",
     "MonthLists": "Янв,Фев,Мар,Апр,Май,Июн,Июл,Авг,Сен,Окт,Ноя,Дек",
     "WeekLists": "Вс,Пн,Вт,Ср,Чт,Пт,Сб",
-    "GenericTypeErrorMessage": "DateTimePicker поддерживает только DateTime, DateTime?, DateTimeOffset, DateTimeOffset?",
-    "Today": "Сегодня",
-    "Yesterday": "Вчера",
-    "Week": "Неделю назад"
+    "GenericTypeErrorMessage": "DateTimePicker поддерживает только DateTime, DateTime?, DateTimeOffset, DateTimeOffset?"
   },
   "BootstrapBlazor.Components.DateTimeRange": {
     "SeparateText": "До",

diff --git a/localization/th-TH.json b/localization/th-TH.json
@@ -56,10 +56,7 @@
     "Months": "ม.ค.,ก.พ.,มี.ค.,เม.ย.,พ.ค.,มิ.ย.,ก.ค.,ส.ค.,ก.ย.,ต.ค.,พ.ย.,ธ.ค.",
     "MonthLists": "ม.ค.,ก.พ.,มี.ค.,เม.ย.,พ.ค.,มิ.ย.,ก.ค.,ส.ค.,ก.ย.,ต.ค.,พ.ย.,ธ.ค.",
     "WeekLists": "อา,จ,อ,พ,พฤ,ศ,ส",
-    "GenericTypeErrorMessage": "DateTimePicker รองรับเฉพาะ DateTime, DateTime?, DateTimeOffset, DateTimeOffset?",
-    "Today": "วันนี้",
-    "Yesterday": "เมื่อวาน",
-    "Week": "หนึ่งสัปดาห์ก่อน"
+    "GenericTypeErrorMessage": "DateTimePicker รองรับเฉพาะ DateTime, DateTime?, DateTimeOffset, DateTimeOffset?"
   },
   "BootstrapBlazor.Components.DateTimeRange": {
     "SeparateText": "ถึง",

diff --git a/localization/uk-UA.json b/localization/uk-UA.json
@@ -56,10 +56,7 @@
     "Months": "Січ,Лют,Бер,Квіт,Трав,Черв,Лип,Серп,Вер,Жовт,Лист,Груд",
     "MonthLists": "Січ,Лют,Бер,Квіт,Трав,Черв,Лип,Серп,Вер,Жовт,Лист,Груд",
     "WeekLists": "Нд,Пн,Вт,Ср,Чт,Пт,Сб",
-    "GenericTypeErrorMessage": "DateTimePicker підтримує лише DateTime, DateTime?, DateTimeOffset, DateTimeOffset?",
-    "Today": "Сьогодні",
-    "Yesterday": "Вчора",
-    "Week": "Тиждень тому"
+    "GenericTypeErrorMessage": "DateTimePicker підтримує лише DateTime, DateTime?, DateTimeOffset, DateTimeOffset?"
   },
   "BootstrapBlazor.Components.DateTimeRange": {
     "SeparateText": "До",

diff --git a/localization/zh-TW.json b/localization/zh-TW.json
@@ -56,10 +56,7 @@
     "Months": "1,2,3,4,5,6,7,8,9,10,11,12",
     "MonthLists": "一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月",
     "WeekLists": "日,一,二,三,四,五,六",
-    "GenericTypeErrorMessage": "DateTimePicker 元件僅支援綁定泛型為 DateTime DateTime? DateTimeOffset DateTimeOffset?",
-    "Today": "今天",
-    "Yesterday": "昨天",
-    "Week": "一週前"
+    "GenericTypeErrorMessage": "DateTimePicker 元件僅支援綁定泛型為 DateTime DateTime? DateTimeOffset DateTimeOffset?"
   },
   "BootstrapBlazor.Components.DateTimeRange": {
     "SeparateText": "至",

diff --git a/src/BootstrapBlazor.Server/Components/Components/DatePickerDialogForm.razor b/src/BootstrapBlazor.Server/Components/Components/DatePickerDialogForm.razor
@@ -0,0 +1,94 @@
+@inject IStringLocalizer<BootstrapBlazor.Server.Components.Samples.DateTimePickers> Localizer
+
+<ValidateForm Model="this" OnValidSubmit="OnValidSubmitAsync">
+    <div class="row g-3">
+        <div class="col-12">
+            <DateTimePicker @bind-Value="DateValue" DisplayText="@Localizer["NestedDateLabel"]" />
+        </div>
+        <div class="col-12">
+            <DateTimePicker @bind-Value="SidebarDateValue" DisplayText="@Localizer["NestedDateLabel"]"
+                            ShowSidebar="true">
+                <SidebarTemplate Context="selectDate">
+                    <div class="sidebar-item" @onclick="() => selectDate(DateTime.Today.AddDays(1 - DateTime.Today.Day))">
+                        <i class="fa-fw fa-solid fa-home"></i>
+                        <span>@Localizer["SidebarMonthStart"]</span>
+                    </div>
+                    <div class="sidebar-item" @onclick="() => selectDate(DateTime.Today.AddDays(1 - DateTime.Today.Day))">
+                        <i class="fa-fw fa-solid fa-home"></i>
+                        <span>@Localizer["SidebarMonthStart"]</span>
+                    </div>
+                    <div class="sidebar-item" @onclick="() => selectDate(DateTime.Today.AddDays(1 - DateTime.Today.Day))">
+                        <i class="fa-fw fa-solid fa-home"></i>
+                        <span>@Localizer["SidebarMonthStart"]</span>
+                    </div>
+                    <div class="sidebar-item" @onclick="() => selectDate(DateTime.Today.AddDays(1 - DateTime.Today.Day))">
+                        <i class="fa-fw fa-solid fa-home"></i>
+                        <span>@Localizer["SidebarMonthStart"]</span>
+                    </div>
+                    <div class="sidebar-item" @onclick="() => selectDate(DateTime.Today.AddDays(1 - DateTime.Today.Day))">
+                        <i class="fa-fw fa-solid fa-home"></i>
+                        <span>@Localizer["SidebarMonthStart"]</span>
+                    </div>
+                    <div class="sidebar-item" @onclick="() => selectDate(DateTime.Today.AddDays(1 - DateTime.Today.Day))">
+                        <i class="fa-fw fa-solid fa-home"></i>
+                        <span>@Localizer["SidebarMonthStart"]</span>
+                    </div>
+                </SidebarTemplate>
+            </DateTimePicker>
+        </div>
+        <div class="col-12">
+            <DateTimePicker @bind-Value="DateTimeValue" ViewMode="DatePickerViewMode.DateTime"
+                            PickTimeMode="PickTimeMode.Clock" DisplayText="@Localizer["NestedDateTimeLabel"]" />
+        </div>
+        <div class="col-12">
+            <DateTimeRange @bind-Value="RangeValue" ShowSidebar="true" DisplayText="@Localizer["NestedRangeLabel"]" />
+        </div>
+        <div class="col-12">
+            <Button ButtonType="ButtonType.Submit" Text="@Localizer["SubmitText"]" />
+        </div>
+    </div>
+    @if (_submitted)
+    {
+        <div class="mt-3" role="status">@Localizer["NestedSubmitted"]</div>
+    }
+    <div class="mt-3">
+        <output>@DateValue?.ToString("yyyy-MM-dd")</output>
+        <output class="d-block">@DateTimeValue?.ToString("yyyy-MM-dd HH:mm:ss")</output>
+        <output class="d-block">@RangeValue.Start.ToString("yyyy-MM-dd") — @RangeValue.End.ToString("yyyy-MM-dd")</output>
+    </div>
+</ValidateForm>
+
+@code {
+    /// <summary>
+    /// <para lang="zh">获得/设置 表单日期。</para>
+    /// <para lang="en">Gets or sets the form date.</para>
+    /// </summary>
+    [Required]
+    public DateTime? DateValue { get; set; }
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 自定义侧边栏日期。</para>
+    /// <para lang="en">Gets or sets the custom sidebar date.</para>
+    /// </summary>
+    public DateTime? SidebarDateValue { get; set; }
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 表单日期时间。</para>
+    /// <para lang="en">Gets or sets the form date and time.</para>
+    /// </summary>
+    public DateTime? DateTimeValue { get; set; } = DateTime.Now;
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 表单日期范围。</para>
+    /// <para lang="en">Gets or sets the form date range.</para>
+    /// </summary>
+    public DateTimeRangeValue RangeValue { get; set; } = new();
+
+    private bool _submitted;
+
+    private Task OnValidSubmitAsync(EditContext context)
+    {
+        _submitted = true;
+        return Task.CompletedTask;
+    }
+}
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor
@@ -1,9 +1,14 @@
 @page "/datetime-picker"
+@page "/datetime-picker/dialog"
 
 <h3>@Localizer["Title"]</h3>
 
 <h4>@Localizer["Description"]</h4>
 
+<DemoBlock Title="@Localizer["NestedDialogTitle"]" Introduction="@Localizer["NestedDialogIntro"]" Name="NestedDialog">
+    <Button Text="@Localizer["NestedDialogOpen"]" OnClick="ShowNestedDialogAsync" />
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["DateTimePickerTitle"]" Introduction="@Localizer["DateTimePickerIntro"]" Name="DateTimePicker">
     <section ignore>
         <p>@Localizer["DateTimePickerParameters"]</p>
@@ -185,7 +190,15 @@
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["ShowSidebarTitle"]" Introduction="@Localizer["ShowSidebarIntro"]" Name="ShowSidebar">
-	<DateTimePicker ShowSidebar="true" @bind-Value="SidebarValue" />
+    <DateTimePicker ShowSidebar="true" SidebarItems="_sidebarItems" @bind-Value="CustomSidebarValue" />
+    <DateTimePicker class="mt-3" ShowSidebar="true" @bind-Value="SidebarValue">
+        <SidebarTemplate Context="selectDate">
+            <div class="sidebar-item" @onclick="() => selectDate(DateTime.Today.AddDays(1 - DateTime.Today.Day))">
+                <i class="fa-fw fa-solid fa-home"></i>
+                <span>@Localizer["SidebarMonthStart"]</span>
+            </div>
+        </SidebarTemplate>
+    </DateTimePicker>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["MinValueTitle"]" Introduction="@Localizer["MinValueIntro"]" Name="MinValue">

diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs
@@ -10,6 +10,17 @@ namespace BootstrapBlazor.Server.Components.Samples;
 /// </summary>
 public sealed partial class DateTimePickers
 {
+    [Inject]
+    [NotNull]
+    private DialogService? DialogService { get; set; }
+
+    private Task ShowNestedDialogAsync() => DialogService.Show(new DialogOption
+    {
+        Title = Localizer["NestedDialogTitle"],
+        Component = BootstrapDynamicComponent.CreateComponent<DatePickerDialogForm>(),
+        ShowFooter = false
+    });
+
     private DateTime DateTimePickerValue { get; set; }
 
     [NotNull]
@@ -50,6 +61,15 @@ private Task NormalOnConfirm()
 
     private DateTime SidebarValue { get; set; } = DateTime.Today;
 
+    private DateTime CustomSidebarValue { get; set; } = DateTime.Today;
+
+    private readonly List<DateTimePickerSidebarItem> _sidebarItems =
+    [
+        new() { Text = DateTime.Today.AddDays(-1).ToString("yyyy-MM-dd"), Value = DateTime.Today.AddDays(-1) },
+        new() { Text = DateTime.Today.AddDays(1).ToString("yyyy-MM-dd"), Value = DateTime.Today.AddDays(1) },
+        new() { Text = DateTime.Today.AddDays(7).ToString("yyyy-MM-dd"), Value = DateTime.Today.AddDays(7) }
+    ];
+
     private DateTime YearValue { get; set; } = DateTime.Today;
 
     private DateTime MonthValue { get; set; } = DateTime.Today;

diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimeRanges.razor b/src/BootstrapBlazor.Server/Components/Samples/DateTimeRanges.razor
@@ -5,6 +5,10 @@
 
 <h4>@Localizer["Description"]</h4>
 
+<DemoBlock Title="@Localizer["ResponsiveTitle"]" Introduction="@Localizer["ResponsiveIntro"]" Name="Responsive">
+    <DateTimeRange Value="@TodayDateTimeRangeValue" ShowSidebar="true" ShowToday="true" RenderMode="DateTimeRangeRenderMode.Double" />
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
     <DateTimeRange @bind-Value="@NormalDateTimeRangeValue" OnConfirm="OnNormalConfirm" ShowSidebar="true" ViewMode="DatePickerViewMode.Year" IsEditable="true" DateFormat="yyyy">
         <TimePickerSetting ShowClockScale="true" IsAutoSwitch="false" />

diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -1716,6 +1716,13 @@
     "Title": "CountUp"
   },
   "BootstrapBlazor.Server.Components.Samples.DateTimePickers": {
+    "NestedDialogTitle": "Pickers in a nested dialog form",
+    "NestedDialogIntro": "Open the form, then its date or date/time picker. The client checks the viewport directly: below 768px it uses a native dialog; at 768px and above it keeps the existing Popover, without a Responsive component. Crossing the breakpoint closes the current panel and switches modes for the next open. Check that closing the picker returns to the editable form, required validation and submission work, and reopening does not create duplicate dialogs. Also check confirming and canceling the built-in time picker. The outer form uses DialogService; the date picker itself does not require a Dialog host.",
+    "NestedDialogOpen": "Open form dialog",
+    "NestedDateLabel": "Required date",
+    "NestedDateTimeLabel": "Date and time (with nested time picker)",
+    "NestedRangeLabel": "Date range",
+    "NestedSubmitted": "Form validation and submission succeeded.",
     "BindValueIntro": "The values in the text box change as the date component time changes",
     "BindValueTitle": "Data is bound in both directions",
     "BlockAutoCloseDesc": "<code>AutoClose</code> The default value is <code>true</code> When selecting a date, the pop-up window will automatically close. When the value is set to <code>false</code>, the pop-up window needs to be closed when the <b>confirm</b> button is clicked",
@@ -1779,7 +1786,8 @@
     "ShowLabelIntro": "When you are a form component, the label in front of the component is displayed",
     "ShowLabelTip": "Set the <code>DisplayText</code> property value to <code>select time</code>, The pre-label explicit rules are consistent with the <code>BootstrapInput</code> component  of the <a href='input'>[portal]</a>",
     "ShowLabelTitle": "The label is displayed",
-    "ShowSidebarIntro": "When you set the <code>ShowSidebar</code> property value to <code>true</code>, the component displays the shortcut sidebar",
+    "ShowSidebarIntro": "Set <code>ShowSidebar=\"true\"</code> to show the sidebar and configure shortcuts with <code>SidebarItems</code>. The second example uses <code>SidebarTemplate</code> for a custom first-day-of-month button. Its context is a date selection callback that checks date bounds and disabled dates. The sidebar works in both desktop Popover and mobile Dialog modes.",
+    "SidebarMonthStart": "First day of this month",
     "ShowSidebarTitle": "Sidebar with shortcuts",
     "SubmitText": "Save",
     "Title": "DatePicker",
@@ -1805,11 +1813,13 @@
     "Limit": "time limit",
     "MaxMinValueIntro": "set time range",
     "MaxMinValueTitle": "Max and Min",
-    "NormalIntro": "Take 'day' as the basic unit, select a period of time",
+    "NormalIntro": "Select a date range in days. On small screens, a single-panel dialog is used with Clear, Today and OK actions in its footer. After selecting only the start date, use Reselect in the header to choose the start date again",
     "NormalTitle": "Basic skills",
     "SidebarIntro": "When the <code>ShowSidebar</code> property value is set to <code>true</code>, the component displays the shortcut sidebar",
     "SidebarTip": "by setting <code>ShowSidebar</code> The parameter enables the display sidebar shortcut options function, by setting <code>SidebarItems</code> The parameter collection replaces the default shortcuts built into the component",
     "SidebarTitle": "Sidebar with shortcut keys",
+    "ResponsiveTitle": "Responsive dialog",
+    "ResponsiveIntro": "Below 768px, a native dialog always shows one calendar with navigation to select a date range. At 768px and above, a Popover follows RenderMode for single or double view. Crossing the breakpoint closes the panel; reopen it to use the new mode. The date picker's nested form example also demonstrates range selection inside a dialog.",
     "SingleViewTitle": "Single view mode",
     "Submit": "Submit",
     "Title": "Date Time Range Picker",
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,6 +34,7 @@ @@
     - 所有用户可见文本必须使用 `IStringLocalizer`
     - 禁止硬编码中文/英文 UI 文本
+    - 本地化文件使用 json 文件存储在 localization 文件夹与相应项目 Locales 目录下
     ---
@@ Expand Down @@