diff --git a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor
index fd0f6e2d945..d62025a0b20 100644
--- a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor
+++ b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor
@@ -33,19 +33,19 @@
                 </div>
             }
             <CascadingValue Value="this" IsFixed="true">
-                <DatePickerBody Value="@StartValue" ValueChanged="UpdateValue" OnDateChanged="OnStartDateChanged"
-                                DateFormat="@DateFormat" TimeFormat="@TimeFormat" ViewMode="ViewMode"
-                                ShowLunar="ShowLunar" ShowSolarTerm="ShowSolarTerm" ShowFestivals="ShowFestivals" ShowHolidays="ShowHolidays"
-                                ShowRightButtons="@_showRightButtons" MaxValue="MaxValue" MinValue="MinValue">
-                </DatePickerBody>
                 @if (RenderMode == DateTimeRangeRenderMode.Double)
                 {
-                    <DatePickerBody Value="@EndValue" ValueChanged="UpdateValue" OnDateChanged="OnEndDateChanged"
+                    <DatePickerBody Value="@StartValue" ValueChanged="UpdateValue" OnDateChanged="OnStartDateChanged"
                                     DateFormat="@DateFormat" TimeFormat="@TimeFormat" ViewMode="ViewMode"
                                     ShowLunar="ShowLunar" ShowSolarTerm="ShowSolarTerm" ShowFestivals="ShowFestivals" ShowHolidays="ShowHolidays"
-                                    ShowLeftButtons="false" MaxValue="MaxValue" MinValue="MinValue">
+                                    ShowRightButtons="false" MaxValue="MaxValue" MinValue="MinValue">
                     </DatePickerBody>
                 }
+                <DatePickerBody Value="@EndValue" ValueChanged="UpdateValue" OnDateChanged="OnEndDateChanged"
+                                DateFormat="@DateFormat" TimeFormat="@TimeFormat" ViewMode="ViewMode"
+                                ShowLunar="ShowLunar" ShowSolarTerm="ShowSolarTerm" ShowFestivals="ShowFestivals" ShowHolidays="ShowHolidays"
+                                ShowLeftButtons="@_showLeftButtons" MaxValue="MaxValue" MinValue="MinValue">
+                </DatePickerBody>
             </CascadingValue>
         </div>
         <div class="picker-panel-footer">
diff --git a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs
index b6fd74e13c4..2fc2e2d0b0f 100644
--- a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs
+++ b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs
@@ -270,7 +270,7 @@ public bool AllowNull
         .AddClass("disabled", IsDisabled)
         .Build();
 
-    private bool _showRightButtons = false;
+    private bool _showLeftButtons = false;
 
     /// <summary>
     /// <inheritdoc/>
@@ -297,7 +297,7 @@ protected override void OnInitialized()
             }
         }
 
-        _showRightButtons = RenderMode == DateTimeRangeRenderMode.Single;
+        _showLeftButtons = RenderMode == DateTimeRangeRenderMode.Single;
     }
 
     /// <summary>