From 242fb1a91d8bff7bf1452f000d71c467a5754a42 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Mon, 10 Aug 2026 10:18:33 +0330
Subject: [PATCH 1/7] apply BitDateRangePicker improvements #12867

---
 .../DateRangePicker/BitDateRangePicker.razor  |  408 +++--
 .../BitDateRangePicker.razor.cs               | 1238 ++++++++++++--
 .../DateRangePicker/BitDateRangePicker.scss   |  284 +++-
 .../BitDateRangePickerClassStyles.cs          |   37 +-
 .../BitDateRangePickerPreset.cs               |   45 +
 .../Bit.BlazorUI/Scripts/Calendars.ts         |    2 +-
 .../BitDateRangePickerDemo.razor              |  341 +++-
 .../BitDateRangePickerDemo.razor.cs           |  646 ++++++-
 .../BitDateRangePickerDemo.razor.samples.cs   |  242 ++-
 .../BitDateRangePickerDemo.razor.scss         |    9 +
 .../FormValidationDateRangePickerModel.cs     |   21 +-
 .../BitDateRangePickerTests.cs                | 1505 ++++++++++++++++-
 12 files changed, 4308 insertions(+), 470 deletions(-)
 create mode 100644 src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePickerPreset.cs

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
index 3fed74e82a6..e1ceb358cbe 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
@@ -51,6 +51,7 @@
                        @onchange="@HandleOnChange"
                        @onfocusin="@HandleOnFocusIn"
                        @onfocusout="@HandleOnFocusOut"
+                       @onkeydown="@HandleOnInputKeyDown"
                        type="text"
                        name="@Name"
                        id="@_inputId"
@@ -75,8 +76,8 @@
                             style="@Styles?.ClearButton"
                             class="bit-dtrp-clr @Classes?.ClearButton"
                             type="button"
-                            aria-hidden="true"
-                            aria-label="Clear date">
+                            title="@ClearButtonTitle"
+                            aria-label="@ClearButtonTitle">
                         <i aria-hidden="true"
                            style="@Styles?.ClearButtonIcon"
                            class="bit-dtrp-cic @clearBtnIconCss @Classes?.ClearButtonIcon" />
@@ -110,204 +111,277 @@
                readonly="@(AllowTextInput is false || ReadOnly)" />
     }
 
-</div>
-
-@if (Standalone is false)
-{
+</div>
+
+@if (Standalone is false)
+{
     <div @onclick="CloseCallout"
          style="display:@(IsOpen ? "block;" : "none;") @Styles?.Overlay"
-         id="@_overlayId"
+         id="@_overlayId"
      class="bit-dtrp-ovl @Classes?.Overlay"></div>
-}
-
+}
+
 <div id="@_calloutId"
      style="@Styles?.Callout"
-     class="@GetCalloutCssClasses()">
-    <div style="@Styles?.CalloutContainer" class="bit-dtrp-cac @Classes?.CalloutContainer" role="dialog" @attributes=@CalloutHtmlAttributes aria-label="@CalloutAriaLabel">
-        <div style="@Styles?.Group" class="bit-dtrp-grp @Classes?.Group" role="group" aria-label="">
-            <div class="bit-dtrp-sdt" aria-live="polite" aria-atomic="true">Selected date @CurrentValueAsString</div>
+     class="@GetCalloutCssClasses()"
+     dir="@Dir?.ToString().ToLower()">
+    <div style="@Styles?.CalloutContainer"
+         class="bit-dtrp-cac @Classes?.CalloutContainer"
+         role="dialog"
+         @attributes=@CalloutHtmlAttributes
+         @onkeydown="HandleOnCalloutKeyDown"
+         aria-label="@CalloutAriaLabel">
+        <div style="@Styles?.Group" class="bit-dtrp-grp @Classes?.Group" role="group">
+            <div class="bit-dtrp-sdt" aria-live="polite" aria-atomic="true">
+                @if (CurrentValueAsString.HasValue())
+                {
+                    @(string.Format(SelectedDateAriaAtomic, CurrentValueAsString))
+                }
+            </div>
 
             @{
-                var todayYear = _culture.Calendar.GetYear(DateTime.Now);
-                var todayMonth = _culture.Calendar.GetMonth(DateTime.Now);
-                var todayDay = _culture.Calendar.GetDayOfMonth(DateTime.Now);
+                var today = GetToday();
+                var todayYear = _culture.Calendar.GetYear(today);
+                var todayMonth = _culture.Calendar.GetMonth(today);
+                var todayDay = _culture.Calendar.GetDayOfMonth(today);
                 var showTimePicker = ShowTimePicker && ((_showTimePickerAsOverlayInternal && _isTimePickerOverlayOnTop) || _showTimePickerAsOverlayInternal is false);
             }
 
+            @if (Presets is not null && Presets.Any())
+            {
+                <div style="@Styles?.PresetsContainer"
+                     class="bit-dtrp-prc @Classes?.PresetsContainer"
+                     role="group"
+                     aria-label="@PresetsAriaLabel">
+                    @foreach (var preset in Presets)
+                    {
+                        var presetDisabled = IsEnabled is false || preset.IsEnabled is false;
+                        var presetSelected = IsPresetSelected(preset);
+                        <button @onclick="() => SelectPreset(preset)"
+                                type="button"
+                                disabled="@presetDisabled"
+                                title="@(preset.Title ?? preset.Text)"
+                                aria-disabled="@presetDisabled"
+                                aria-pressed="@(presetSelected ? "true" : "false")"
+                                style="@Styles?.PresetButton @preset.Style"
+                                class="bit-dtrp-prb @(presetSelected ? $"bit-dtrp-prs {Classes?.SelectedPresetButton}" : null) @Classes?.PresetButton @preset.Class">
+                            @preset.Text
+                        </button>
+                    }
+                </div>
+                <div style="@Styles?.Divider" class="bit-dtrp-dvd @Classes?.Divider"></div>
+            }
+
             @if (ShowDayPicker())
             {
-                <div style="@Styles?.DayPickerWrapper" class="bit-dtrp-dwp @Classes?.DayPickerWrapper">
-                    <div style="@Styles?.DayPickerHeader" class="bit-dtrp-pkh @Classes?.DayPickerHeader">
-                        @if (_showMonthPickerAsOverlayInternal || (ShowTimePicker && ShowTimePickerAsOverlay is false))
-                        {
-                            var title = string.Format(MonthPickerToggleTitle, _monthTitle);
-                            <button @onclick="@ToggleMonthPickerOverlay"
-                                    tabindex="0"
-                                    type="button"
-                                    title="@title"
-                                    aria-live="polite"
-                                    aria-atomic="true"
-                                    aria-label="@title"
-                                    style="@Styles?.DayPickerMonth"
-                                    disabled="@(IsEnabled is false)"
-                                    aria-disabled="@(IsEnabled is false)"
-                                    class="bit-dtrp-ptb @Classes?.DayPickerMonth">
-                                @_monthTitle
-                            </button>
-                        }
-                        else
-                        {
-                            <div style="@Styles?.DayPickerMonth"
-                                 class="bit-dtrp-pkt @Classes?.DayPickerMonth"
-                                 aria-live="polite"
-                                 aria-atomic="true"
-                                 tabindex="-1">
-                                @_monthTitle
-                            </div>
-                        }
-                        @{
-                            var prevDisabled = CanChangeMonth(false) is false;
-                            var nextDisabled = CanChangeMonth(true) is false;
-                        }
-                        <div class="bit-dtrp-nbc">
-                            <button @onclick="() => HandleMonthChange(false)"
-                                    type="button"
-                                    disabled="@prevDisabled"
-                                    title="@GoToPrevMonthTitle"
-                                    aria-disabled="@prevDisabled"
-                                    style="@Styles?.PrevMonthNavButton"
-                                    class="bit-dtrp-nbt @Classes?.PrevMonthNavButton">
-                                <i aria-hidden="true"
-                                   style="@Styles?.PrevMonthNavIcon"
-                                   class="bit-dtrp-cic @prevMonthNavIconCss @Classes?.PrevMonthNavIcon" />
-                            </button>
-                            @if (ShowGoToToday && (_showMonthPickerAsOverlayInternal || (ShowTimePicker && _showTimePickerAsOverlayInternal is false)))
-                            {
-                                var goToTodayDisabled = IsGoToTodayButtonDisabled(todayYear, todayMonth);
+                var focusableDay = GetFocusableDay();
+                var prevDisabled = CanChangeMonth(false) is false;
+                var nextDisabled = CanChangeMonth(true) is false;
 
-                                <button @onclick="HandleGoToToday"
-                                        type="button"
-                                        title="@GoToTodayTitle"
-                                        disabled="@goToTodayDisabled"
-                                        style="@Styles?.GoToTodayButton"
-                                        aria-disabled="@goToTodayDisabled"
-                                        class="bit-dtrp-gtb @Classes?.GoToTodayButton">
-                                    <i aria-hidden="true"
-                                       style="@Styles?.GoToTodayIcon"
-                                       class="bit-dtrp-cic @goToTodayIconCss @Classes?.GoToTodayIcon" />
-                                </button>
-                            }
-                            <button @onclick="() => HandleMonthChange(true)"
-                                    type="button"
-                                    disabled="@nextDisabled"
-                                    title="@GoToNextMonthTitle"
-                                    aria-disabled="@nextDisabled"
-                                    style="@Styles?.NextMonthNavButton"
-                                    class="bit-dtrp-nbt @Classes?.NextMonthNavButton">
-                                <i aria-hidden="true"
-                                   style="@Styles?.NextMonthNavIcon"
-                                   class="bit-dtrp-cic @nextMonthNavIconCss @Classes?.NextMonthNavIcon" />
-                            </button>
-                            @if (ShowCloseButton && Standalone is false)
-                            {
-                                <button @onclick="CloseCallout"
-                                        type="button"
-                                        style="@Styles?.CloseButton"
-                                        class="bit-dtrp-nbt @Classes?.CloseButton"
-                                        title="@CloseButtonTitle"
-                                        aria-label="@CloseButtonTitle">
-                                    <i aria-hidden="true"
-                                       style="@Styles?.CloseButtonIcon"
-                                       class="bit-dtrp-cic @closeButtonIconCss @Classes?.CloseButtonIcon" />
-                                </button>
-                            }
-                            @if (_showMonthPickerAsOverlayInternal && _showTimePickerAsOverlayInternal && ShowTimePicker)
+                @for (var month = 0; month < _monthCount; month++)
+                {
+                    var monthIndex = month;
+                    var isFirstMonth = monthIndex == 0;
+                    var isLastMonth = monthIndex == _monthCount - 1;
+                    var monthTitle = _monthTitles[monthIndex];
+
+                    <div style="@Styles?.DayPickerWrapper" class="bit-dtrp-dwp @Classes?.DayPickerWrapper">
+                        <div style="@Styles?.DayPickerHeader" class="bit-dtrp-pkh @Classes?.DayPickerHeader">
+                            @if (isFirstMonth && IsMonthPickerVisible && (_showMonthPickerAsOverlayInternal || (ShowTimePicker && ShowTimePickerAsOverlay is false)))
                             {
-                                <button @onclick="@ToggleTimePickerOverlay"
+                                var title = string.Format(MonthPickerToggleTitle, monthTitle);
+                                <button @onclick="@ToggleMonthPickerOverlay"
                                         tabindex="0"
                                         type="button"
+                                        title="@title"
                                         aria-live="polite"
                                         aria-atomic="true"
-                                        title="@ShowTimePickerTitle"
+                                        aria-label="@title"
+                                        style="@Styles?.DayPickerMonth"
                                         disabled="@(IsEnabled is false)"
-                                        aria-label="@ShowTimePickerTitle"
                                         aria-disabled="@(IsEnabled is false)"
-                                        style="@Styles?.ShowTimePickerButton"
-                                        class="bit-dtrp-nbt @Classes?.ShowTimePickerButton">
-                                    <i aria-hidden="true"
-                                       style="@Styles?.ShowTimePickerIcon"
-                                       class="bit-dtrp-cic @showTimePickerIconCss @Classes?.ShowTimePickerIcon" />
+                                        class="bit-dtrp-ptb @Classes?.DayPickerMonth">
+                                    @monthTitle
                                 </button>
                             }
-                        </div>
-                    </div>
+                            else
+                            {
+                                <div style="@Styles?.DayPickerMonth"
+                                     class="bit-dtrp-pkt @Classes?.DayPickerMonth"
+                                     aria-live="polite"
+                                     aria-atomic="true"
+                                     tabindex="-1">
+                                    @monthTitle
+                                </div>
+                            }
+                            <div class="bit-dtrp-nbc">
+                                @if (isFirstMonth)
+                                {
+                                    <button @onclick="() => HandleMonthChange(false)"
+                                            type="button"
+                                            disabled="@prevDisabled"
+                                            title="@GoToPrevMonthTitle"
+                                            aria-disabled="@prevDisabled"
+                                            style="@Styles?.PrevMonthNavButton"
+                                            class="bit-dtrp-nbt @Classes?.PrevMonthNavButton">
+                                        <i aria-hidden="true"
+                                           style="@Styles?.PrevMonthNavIcon"
+                                           class="bit-dtrp-cic @prevMonthNavIconCss @Classes?.PrevMonthNavIcon" />
+                                    </button>
+                                }
+                                @if (isLastMonth && ShowGoToToday && (IsMonthPickerVisible is false || _showMonthPickerAsOverlayInternal || (ShowTimePicker && _showTimePickerAsOverlayInternal is false)))
+                                {
+                                    var goToTodayDisabled = IsGoToTodayButtonDisabled(todayYear, todayMonth);
 
-                    <div style="@Styles?.DaysHeaderRow" class="bit-dtrp-dgh @Classes?.DaysHeaderRow">
-                        @if (ShowWeekNumbers)
-                        {
-                            <div style="@Styles?.WeekNumbersHeader" class="bit-dtrp-wlb @Classes?.WeekNumbersHeader"></div>
-                        }
-
-                        @for (var index = 0; index < 7; index++)
-                        {
-                            var dayOfWeekName = _culture.DateTimeFormat.GetShortestDayName(GetDayOfWeek(index));
-                            <div scope="col"
-                                 title="@dayOfWeekName"
-                                 style="@Styles?.WeekNumbersHeader"
-                                 class="bit-dtrp-wlb @Classes?.WeekNumbersHeader">
-                                @dayOfWeekName[0]
+                                    <button @onclick="HandleGoToToday"
+                                            type="button"
+                                            title="@GoToTodayTitle"
+                                            disabled="@goToTodayDisabled"
+                                            style="@Styles?.GoToTodayButton"
+                                            aria-disabled="@goToTodayDisabled"
+                                            class="bit-dtrp-gtb @Classes?.GoToTodayButton">
+                                        <i aria-hidden="true"
+                                           style="@Styles?.GoToTodayIcon"
+                                           class="bit-dtrp-cic @goToTodayIconCss @Classes?.GoToTodayIcon" />
+                                    </button>
+                                }
+                                @if (isLastMonth)
+                                {
+                                    <button @onclick="() => HandleMonthChange(true)"
+                                            type="button"
+                                            disabled="@nextDisabled"
+                                            title="@GoToNextMonthTitle"
+                                            aria-disabled="@nextDisabled"
+                                            style="@Styles?.NextMonthNavButton"
+                                            class="bit-dtrp-nbt @Classes?.NextMonthNavButton">
+                                        <i aria-hidden="true"
+                                           style="@Styles?.NextMonthNavIcon"
+                                           class="bit-dtrp-cic @nextMonthNavIconCss @Classes?.NextMonthNavIcon" />
+                                    </button>
+                                }
+                                @if (isLastMonth && ShowCloseButton && Standalone is false)
+                                {
+                                    <button @onclick="CloseCallout"
+                                            type="button"
+                                            style="@Styles?.CloseButton"
+                                            class="bit-dtrp-nbt @Classes?.CloseButton"
+                                            title="@CloseButtonTitle"
+                                            aria-label="@CloseButtonTitle">
+                                        <i aria-hidden="true"
+                                           style="@Styles?.CloseButtonIcon"
+                                           class="bit-dtrp-cic @closeButtonIconCss @Classes?.CloseButtonIcon" />
+                                    </button>
+                                }
+                                @if (isLastMonth && (_showMonthPickerAsOverlayInternal || IsMonthPickerVisible is false) && _showTimePickerAsOverlayInternal && ShowTimePicker)
+                                {
+                                    <button @onclick="@ToggleTimePickerOverlay"
+                                            tabindex="0"
+                                            type="button"
+                                            aria-live="polite"
+                                            aria-atomic="true"
+                                            title="@ShowTimePickerTitle"
+                                            disabled="@(IsEnabled is false)"
+                                            aria-label="@ShowTimePickerTitle"
+                                            aria-disabled="@(IsEnabled is false)"
+                                            style="@Styles?.ShowTimePickerButton"
+                                            class="bit-dtrp-nbt @Classes?.ShowTimePickerButton">
+                                        <i aria-hidden="true"
+                                           style="@Styles?.ShowTimePickerIcon"
+                                           class="bit-dtrp-cic @showTimePickerIconCss @Classes?.ShowTimePickerIcon" />
+                                    </button>
+                                }
                             </div>
-                        }
-                    </div>
+                        </div>
 
-                    @for (var week = 0; week < 6; week++)
-                    {
-                        //to ignore the last empty week out of month || to ignore the first whole week out of month
-                        if (_daysOfCurrentMonth[week, 0].HasValue is false) continue;
+                        <div role="grid"
+                             aria-label="@monthTitle"
+                             style="@Styles?.DaysGrid"
+                             class="bit-dtrp-grd @Classes?.DaysGrid"
+                             @onpointerleave="HandleOnDaysPointerLeave">
+                            <div role="row" style="@Styles?.DaysHeaderRow" class="bit-dtrp-dgh @Classes?.DaysHeaderRow">
+                                @if (ShowWeekNumbers)
+                                {
+                                    <div style="@Styles?.WeekNumbersHeader" class="bit-dtrp-wlb @Classes?.WeekNumbersHeader"></div>
+                                }
 
-                        <div style="@Styles?.DaysRow" class="bit-dtrp-dgr @Classes?.DaysRow">
-                            @if (ShowWeekNumbers)
-                            {
-                                var weekNumber = GetWeekNumber(week);
-                                var title = string.Format(WeekNumberTitle, weekNumber);
-                                <div style="@Styles?.WeekNumber"
-                                     scope="row"
-                                     title="title"
-                                     aria-label="title"
-                                     class="bit-dtrp-wnm @Classes?.WeekNumber">
-                                    @weekNumber
-                                </div>
-                            }
+                                @for (var index = 0; index < 7; index++)
+                                {
+                                    var dayOfWeekName = _culture.DateTimeFormat.GetDayName(GetDayOfWeek(index));
+                                    var shortestDayOfWeekName = _culture.DateTimeFormat.GetShortestDayName(GetDayOfWeek(index));
+                                    <div role="columnheader"
+                                         title="@dayOfWeekName"
+                                         aria-label="@dayOfWeekName"
+                                         style="@Styles?.WeekDayHeader"
+                                         class="bit-dtrp-wlb @Classes?.WeekDayHeader">
+                                        @shortestDayOfWeekName[0]
+                                    </div>
+                                }
+                            </div>
 
-                            @for (var day = 0; day < 7; day++)
+                            @for (var week = 0; week < 6; week++)
                             {
-                                var date = _daysOfCurrentMonth[week, day]!.Value;
-                                var disabled = IsEnabled is false || IsWeekDayOutOfMinAndMaxDate(date);
-                                var isSelected = IsBetweenTwoSelectedDate(date);
-                                var (style, klass) = GetDayButtonCss(date);
-                                <button @onclick="() => SelectDate(date)"
-                                        type="button"
-                                        role="gridcell"
-                                        aria-readonly="true"
-                                        style="@style @Styles?.DayButton"
-                                        class="bit-dtrp-dbt@(klass) @Classes?.DayButton"
-                                        disabled="@disabled"
-                                        aria-disabled="@disabled"
-                                        tabindex="@(isSelected ? 0 : -1)"
-                                        aria-selected="@(isSelected ? "true" : "false")">
-                                    @if (DayCellTemplate is not null)
+                                //to ignore the last empty week out of month || to ignore the first whole week out of month
+                                if (_daysOfMonths[monthIndex][week, 0].HasValue is false) continue;
+
+                                <div role="row" style="@Styles?.DaysRow" class="bit-dtrp-dgr @Classes?.DaysRow">
+                                    @if (ShowWeekNumbers)
                                     {
-                                        @DayCellTemplate(GetDateTimeOfDayCell(date))
+                                        var weekNumber = GetWeekNumber(monthIndex, week);
+                                        var weekNumberTitle = string.Format(WeekNumberTitle, weekNumber);
+                                        <div style="@Styles?.WeekNumber"
+                                             role="rowheader"
+                                             title="@weekNumberTitle"
+                                             aria-label="@weekNumberTitle"
+                                             class="bit-dtrp-wnm @Classes?.WeekNumber">
+                                            @weekNumber
+                                        </div>
                                     }
-                                    else
+
+                                    @for (var day = 0; day < 7; day++)
                                     {
-                                        @GetDayOfCurrentMonth(date)
+                                        var date = _daysOfMonths[monthIndex][week, day]!.Value;
+
+                                        if (IsDayRendered(date, monthIndex) is false)
+                                        {
+                                            <div role="gridcell" style="@Styles?.DayButton" class="bit-dtrp-dbe @Classes?.DayButton"></div>
+                                            continue;
+                                        }
+
+                                        var isInMonth = IsInMonth(date, monthIndex);
+                                        var disabled = IsEnabled is false || IsDayDisabled(date);
+                                        var isSelected = IsBetweenTwoSelectedDate(date) || IsStartDaySelectedDate(date) || IsEndDaySelectedDate(date);
+                                        var isToday = isInMonth && date == today.Date;
+                                        var (style, klass) = GetDayButtonCss(date, monthIndex);
+                                        <button @onclick="() => SelectDate(date)"
+                                                @onkeydown="e => HandleDayKeyDown(e, date)"
+                                                @onpointerenter="() => HandleOnDayPointerEnter(date)"
+                                                type="button"
+                                                role="gridcell"
+                                                id="@GetDayButtonId(date)"
+                                                aria-readonly="true"
+                                                aria-current="@(isToday ? "date" : null)"
+                                                aria-label="@date.ToString(_culture.DateTimeFormat.LongDatePattern, _culture)"
+                                                style="@style @Styles?.DayButton"
+                                                class="bit-dtrp-dbt@(klass) @Classes?.DayButton"
+                                                disabled="@disabled"
+                                                aria-disabled="@disabled"
+                                                tabindex="@(isInMonth && date == focusableDay ? 0 : -1)"
+                                                aria-selected="@(isSelected ? "true" : "false")">
+                                            @if (DayCellTemplate is not null)
+                                            {
+                                                @DayCellTemplate(GetDateTimeOfDayCell(date))
+                                            }
+                                            else
+                                            {
+                                                @GetDayOfCurrentMonth(date)
+                                            }
+                                        </button>
                                     }
-                                </button>
+                                </div>
                             }
                         </div>
-                    }
-                </div>
+                    </div>
+                }
             }
 
             @if (ShowMonthPicker())
@@ -770,7 +844,7 @@
 
                             @if (TimeFormat == BitTimeFormat.TwelveHours)
                             {
-                                var amDisabled = (IsEnabled is false || IsAm(_endTimeHour) is false || IsAmPmButtonDisabled(true, false));
+                                var amDisabled = (IsEnabled is false || IsAm(_endTimeHour) is true || IsAmPmButtonDisabled(true, false));
                                 var pmDisabled = (IsEnabled is false || IsAm(_endTimeHour) is false || IsAmPmButtonDisabled(false, false));
 
                                 <div style="@Styles?.EndTimeAmPmContainer" class="bit-dtrp-tpr bit-dtrp-am-pm @Classes?.EndTimeAmPmContainer">
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
index bcad0ae6eed..818a4435ec7 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
@@ -10,8 +10,12 @@ namespace Bit.BlazorUI;
 public partial class BitDateRangePicker : BitInputBase<BitDateRangePickerValue?>
 {
     private const int MAX_WIDTH = 470;
+    private const int MONTH_WIDTH = 240;
+    private const int PRESETS_WIDTH = 130;
+    private const int MAX_MONTH_COUNT = 3;
     private const int DEFAULT_WEEK_COUNT = 6;
     private const int DEFAULT_DAY_COUNT_PER_WEEK = 7;
+    private const int MAX_EXCLUDED_SCAN_DAYS = 1100;
 
 
 
@@ -20,17 +24,34 @@ public partial class BitDateRangePicker : BitInputBase<BitDateRangePickerValue?>
     private int _currentMonth;
     private int _yearPickerEndYear;
     private int _yearPickerStartYear;
+    private bool _focusAfterRender;
+    private DateTime? _focusedDate;
+    private DateTime? _hoveredDate;
+    private HashSet<DateTime> _disabledDates = [];
+    private HashSet<DateTime> _highlightedDates = [];
+    private HashSet<DayOfWeek> _disabledDaysOfWeek = [];
     private bool _showMonthPicker = true;
     private bool _isTimePickerOverlayOnTop;
     private bool _isMonthPickerOverlayOnTop;
-    private string _monthTitle = string.Empty;
     private bool _showTimePickerAsOverlayInternal;
     private bool _showMonthPickerAsOverlayInternal;
+    private BitDateRangePickerPreset? _selectedPreset;
     private TimeZoneInfo _timeZone = TimeZoneInfo.Local;
     private CultureInfo _culture = CultureInfo.CurrentUICulture;
     private CancellationTokenSource _cancellationTokenSource = new();
-    private DotNetObjectReference<BitDateRangePicker> _dotnetObj = default!;
-    private readonly DateTime?[,] _daysOfCurrentMonth = new DateTime?[DEFAULT_WEEK_COUNT, DEFAULT_DAY_COUNT_PER_WEEK];
+    private DotNetObjectReference<BitDateRangePicker>? _dotnetObj;
+
+    // The closest excluded day on each side of the picked start date, which bounds how far the range
+    // can reach with ExcludeDisabledDates on without rescanning the span for every rendered cell.
+    private DateTime? _excludedLowerBound;
+    private DateTime? _excludedUpperBound;
+
+    // The number of months actually rendered side by side, which drops back to a single month
+    // when the viewport cannot fit the requested MonthCount.
+    private int _monthCount = 1;
+    private int _fittingMonthCount = MAX_MONTH_COUNT;
+    private string[] _monthTitles = [string.Empty];
+    private DateTime?[][,] _daysOfMonths = [new DateTime?[DEFAULT_WEEK_COUNT, DEFAULT_DAY_COUNT_PER_WEEK]];
 
     private string? _labelId;
     private string? _inputId;
@@ -99,7 +120,7 @@ private int _startTimeMinuteView
                 value = 0;
             }
 
-            if (CanChangeTime(endTimeHour: value) is false) return;
+            if (CanChangeTime(startTimeMinute: value) is false) return;
 
             _startTimeMinute = value;
 
@@ -213,6 +234,11 @@ private int _endTimeMinuteView
     /// </summary>
     [Parameter] public string? ClearButtonIconName { get; set; }
 
+    /// <summary>
+    /// The title and the aria-label of the clear button.
+    /// </summary>
+    [Parameter] public string ClearButtonTitle { get; set; } = "Clear the selected date range";
+
     /// <summary>
     /// The icon to display inside the close button.
     /// Takes precedence over <see cref="CloseButtonIconName"/> when both are set.
@@ -229,6 +255,13 @@ private int _endTimeMinuteView
     /// </summary>
     [Parameter] public string CloseButtonTitle { get; set; } = "Close date range picker";
 
+    /// <summary>
+    /// The general color of the DateRangePicker that applies to the today day button, the selected range,
+    /// the highlighted current month and the selected AM/PM buttons.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public BitColor? Color { get; set; }
+
     /// <summary>
     /// CultureInfo for the DateRangePicker.
     /// </summary>
@@ -246,6 +279,50 @@ private int _endTimeMinuteView
     /// </summary>
     [Parameter] public RenderFragment<DateTimeOffset>? DayCellTemplate { get; set; }
 
+    /// <summary>
+    /// The list of dates that are disabled (not selectable) in the DateRangePicker, in addition to MinDate and MaxDate.
+    /// </summary>
+    [Parameter]
+    [CallOnSet(nameof(OnSetParameters))]
+    public IEnumerable<DateTimeOffset>? DisabledDates { get; set; }
+
+    /// <summary>
+    /// The days of the week that are disabled (not selectable) in the DateRangePicker (e.g. weekends).
+    /// </summary>
+    [Parameter]
+    [CallOnSet(nameof(OnSetParameters))]
+    public IEnumerable<DayOfWeek>? DisabledDaysOfWeek { get; set; }
+
+    /// <summary>
+    /// Whether the disabled days are excluded from the selected range. By default a range simply spans over
+    /// the disabled days between its two ends. When enabled, once the start date is picked every day whose
+    /// range would contain a disabled day becomes unselectable, so the produced range never covers one.
+    /// </summary>
+    [Parameter]
+    [CallOnSet(nameof(OnSetParameters))]
+    public bool ExcludeDisabledDates { get; set; }
+
+    /// <summary>
+    /// Overrides the first day of the week in the day picker. If not set, the first day of the week of the Culture is used.
+    /// </summary>
+    [Parameter]
+    [CallOnSet(nameof(OnSetParameters))]
+    public DayOfWeek? FirstDayOfWeek { get; set; }
+
+    /// <summary>
+    /// Whether the day picker should always render six weeks, filling the extra rows with the days of the adjacent months,
+    /// to keep the calendar height fixed while navigating between months. It is always on when <see cref="MonthCount"/>
+    /// renders more than one month, so the months keep an even height next to each other.
+    /// </summary>
+    [Parameter]
+    [CallOnSet(nameof(OnSetParameters))]
+    public bool FixedWeeks { get; set; }
+
+    /// <summary>
+    /// Custom function to provide additional CSS classes for each day button of the DateRangePicker.
+    /// </summary>
+    [Parameter] public Func<DateTimeOffset, string?>? GetDayClass { get; set; }
+
     /// <summary>
     /// The title of the Go to next month button (tooltip).
     /// </summary>
@@ -319,6 +396,13 @@ private int _endTimeMinuteView
     /// </summary>
     [Parameter] public bool HighlightCurrentMonth { get; set; }
 
+    /// <summary>
+    /// The list of dates that are highlighted (marked) in the day picker of the DateRangePicker.
+    /// </summary>
+    [Parameter]
+    [CallOnSet(nameof(OnSetParameters))]
+    public IEnumerable<DateTimeOffset>? HighlightedDates { get; set; }
+
     /// <summary>
     /// Whether the month picker should highlight the selected month.
     /// </summary>
@@ -368,10 +452,19 @@ private int _endTimeMinuteView
     /// </summary>
     [Parameter] public string? InvalidErrorMessage { get; set; }
 
+    /// <summary>
+    /// Custom function to determine if a specific date is disabled (not selectable) in the DateRangePicker.
+    /// </summary>
+    [Parameter]
+    [CallOnSet(nameof(OnSetParameters))]
+    public Func<DateTimeOffset, bool>? IsDateDisabled { get; set; }
+
     /// <summary>
     /// Whether the month picker is shown or hidden.
     /// </summary>
-    [Parameter] public bool IsMonthPickerVisible { get; set; } = true;
+    [Parameter]
+    [CallOnSet(nameof(OnSetParameters))]
+    public bool IsMonthPickerVisible { get; set; } = true;
 
     /// <summary>
     /// Whether or not the DateRangePicker's callout is open.
@@ -408,11 +501,26 @@ private int _endTimeMinuteView
     /// </summary>
     [Parameter] public RenderFragment<DateTimeOffset>? MonthCellTemplate { get; set; }
 
+    /// <summary>
+    /// The number of consecutive months rendered side by side in the day picker (1 to 3), which makes
+    /// picking a range that spans two months a single move. It falls back to a single month whenever
+    /// the viewport is not wide enough to fit them all.
+    /// </summary>
+    [Parameter]
+    [CallOnSet(nameof(OnSetParameters))]
+    public int MonthCount { get; set; } = 1;
+
     /// <summary>
     /// The title of the month picker's toggle (tooltip).
     /// </summary>
     [Parameter] public string MonthPickerToggleTitle { get; set; } = "{0}, change month";
 
+    /// <summary>
+    /// The text rendered in place of a date that has not been picked yet, which is also the token
+    /// accepted back for an open-ended range when <see cref="AllowTextInput"/> is enabled.
+    /// </summary>
+    [Parameter] public string NoDateText { get; set; } = "---";
+
     /// <summary>
     /// The icon to display inside the next-month navigation button.
     /// Takes precedence over <see cref="NextMonthNavIconName"/> when both are set.
@@ -451,6 +559,12 @@ private int _endTimeMinuteView
     /// </summary>
     [Parameter] public EventCallback OnClick { get; set; }
 
+    /// <summary>
+    /// Callback for when the displayed month of the day picker changes.
+    /// The argument is the first day of the newly displayed month.
+    /// </summary>
+    [Parameter] public EventCallback<DateTimeOffset> OnMonthChange { get; set; }
+
     /// <summary>
     /// The callback for focusing the DateRangePicker's input.
     /// </summary>
@@ -466,11 +580,27 @@ private int _endTimeMinuteView
     /// </summary>
     [Parameter] public EventCallback OnFocusOut { get; set; }
 
+    /// <summary>
+    /// The callback for when a preset is selected. The argument is the selected preset.
+    /// </summary>
+    [Parameter] public EventCallback<BitDateRangePickerPreset> OnPresetSelect { get; set; }
+
     /// <summary>
     /// The placeholder text of the DateRangePicker's input.
     /// </summary>
     [Parameter] public string Placeholder { get; set; } = string.Empty;
 
+    /// <summary>
+    /// The list of shortcuts, rendered next to the calendar, that fill the DateRangePicker
+    /// with a predefined range (e.g. "Last 7 days").
+    /// </summary>
+    [Parameter] public IEnumerable<BitDateRangePickerPreset>? Presets { get; set; }
+
+    /// <summary>
+    /// The aria label of the presets' container for screen readers.
+    /// </summary>
+    [Parameter] public string PresetsAriaLabel { get; set; } = "Predefined date ranges";
+
     /// <summary>
     /// The icon to display inside the previous-month navigation button.
     /// Takes precedence over <see cref="PrevMonthNavIconName"/> when both are set.
@@ -509,6 +639,11 @@ private int _endTimeMinuteView
     /// </summary>
     [Parameter] public bool Responsive { get; set; }
 
+    /// <summary>
+    /// The aria-atomic live text announcing the currently selected date range, formatted with the value of the input.
+    /// </summary>
+    [Parameter] public string SelectedDateAriaAtomic { get; set; } = "Selected date range {0}";
+
     /// <summary>
     /// Whether the DateRangePicker's close button should be shown or not.
     /// </summary>
@@ -549,6 +684,13 @@ private int _endTimeMinuteView
     /// </summary>
     [Parameter] public string ShowTimePickerTitle { get; set; } = "Show time picker";
 
+    /// <summary>
+    /// Whether the days of the previous and next months, filling the first and last week rows, should be rendered.
+    /// It has no effect when <see cref="MonthCount"/> renders more than one month, since those days would then
+    /// show up in two grids at once.
+    /// </summary>
+    [Parameter] public bool ShowOutsideDays { get; set; } = true;
+
     /// <summary>
     /// Whether the week number (weeks 1 to 53) should be shown before each week row.
     /// </summary>
@@ -652,6 +794,12 @@ private int _endTimeMinuteView
     /// </summary>
     [Parameter] public TimeSpan? MaxRange { get; set; }
 
+    /// <summary>
+    /// The minimum number of days that the selected range must span in the DateRangePicker.
+    /// Only the days part of the provided TimeSpan is considered.
+    /// </summary>
+    [Parameter] public TimeSpan? MinRange { get; set; }
+
     /// <summary>
     /// Whether the clear button should be shown or not when the DateRangePicker has a value.
     /// </summary>
@@ -695,6 +843,13 @@ private int _endTimeMinuteView
     [CallOnSet(nameof(OnSetParameters))]
     public TimeZoneInfo? TimeZone { get; set; }
 
+    /// <summary>
+    /// Overrides the date considered as today by the DateRangePicker, which is <c>DateTimeOffset.Now</c> by default.
+    /// </summary>
+    [Parameter]
+    [CallOnSet(nameof(OnSetParameters))]
+    public DateTimeOffset? Today { get; set; }
+
     /// <summary>
     /// Whether or not the Text field of the DateRangePicker is underlined.
     /// </summary>
@@ -706,6 +861,11 @@ private int _endTimeMinuteView
     /// </summary>
     [Parameter] public string ValueFormat { get; set; } = "Start: {0} - End: {1}";
 
+    /// <summary>
+    /// The rule used to calculate the week numbers. If not set, <c>CalendarWeekRule.FirstFullWeek</c> is used.
+    /// </summary>
+    [Parameter] public CalendarWeekRule? WeekNumberRule { get; set; }
+
     /// <summary>
     /// The title of the week number (tooltip).
     /// </summary>
@@ -745,22 +905,13 @@ public async Task _CloseCalloutBeforeAnotherCalloutIsOpened()
     }
 
     [JSInvokable("OnStart")]
-    public async Task _OnStart(decimal startX, decimal startY)
-    {
-
-    }
+    public Task _OnStart(decimal startX, decimal startY) => Task.CompletedTask;
 
     [JSInvokable("OnMove")]
-    public async Task _OnMove(decimal diffX, decimal diffY)
-    {
-
-    }
+    public Task _OnMove(decimal diffX, decimal diffY) => Task.CompletedTask;
 
     [JSInvokable("OnEnd")]
-    public async Task _OnEnd(decimal diffX, decimal diffY)
-    {
-
-    }
+    public Task _OnEnd(decimal diffX, decimal diffY) => Task.CompletedTask;
 
     [JSInvokable("OnClose")]
     public async Task _OnClose()
@@ -784,6 +935,8 @@ protected override void RegisterCssClasses()
     {
         ClassBuilder.Register(() => Classes?.Root);
 
+        ClassBuilder.Register(() => GetColorClass());
+
         ClassBuilder.Register(() => (Dir is null && _culture.TextInfo.IsRightToLeft) ? "bit-rtl" : string.Empty);
 
         ClassBuilder.Register(() => IconLocation is BitIconLocation.Left ? "bit-dtrp-lic" : string.Empty);
@@ -827,19 +980,40 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         await base.OnAfterRenderAsync(firstRender);
 
-        if (firstRender is false) return;
+        if (firstRender)
+        {
+            _dotnetObj = DotNetObjectReference.Create(this);
 
-        _dotnetObj = DotNetObjectReference.Create(this);
+            try
+            {
+                // Prevents the default behavior (scrolling) of the navigation keys handled by the
+                // day buttons' keydown handlers, since Blazor cannot conditionally preventDefault per key.
+                await _js.BitCalendarsSetup(_calloutId);
+            }
+            catch (JSDisconnectedException) { } // we can ignore this exception here
 
-        if (Responsive is false) return;
+            if (Responsive)
+            {
+                await _js.BitSwipesSetup(
+                    id: _calloutId,
+                    trigger: 0.25m,
+                    position: BitPanelPosition.Top,
+                    isRtl: Dir is BitDir.Rtl,
+                    orientationLock: BitSwipeOrientation.Vertical,
+                    dotnetObj: _dotnetObj);
+            }
+        }
 
-        await _js.BitSwipesSetup(
-            id: _calloutId,
-            trigger: 0.25m,
-            position: BitPanelPosition.Top,
-            isRtl: Dir is BitDir.Rtl,
-            orientationLock: BitSwipeOrientation.Vertical,
-            dotnetObj: _dotnetObj);
+        if (_focusAfterRender && _focusedDate.HasValue)
+        {
+            _focusAfterRender = false;
+
+            try
+            {
+                await _js.BitCalendarsFocusDay(GetDayButtonId(_focusedDate.Value));
+            }
+            catch (JSDisconnectedException) { } // we can ignore this exception here
+        }
     }
 
     protected override bool TryParseValueFromString(
@@ -847,19 +1021,19 @@ protected override bool TryParseValueFromString(
         [MaybeNullWhen(false)] out BitDateRangePickerValue? result,
         [NotNullWhen(false)] out string? validationErrorMessage)
     {
-        //if (value.HasNoValue())
-        //{
-        //    result = null;
-        //    validationErrorMessage = null;
-        //    return true;
-        //}
+        if (value.HasNoValue())
+        {
+            result = null;
+            validationErrorMessage = null;
+            return true;
+        }
 
-        //if (DateTime.TryParseExact(value, DateFormat ?? Culture.DateTimeFormat.ShortDatePattern, Culture, DateTimeStyles.None, out DateTime parsedValue))
-        //{
-        //    result = new DateTimeOffset(parsedValue, _timeZone.GetUtcOffset(parsedValue));
-        //    validationErrorMessage = null;
-        //    return true;
-        //}
+        if (TryParseRange(value!, out var parsedValue))
+        {
+            result = parsedValue;
+            validationErrorMessage = null;
+            return true;
+        }
 
         result = default;
         validationErrorMessage = InvalidErrorMessage.HasValue() ? InvalidErrorMessage! : $"The {DisplayName ?? FieldIdentifier.FieldName} field is not valid.";
@@ -871,13 +1045,203 @@ protected override bool TryParseValueFromString(
         if (value is null) return null;
         if (value.StartDate.HasValue is false && value.EndDate.HasValue is false) return null;
 
-        return string.Format(_culture, ValueFormat,
-                            value.StartDate.GetValueOrDefault(DateTimeOffset.Now)
-                                           .ToString(DateFormat ?? _culture.DateTimeFormat.ShortDatePattern, _culture),
-                            value.EndDate.HasValue ?
-                                value.EndDate.GetValueOrDefault(DateTimeOffset.Now)
-                                             .ToString(DateFormat ?? _culture.DateTimeFormat.ShortDatePattern, _culture)
-                                : "---");
+        return string.Format(_culture, ValueFormat, FormatDate(value.StartDate), FormatDate(value.EndDate));
+    }
+
+    private string FormatDate(DateTimeOffset? date)
+    {
+        return date.HasValue
+                ? date.Value.ToString(DateFormat ?? GetDefaultDateFormat(), _culture)
+                : NoDateText;
+    }
+
+    // Splits the incoming text with the literal parts of the ValueFormat and parses the two
+    // remaining date tokens with the DateFormat (or the culture's default pattern).
+    private bool TryParseRange(string value, out BitDateRangePickerValue? result)
+    {
+        result = null;
+
+        var startIndex = ValueFormat.IndexOf("{0}", StringComparison.Ordinal);
+        var endIndex = ValueFormat.IndexOf("{1}", StringComparison.Ordinal);
+
+        if (startIndex < 0 || endIndex < 0 || endIndex < startIndex) return false;
+
+        var prefix = ValueFormat[..startIndex];
+        var separator = ValueFormat[(startIndex + 3)..endIndex];
+        var suffix = ValueFormat[(endIndex + 3)..];
+
+        if (separator.Length == 0) return false;
+
+        var text = value.Trim();
+
+        if (prefix.Length > 0)
+        {
+            if (text.StartsWith(prefix, StringComparison.OrdinalIgnoreCase) is false) return false;
+            text = text[prefix.Length..];
+        }
+
+        if (suffix.Length > 0)
+        {
+            if (text.EndsWith(suffix, StringComparison.OrdinalIgnoreCase) is false) return false;
+            text = text[..^suffix.Length];
+        }
+
+        var separatorIndex = text.IndexOf(separator, StringComparison.OrdinalIgnoreCase);
+        if (separatorIndex < 0) return false;
+
+        var startText = text[..separatorIndex];
+        var endText = text[(separatorIndex + separator.Length)..];
+
+        if (TryParseDate(startText, out var startDate) is false) return false;
+
+        DateTimeOffset? endDate = null;
+        if (IsEmptyDateToken(endText) is false)
+        {
+            if (TryParseDate(endText, out var parsedEndDate) is false) return false;
+
+            endDate = parsedEndDate;
+        }
+
+        if (endDate.HasValue && endDate < startDate)
+        {
+            (startDate, endDate) = (endDate.Value, startDate);
+        }
+
+        result = new BitDateRangePickerValue { StartDate = startDate, EndDate = endDate };
+        return true;
+    }
+
+    private bool IsEmptyDateToken(string text)
+    {
+        text = text.Trim();
+
+        return text.Length == 0 || string.Equals(text, NoDateText, StringComparison.OrdinalIgnoreCase);
+    }
+
+    private bool TryParseDate(string text, out DateTimeOffset result)
+    {
+        result = default;
+
+        text = text.Trim();
+        if (text.Length == 0) return false;
+
+        var parsed = DateTime.TryParseExact(text, DateFormat ?? GetDefaultDateFormat(), _culture, DateTimeStyles.None, out DateTime parsedValue);
+
+        // When a custom DateFormat is not set and the time picker is enabled, the default pattern
+        // includes the time portion. Fall back to a date-only parse so users can still type a bare
+        // date (e.g. via AllowTextInput) without being forced to include the time.
+        if (parsed is false && DateFormat is null && ShowTimePicker)
+        {
+            parsed = DateTime.TryParseExact(text, _culture.DateTimeFormat.ShortDatePattern, _culture, DateTimeStyles.None, out parsedValue);
+        }
+
+        if (parsed is false) return false;
+
+        result = new DateTimeOffset(parsedValue, _timeZone.GetUtcOffset(parsedValue));
+        return true;
+    }
+
+    private string GetDefaultDateFormat()
+    {
+        var pattern = _culture.DateTimeFormat.ShortDatePattern;
+
+        if (ShowTimePicker)
+        {
+            pattern = $"{pattern} {GetTimePattern()}";
+        }
+
+        return pattern;
+    }
+
+    private string GetTimePattern()
+    {
+        var shortTimePattern = _culture.DateTimeFormat.ShortTimePattern;
+
+        // A lowercase 'h' hour specifier (outside any quoted literal) indicates the culture uses a
+        // 12-hour clock, an uppercase 'H' a 24-hour clock.
+        var isCulture12Hours = HasSpecifier(shortTimePattern, 'h');
+
+        if (TimeFormat == BitTimeFormat.TwelveHours)
+        {
+            if (isCulture12Hours) return shortTimePattern;
+
+            // Convert the culture's 24-hour pattern to 12-hour by switching the hour specifier
+            // and appending the AM/PM designator.
+            return $"{ReplaceSpecifier(shortTimePattern, 'H', 'h')} tt";
+        }
+
+        if (isCulture12Hours is false) return shortTimePattern;
+
+        // Convert the culture's 12-hour pattern to 24-hour by switching the hour specifier
+        // and removing the AM/PM ('t'/'tt') designator.
+        return RemoveSpecifier(ReplaceSpecifier(shortTimePattern, 'h', 'H'), 't');
+    }
+
+    // Determines whether the given format specifier appears outside of any quoted literal.
+    private static bool HasSpecifier(string pattern, char specifier)
+    {
+        var quote = '\0';
+        foreach (var ch in pattern)
+        {
+            if (quote != '\0')
+            {
+                if (ch == quote) quote = '\0';
+                continue;
+            }
+
+            if (ch is '\'' or '"') { quote = ch; continue; }
+
+            if (ch == specifier) return true;
+        }
+
+        return false;
+    }
+
+    // Replaces the given format specifier with another, leaving quoted literals untouched.
+    private static string ReplaceSpecifier(string pattern, char from, char to)
+    {
+        var builder = new StringBuilder(pattern.Length);
+        var quote = '\0';
+        foreach (var ch in pattern)
+        {
+            if (quote != '\0')
+            {
+                builder.Append(ch);
+                if (ch == quote) quote = '\0';
+                continue;
+            }
+
+            if (ch is '\'' or '"') { quote = ch; builder.Append(ch); continue; }
+
+            builder.Append(ch == from ? to : ch);
+        }
+
+        return builder.ToString();
+    }
+
+    // Removes the given format specifier (and any resulting redundant whitespace), leaving quoted literals untouched.
+    private static string RemoveSpecifier(string pattern, char specifier)
+    {
+        var builder = new StringBuilder(pattern.Length);
+        var quote = '\0';
+        foreach (var ch in pattern)
+        {
+            if (quote != '\0')
+            {
+                builder.Append(ch);
+                if (ch == quote) quote = '\0';
+                continue;
+            }
+
+            if (ch is '\'' or '"') { quote = ch; builder.Append(ch); continue; }
+
+            if (ch == specifier) continue;
+
+            builder.Append(ch);
+        }
+
+        // Collapse any double spaces left behind by the removed designator and trim the edges.
+        return builder.ToString().Replace("  ", " ").Trim();
     }
 
 
@@ -892,11 +1256,27 @@ private async Task HandleOnClick()
         ResetPickersState();
 
         var bodyWidth = await _js.BitUtilsGetBodyWidth();
-        var notEnoughWidthAvailable = bodyWidth < MAX_WIDTH;
+
+        // The extra months are the first thing to go on a narrow viewport, and only what is left
+        // decides whether the month and time pickers still have to collapse into overlays.
+        _fittingMonthCount = MAX_MONTH_COUNT;
+        while (_fittingMonthCount > 1 && bodyWidth < GetMaxWidth(_fittingMonthCount))
+        {
+            _fittingMonthCount--;
+        }
+
+        var fittingMonthCount = Math.Min(Math.Clamp(MonthCount, 1, MAX_MONTH_COUNT), _fittingMonthCount);
+        if (fittingMonthCount != _monthCount)
+        {
+            _monthCount = fittingMonthCount;
+            GenerateMonthData(_currentYear, _currentMonth);
+        }
+
+        var notEnoughWidthAvailable = bodyWidth < GetMaxWidth();
 
         if (_showMonthPickerAsOverlayInternal is false)
         {
-            _showMonthPickerAsOverlayInternal = notEnoughWidthAvailable;
+            _showMonthPickerAsOverlayInternal = IsMonthPickerVisible && notEnoughWidthAvailable;
         }
 
         if (_showMonthPickerAsOverlayInternal)
@@ -916,7 +1296,7 @@ private async Task HandleOnClick()
 
         if (_showMonthPickerAsOverlayInternal is false &&
             _showTimePickerAsOverlayInternal is false &&
-            ShowTimePicker)
+            ShowTimePicker && IsMonthPickerVisible)
         {
             _showMonthPickerAsOverlayInternal = true;
         }
@@ -926,6 +1306,14 @@ _showTimePickerAsOverlayInternal is false &&
             CheckCurrentCalendarMatchesCurrentValue();
         }
 
+        // The callout is a dialog, so the keyboard focus moves into the day grid with it. An editable
+        // input keeps the focus instead, since the user may well want to go on typing the range.
+        if (AllowTextInput is false)
+        {
+            _focusedDate = GetFocusableDay();
+            _focusAfterRender = true;
+        }
+
         StateHasChanged();
 
         await ToggleCallout();
@@ -963,26 +1351,21 @@ private async Task HandleOnFocus()
         await OnFocus.InvokeAsync();
     }
 
-    private async Task HandleOnChange(ChangeEventArgs e)
+    private void HandleOnChange(ChangeEventArgs e)
     {
         if (IsEnabled is false || InvalidValueBinding()) return;
-        if (AllowTextInput is false) return;
-
-        if (CurrentValue is null)
-        {
-            CurrentValueAsString = e.Value?.ToString();
-            return;
-        }
+        if (AllowTextInput is false || ReadOnly) return;
 
-        var oldStartValue = CurrentValue.StartDate.GetValueOrDefault(DateTimeOffset.Now);
-        var oldEndValue = CurrentValue.EndDate.GetValueOrDefault(DateTimeOffset.Now);
+        var now = Today ?? DateTimeOffset.Now;
+        var oldStartValue = CurrentValue?.StartDate.GetValueOrDefault(now) ?? now;
+        var oldEndValue = CurrentValue?.EndDate.GetValueOrDefault(now) ?? now;
 
         CurrentValueAsString = e.Value?.ToString();
 
         if (CurrentValue is null) return;
 
-        var curStartValue = CurrentValue.StartDate.GetValueOrDefault(DateTimeOffset.Now);
-        var curEndValue = CurrentValue.EndDate.GetValueOrDefault(DateTimeOffset.Now);
+        var curStartValue = CurrentValue.StartDate.GetValueOrDefault(now);
+        var curEndValue = CurrentValue.EndDate.GetValueOrDefault(now);
 
         if (IsOpen && (oldStartValue != curStartValue || oldEndValue != curEndValue))
         {
@@ -990,7 +1373,7 @@ private async Task HandleOnChange(ChangeEventArgs e)
 
             if (curStartValue.Year != oldStartValue.Year || curEndValue.Year != oldEndValue.Year)
             {
-                _currentYear = curStartValue.Year;
+                _currentYear = _culture.Calendar.GetYear(curStartValue.DateTime);
                 ChangeYearRanges(_currentYear - 1);
             }
         }
@@ -1001,25 +1384,22 @@ private async Task HandleOnClearButtonClick()
         if (ReadOnly) return;
         if (IsEnabled is false) return;
 
+        // Clearing the value runs OnSetParameters, which puts the four time fields back to the ones
+        // of StartingValue (or to the defaults) and re-applies the MaxRange clamp on its own.
         CurrentValue = null;
 
-        _startTimeHour = 0;
-        _startTimeMinute = 0;
-
-        _endTimeHour = MaxRange.HasValue &&
-                       MaxRange.Value.TotalHours < 24
-                       ? (int)MaxRange.Value.TotalHours
-                       : 23;
-        _endTimeMinute = MaxRange.HasValue &&
-                         MaxRange.Value.TotalMinutes < 60
-                         ? (int)MaxRange.Value.TotalMinutes
-                         : 59;
+        _hoveredDate = null;
+        _focusedDate = null;
 
         await InputElement.FocusAsync();
     }
 
     private void HandleOnValueChanged(object? sender, EventArgs args)
     {
+        // Any change coming from anywhere but a preset button leaves no preset applied.
+        // SelectPreset re-marks its own preset right after assigning the value.
+        _selectedPreset = null;
+
         OnSetParameters();
     }
 
@@ -1027,6 +1407,9 @@ private void OnSetParameters()
     {
         _timeZone = TimeZone ?? TimeZoneInfo.Local;
         _culture = Culture ?? CultureInfo.CurrentUICulture;
+        _monthCount = Math.Min(Math.Clamp(MonthCount, 1, MAX_MONTH_COUNT), _fittingMonthCount);
+
+        BuildDatesLookups();
 
         if (CurrentValue is not null)
         {
@@ -1043,10 +1426,14 @@ private void OnSetParameters()
 
             if (CurrentValue.EndDate.HasValue && CurrentValue.EndDate < startDateTime)
             {
-                CurrentValue.EndDate = null;
+                // Replaces the value instead of clearing the end date in place, so the instance
+                // handed in through the Value binding is never mutated behind the consumer's back.
+                CurrentValue = new BitDateRangePickerValue { StartDate = CurrentValue.StartDate };
             }
         }
 
+        BuildExcludedBounds();
+
         var startDateHasValue = CurrentValue?.StartDate.HasValue ?? false;
         var endDateHasValue = CurrentValue?.EndDate.HasValue ?? false;
         var startingValueStartDateHasValue = StartingValue?.StartDate.HasValue ?? false;
@@ -1091,8 +1478,23 @@ private void OnSetParameters()
                            ? CurrentValue!.StartDate!.Value.DateTime
                            : (startingValueStartDateHasValue
                              ? StartingValue!.StartDate!.Value.DateTime
-                             : DateTimeOffset.Now.DateTime);
-        GenerateCalendarData(calendarDate);
+                             : GetToday());
+
+        // With several months on screen the start date is very often already one of them, and
+        // rebasing the grid on its month would slide the whole calendar for no reason.
+        var startDateIsAlreadyVisible = _monthCount > 1 &&
+                                        _daysOfMonths.Length == _monthCount &&
+                                        startDateHasValue &&
+                                        IsInRenderedMonths(GetDateTime(CurrentValue!.StartDate!.Value).Date);
+
+        if (startDateIsAlreadyVisible)
+        {
+            GenerateMonthData(_currentYear, _currentMonth);
+        }
+        else
+        {
+            GenerateCalendarData(calendarDate);
+        }
 
         if (Standalone)
         {
@@ -1110,7 +1512,7 @@ private void OnSetParameters()
 
             if (_showMonthPickerAsOverlayInternal is false &&
                 _showTimePickerAsOverlayInternal is false &&
-                ShowTimePicker)
+                ShowTimePicker && IsMonthPickerVisible)
             {
                 _showMonthPickerAsOverlayInternal = true;
             }
@@ -1126,10 +1528,16 @@ private async Task SelectDate(DateTime selectedDate)
     {
         if (ReadOnly) return;
         if (IsEnabled is false || InvalidValueBinding()) return;
-        if (IsOpenHasBeenSet && IsOpenChanged.HasDelegate is false) return;
-        if (IsWeekDayOutOfMinAndMaxDate(selectedDate)) return;
+        if (IsOpenHasBeenSet && IsOpenChanged.HasDelegate is false && Standalone is false) return;
+        if (IsDayDisabled(selectedDate)) return;
+
+        _hoveredDate = null;
+        _focusedDate = selectedDate;
 
-        var curValue = CurrentValue ?? new();
+        // Works on a copy so the instance handed in through the Value binding is never mutated in place.
+        var curValue = CurrentValue is null
+                        ? new BitDateRangePickerValue()
+                        : new BitDateRangePickerValue { StartDate = CurrentValue.StartDate, EndDate = CurrentValue.EndDate };
 
         // reset the current state if both start and end dates have values!
         if (curValue.StartDate.HasValue && curValue.EndDate.HasValue)
@@ -1174,7 +1582,7 @@ private async Task SelectDate(DateTime selectedDate)
 
         if (curValue.EndDate.HasValue && MaxRange.HasValue)
         {
-            var maxDate = new DateTimeOffset(GetMaxEndDate(), curValue.EndDate.Value.Offset);
+            var maxDate = new DateTimeOffset(GetMaxEndDate(curValue.StartDate), curValue.EndDate.Value.Offset);
 
             if (maxDate < curValue.EndDate)
             {
@@ -1190,16 +1598,100 @@ private async Task SelectDate(DateTime selectedDate)
             EndDate = curValue.EndDate
         };
 
-        _currentMonth = _culture.Calendar.GetMonth(selectedDate);
+        var previousYear = _currentYear;
+        var previousMonth = _currentMonth;
+
+        // Keeps the clicked day visible without dragging the grid away from where it already is:
+        // only a day of an adjacent month (rendered as an outside day) moves the calendar, and the
+        // year has to travel with the month so a December-to-January pick does not jump a year back.
+        if (IsInRenderedMonths(selectedDate) is false)
+        {
+            _currentYear = _culture.Calendar.GetYear(selectedDate);
+            _currentMonth = _culture.Calendar.GetMonth(selectedDate);
+        }
 
         GenerateMonthData(_currentYear, _currentMonth);
+
+        await NotifyMonthChange(previousYear, previousMonth);
+    }
+
+    private async Task SelectPreset(BitDateRangePickerPreset preset)
+    {
+        if (ReadOnly) return;
+        if (IsEnabled is false || preset.IsEnabled is false || InvalidValueBinding()) return;
+        if (IsOpenHasBeenSet && IsOpenChanged.HasDelegate is false && Standalone is false) return;
+
+        var presetValue = preset.ValueProvider is not null ? preset.ValueProvider() : preset.Value;
+        if (presetValue is null) return;
+
+        _hoveredDate = null;
+        _focusedDate = presetValue.StartDate.HasValue ? GetDateTime(presetValue.StartDate.Value).Date : null;
+
+        CurrentValue = new BitDateRangePickerValue
+        {
+            StartDate = presetValue.StartDate,
+            EndDate = presetValue.EndDate
+        };
+
+        // A ValueProvider is re-evaluated on every call and a relative range therefore never compares
+        // equal to the stored value down to the tick, so the applied preset is remembered instead.
+        _selectedPreset = preset;
+
+        CheckCurrentCalendarMatchesCurrentValue();
+
+        await OnPresetSelect.InvokeAsync(preset);
+
+        if (AutoClose && Standalone is false)
+        {
+            await AssignIsOpen(false);
+
+            await ToggleCallout();
+        }
+    }
+
+    private bool IsPresetSelected(BitDateRangePickerPreset preset)
+    {
+        if (CurrentValue is null) return false;
+
+        if (ReferenceEquals(preset, _selectedPreset)) return true;
+
+        var presetValue = preset.ValueProvider is not null ? preset.ValueProvider() : preset.Value;
+        if (presetValue is null) return false;
+
+        return presetValue.StartDate == CurrentValue.StartDate && presetValue.EndDate == CurrentValue.EndDate;
+    }
+
+    private async Task HandleOnInputKeyDown(KeyboardEventArgs e)
+    {
+        if (Standalone) return;
+        if (IsEnabled is false) return;
+
+        if (e.Key == "Escape")
+        {
+            if (IsOpen)
+            {
+                await CloseCallout();
+            }
+
+            return;
+        }
+
+        // The input is a combobox, so it must be able to open its dialog from the keyboard too.
+        // Enter and Space are left to the browser whenever the text input is editable.
+        if (IsOpen is false && (e.Key is "ArrowDown" || ((e.Key is "Enter" or " ") && AllowTextInput is false)))
+        {
+            await HandleOnClick();
+        }
     }
 
-    private void SelectMonth(int month)
+    private async Task SelectMonth(int month)
     {
         if (IsEnabled is false) return;
         if (IsMonthOutOfMinAndMaxDate(month)) return;
 
+        var previousYear = _currentYear;
+        var previousMonth = _currentMonth;
+
         _currentMonth = month;
 
         GenerateMonthData(_currentYear, _currentMonth);
@@ -1208,13 +1700,18 @@ private void SelectMonth(int month)
         {
             ToggleMonthPickerOverlay();
         }
+
+        await NotifyMonthChange(previousYear, previousMonth);
     }
 
-    private void SelectYear(int year)
+    private async Task SelectYear(int year)
     {
         if (IsEnabled is false) return;
         if (IsYearOutOfMinAndMaxDate(year)) return;
 
+        var previousYear = _currentYear;
+        var previousMonth = _currentMonth;
+
         _currentYear = year;
 
         ChangeYearRanges(_currentYear - 1);
@@ -1222,6 +1719,8 @@ private void SelectYear(int year)
         GenerateMonthData(_currentYear, _currentMonth);
 
         ToggleBetweenMonthAndYearPicker();
+
+        await NotifyMonthChange(previousYear, previousMonth);
     }
 
     private void ToggleBetweenMonthAndYearPicker()
@@ -1231,11 +1730,14 @@ private void ToggleBetweenMonthAndYearPicker()
         _showMonthPicker = !_showMonthPicker;
     }
 
-    private void HandleMonthChange(bool isNext)
+    private async Task HandleMonthChange(bool isNext)
     {
         if (IsEnabled is false) return;
         if (CanChangeMonth(isNext) is false) return;
 
+        var previousYear = _currentYear;
+        var previousMonth = _currentMonth;
+
         if (isNext)
         {
             if (_currentMonth < 12)
@@ -1262,16 +1764,23 @@ private void HandleMonthChange(bool isNext)
         }
 
         GenerateMonthData(_currentYear, _currentMonth);
+
+        await NotifyMonthChange(previousYear, previousMonth);
     }
 
-    private void HandleYearChange(bool isNext)
+    private async Task HandleYearChange(bool isNext)
     {
         if (IsEnabled is false) return;
         if (CanChangeYear(isNext) is false) return;
 
+        var previousYear = _currentYear;
+        var previousMonth = _currentMonth;
+
         _currentYear += isNext ? +1 : -1;
 
         GenerateMonthData(_currentYear, _currentMonth);
+
+        await NotifyMonthChange(previousYear, previousMonth);
     }
 
     private void HandleYearRangeChange(bool isNext)
@@ -1284,11 +1793,16 @@ private void HandleYearRangeChange(bool isNext)
         ChangeYearRanges(fromYear);
     }
 
-    private void HandleGoToToday()
+    private async Task HandleGoToToday()
     {
         if (IsEnabled is false) return;
 
-        GenerateCalendarData(DateTime.Now);
+        var previousYear = _currentYear;
+        var previousMonth = _currentMonth;
+
+        GenerateCalendarData(GetToday());
+
+        await NotifyMonthChange(previousYear, previousMonth);
     }
 
     private void GenerateCalendarData(DateTime dateTime)
@@ -1302,15 +1816,46 @@ private void GenerateCalendarData(DateTime dateTime)
         GenerateMonthData(_currentYear, _currentMonth);
     }
 
+    // Fills the grid of every rendered month, starting from the given one.
     private void GenerateMonthData(int year, int month)
     {
-        _monthTitle = $"{_culture.DateTimeFormat.GetMonthName(month)} {year}";
+        if (_daysOfMonths.Length != _monthCount)
+        {
+            _daysOfMonths = new DateTime?[_monthCount][,];
+            for (var i = 0; i < _monthCount; i++)
+            {
+                _daysOfMonths[i] = new DateTime?[DEFAULT_WEEK_COUNT, DEFAULT_DAY_COUNT_PER_WEEK];
+            }
+
+            _monthTitles = new string[_monthCount];
+        }
+
+        for (var i = 0; i < _monthCount; i++)
+        {
+            var (y, m) = AddMonths(year, month, i);
+
+            GenerateSingleMonthData(i, y, m);
+        }
+    }
+
+    // Walks the (year, month) pair the given number of months forward or backward.
+    private static (int year, int month) AddMonths(int year, int month, int offset)
+    {
+        var total = ((year * 12) + (month - 1)) + offset;
+
+        return (total / 12, (total % 12) + 1);
+    }
+
+    private void GenerateSingleMonthData(int monthIndex, int year, int month)
+    {
+        _monthTitles[monthIndex] = $"{_culture.DateTimeFormat.GetMonthName(month)} {year}";
 
+        var days = _daysOfMonths[monthIndex];
         var calendar = _culture.Calendar;
         var firstDayOfMonth = new DateTime(year, month, 1, calendar);
         int daysInMonth = calendar.GetDaysInMonth(year, month);
         int dayOfWeek = (int)calendar.GetDayOfWeek(firstDayOfMonth);
-        int firstDayOfWeek = (int)_culture.DateTimeFormat.FirstDayOfWeek;
+        int firstDayOfWeek = (int)GetFirstDayOfWeek();
 
         // Adjust dayOfWeek to match the culture's first day of week
         dayOfWeek = (dayOfWeek - firstDayOfWeek + 7) % 7;
@@ -1338,37 +1883,36 @@ private void GenerateMonthData(int year, int month)
 
         int day = daysInPreviousMonth - dayOfWeek + 1;
 
-        for (int i = 0; i < 1; i++)
+        for (int j = 0; j < dayOfWeek; j++)
         {
-            for (int j = 0; j < dayOfWeek; j++)
-            {
-                _daysOfCurrentMonth[i, j] = new(previousMonth.Year, previousMonth.Month, day, calendar);
-                day++;
-            }
+            days[0, j] = new(previousMonth.Year, previousMonth.Month, day, calendar);
+            day++;
         }
 
         day = 1;
         var ended = false;
-        for (int i = 0; i < 6; i++)
+        for (int i = 0; i < DEFAULT_WEEK_COUNT; i++)
         {
-            for (int j = 0; j < 7; j++)
+            for (int j = 0; j < DEFAULT_DAY_COUNT_PER_WEEK; j++)
             {
                 if (i == 0 && j < dayOfWeek) continue;
 
                 if (day <= daysInMonth)
                 {
-                    _daysOfCurrentMonth[i, j] = new(year, month, day, calendar);
+                    days[i, j] = new(year, month, day, calendar);
                     day++;
                 }
                 else
                 {
-                    if (j == 0)
+                    // Months of unequal height would make a multi-month strip ragged, so the six
+                    // rows are always laid out there even when FixedWeeks is off.
+                    if (j == 0 && FixedWeeks is false && _monthCount == 1)
                     {
                         ended = true;
                     }
-                    _daysOfCurrentMonth[i, j] = ended
-                                                ? null
-                                                : new(nextMonth.Year, nextMonth.Month, day - daysInMonth, calendar);
+                    days[i, j] = ended
+                                 ? null
+                                 : new(nextMonth.Year, nextMonth.Month, day - daysInMonth, calendar);
                     day++;
                 }
             }
@@ -1404,9 +1948,14 @@ private bool IsGoToTodayButtonDisabled(int todayYear, int todayMonth, bool showY
         }
     }
 
+    private DayOfWeek GetFirstDayOfWeek()
+    {
+        return FirstDayOfWeek ?? _culture.DateTimeFormat.FirstDayOfWeek;
+    }
+
     private DayOfWeek GetDayOfWeek(int index)
     {
-        int dayOfWeek = (int)_culture.DateTimeFormat.FirstDayOfWeek + index;
+        int dayOfWeek = (int)GetFirstDayOfWeek() + index;
 
         if (dayOfWeek > 6)
         {
@@ -1416,11 +1965,11 @@ private DayOfWeek GetDayOfWeek(int index)
         return (DayOfWeek)dayOfWeek;
     }
 
-    private int GetWeekNumber(int weekIndex)
+    private int GetWeekNumber(int monthIndex, int weekIndex)
     {
-        return _culture.Calendar.GetWeekOfYear(_daysOfCurrentMonth[weekIndex, 0]!.Value,
-                                               CalendarWeekRule.FirstFullWeek,
-                                               _culture.DateTimeFormat.FirstDayOfWeek);
+        return _culture.Calendar.GetWeekOfYear(_daysOfMonths[monthIndex][weekIndex, 0]!.Value,
+                                               WeekNumberRule ?? CalendarWeekRule.FirstFullWeek,
+                                               GetFirstDayOfWeek());
     }
 
     private void ToggleMonthPickerOverlay()
@@ -1439,8 +1988,8 @@ private bool CanChangeMonth(bool isNext)
 
         if (isNext && MaxDate.HasValue)
         {
-            var maxDateYear = _culture.Calendar.GetYear(MaxDate.Value.DateTime);
-            var maxDateMonth = _culture.Calendar.GetMonth(MaxDate.Value.DateTime);
+            var maxDateYear = _culture.Calendar.GetYear(GetDateTime(MaxDate.Value));
+            var maxDateMonth = _culture.Calendar.GetMonth(GetDateTime(MaxDate.Value));
 
             if (maxDateYear == _currentYear && maxDateMonth == _currentMonth) return false;
         }
@@ -1448,8 +1997,8 @@ private bool CanChangeMonth(bool isNext)
 
         if (isNext is false && MinDate.HasValue)
         {
-            var minDateYear = _culture.Calendar.GetYear(MinDate.Value.DateTime);
-            var minDateMonth = _culture.Calendar.GetMonth(MinDate.Value.DateTime);
+            var minDateYear = _culture.Calendar.GetYear(GetDateTime(MinDate.Value));
+            var minDateMonth = _culture.Calendar.GetMonth(GetDateTime(MinDate.Value));
 
             if (minDateYear == _currentYear && minDateMonth == _currentMonth) return false;
         }
@@ -1482,7 +2031,7 @@ private bool CanChangeYear(bool isNext)
         if (isNext)
         {
             var isInMaxDateYear = MaxDate.HasValue &&
-                                  _culture.Calendar.GetYear(MaxDate.Value.DateTime) == _currentYear;
+                                  _culture.Calendar.GetYear(GetDateTime(MaxDate.Value)) == _currentYear;
             if (isInMaxDateYear) return false;
 
             var isInMaxDayRangeYear = MaxRange.HasValue &&
@@ -1496,7 +2045,7 @@ private bool CanChangeYear(bool isNext)
         else
         {
             var isInMinDateYear = MinDate.HasValue &&
-                                  _culture.Calendar.GetYear(MinDate.Value.DateTime) == _currentYear;
+                                  _culture.Calendar.GetYear(GetDateTime(MinDate.Value)) == _currentYear;
             if (isInMinDateYear) return false;
 
             var isInMaxDayRangeYear = MaxRange.HasValue &&
@@ -1517,7 +2066,7 @@ private bool CanChangeYearRange(bool isNext)
         if (isNext)
         {
             var isInMaxDateYearRange = MaxDate.HasValue &&
-                                       _culture.Calendar.GetYear(MaxDate.Value.DateTime) < _yearPickerStartYear + 12;
+                                       _culture.Calendar.GetYear(GetDateTime(MaxDate.Value)) < _yearPickerStartYear + 12;
             if (isInMaxDateYearRange) return false;
 
             var isInMaxDayRangeYearRange = MaxRange.HasValue &&
@@ -1532,7 +2081,7 @@ CurrentValue.EndDate.HasValue is false &&
         else
         {
             var isInMinDateYearRange = MinDate.HasValue &&
-                                       _culture.Calendar.GetYear(MinDate.Value.DateTime) >= _yearPickerStartYear;
+                                       _culture.Calendar.GetYear(GetDateTime(MinDate.Value)) >= _yearPickerStartYear;
             if (isInMinDateYearRange) return false;
 
             var isInMaxDayRangeYearRange = MaxRange.HasValue &&
@@ -1569,23 +2118,365 @@ private bool IsWeekDayOutOfMinAndMaxDate(DateTime date)
             if (date < minEndDate) return true;
         }
 
+        if (IsInMinRangeOfStartDate(date)) return true;
+
+        return false;
+    }
+
+    // While only the start date is picked, every day closer to it than MinRange cannot close the range.
+    private bool IsInMinRangeOfStartDate(DateTime date)
+    {
+        if (MinRange.HasValue is false) return false;
+
+        var minRangeDays = (int)MinRange.Value.TotalDays;
+        if (minRangeDays <= 0) return false;
+
+        if (CurrentValue?.StartDate is null || CurrentValue.EndDate.HasValue) return false;
+
+        var startDate = GetDateTime(CurrentValue.StartDate.Value).Date;
+
+        return Math.Abs((date.Date - startDate).TotalDays) < minRangeDays;
+    }
+
+    private void BuildDatesLookups()
+    {
+        _disabledDates = DisabledDates is null ? [] : DisabledDates.Select(d => GetDateTime(d).Date).ToHashSet();
+        _highlightedDates = HighlightedDates is null ? [] : HighlightedDates.Select(d => GetDateTime(d).Date).ToHashSet();
+        _disabledDaysOfWeek = DisabledDaysOfWeek is null ? [] : DisabledDaysOfWeek.ToHashSet();
+    }
+
+    // The days blocked on their own, without the range-relative rules (MinRange, MaxRange and
+    // ExcludeDisabledDates) that only make sense once a start date is picked.
+    private bool IsDayExcluded(DateTime date)
+    {
+        if (MaxDate.HasValue && date > GetDateTime(MaxDate.Value)) return true;
+
+        if (MinDate.HasValue && date < GetDateTime(MinDate.Value)) return true;
+
+        if (_disabledDaysOfWeek.Contains(date.DayOfWeek)) return true;
+
+        if (_disabledDates.Contains(date.Date)) return true;
+
+        if (IsDateDisabled is not null && IsDateDisabled(GetDateTimeOfDayCell(date))) return true;
+
+        return false;
+    }
+
+    private bool IsDayDisabled(DateTime date)
+    {
+        if (IsWeekDayOutOfMinAndMaxDate(date)) return true;
+
+        if (IsDayExcluded(date)) return true;
+
+        if (RangeWouldCoverAnExcludedDay(date)) return true;
+
+        return false;
+    }
+
+    // With ExcludeDisabledDates on, a day cannot close the range when any day between it and the
+    // already picked start date is excluded, so the produced range never covers a disabled day.
+    private bool RangeWouldCoverAnExcludedDay(DateTime date)
+    {
+        if (ExcludeDisabledDates is false) return false;
+
+        if (CurrentValue?.StartDate is null || CurrentValue.EndDate.HasValue) return false;
+
+        if (_excludedUpperBound.HasValue && date.Date > _excludedUpperBound.Value) return true;
+
+        if (_excludedLowerBound.HasValue && date.Date < _excludedLowerBound.Value) return true;
+
+        return false;
+    }
+
+    // Walks outwards from the start date once, instead of rescanning the whole span for every cell.
+    private void BuildExcludedBounds()
+    {
+        _excludedLowerBound = null;
+        _excludedUpperBound = null;
+
+        if (ExcludeDisabledDates is false) return;
+
+        if (CurrentValue?.StartDate is null || CurrentValue.EndDate.HasValue) return;
+
+        // MinDate and MaxDate stop the walk instead of bounding the range, so with nothing else
+        // excluding days there is nothing to look for.
+        if (_disabledDates.Count == 0 && _disabledDaysOfWeek.Count == 0 && IsDateDisabled is null) return;
+
+        var startDate = GetDateTime(CurrentValue.StartDate.Value).Date;
+
+        _excludedUpperBound = FindNearestExcludedDay(startDate, 1);
+        _excludedLowerBound = FindNearestExcludedDay(startDate, -1);
+    }
+
+    private DateTime? FindNearestExcludedDay(DateTime startDate, int step)
+    {
+        var date = startDate;
+
+        for (var i = 0; i < MAX_EXCLUDED_SCAN_DAYS; i++)
+        {
+            date = date.AddDays(step);
+
+            // Everything past the calendar's own bounds is unreachable anyway, so the walk can stop there.
+            if (step > 0 && MaxDate.HasValue && date > GetDateTime(MaxDate.Value)) return null;
+            if (step < 0 && MinDate.HasValue && date < GetDateTime(MinDate.Value)) return null;
+
+            if (IsDayExcluded(date)) return date;
+        }
+
+        return null;
+    }
+
+    private DateTime GetToday()
+    {
+        return Today.HasValue ? GetDateTime(Today.Value) : DateTime.Now;
+    }
+
+    private bool IsInMonth(DateTime date, int monthIndex)
+    {
+        var (year, month) = AddMonths(_currentYear, _currentMonth, monthIndex);
+
+        return _culture.Calendar.GetYear(date) == year && _culture.Calendar.GetMonth(date) == month;
+    }
+
+    // Whether the day belongs to any of the rendered months.
+    private bool IsInRenderedMonths(DateTime date)
+    {
+        for (var i = 0; i < _monthCount; i++)
+        {
+            if (IsInMonth(date, i)) return true;
+        }
+
         return false;
     }
 
+    // The outside days of the adjacent months would appear in two grids at once when more than one
+    // month is rendered, so they are dropped to keep every rendered day (and its id) unique.
+    private bool ShowOutsideDaysInternal => ShowOutsideDays && _monthCount == 1;
+
+    private string GetDayButtonId(DateTime date)
+    {
+        return FormattableString.Invariant($"{_dateRangePickerId}-day-{date.Year:D4}-{date.Month:D2}-{date.Day:D2}");
+    }
+
+    private bool IsDayRendered(DateTime date, int monthIndex)
+    {
+        return ShowOutsideDaysInternal || IsInMonth(date, monthIndex);
+    }
+
+    private DateTime GetFocusableDay()
+    {
+        if (_focusedDate.HasValue && IsFocusable(_focusedDate.Value)) return _focusedDate.Value;
+
+        if (CurrentValue?.StartDate is not null)
+        {
+            var startDate = GetDateTime(CurrentValue.StartDate.Value).Date;
+            if (IsFocusable(startDate)) return startDate;
+        }
+
+        var today = GetToday().Date;
+        if (IsFocusable(today)) return today;
+
+        for (var monthIndex = 0; monthIndex < _monthCount; monthIndex++)
+        {
+            for (var week = 0; week < DEFAULT_WEEK_COUNT; week++)
+            {
+                for (var day = 0; day < DEFAULT_DAY_COUNT_PER_WEEK; day++)
+                {
+                    var date = _daysOfMonths[monthIndex][week, day];
+                    if (date.HasValue && IsFocusable(date.Value)) return date.Value;
+                }
+            }
+        }
+
+        return _daysOfMonths[0][0, 0].GetValueOrDefault(today);
+    }
+
+    private bool IsFocusable(DateTime date)
+    {
+        return IsInRenderedMonths(date) && IsDayDisabled(date) is false;
+    }
+
+    // Escape closes the callout from anywhere inside it, as the dialog pattern requires.
+    private async Task HandleOnCalloutKeyDown(KeyboardEventArgs e)
+    {
+        if (Standalone) return;
+        if (IsEnabled is false) return;
+        if (e.Key != "Escape") return;
+        if (IsOpen is false) return;
+
+        await CloseCallout();
+
+        await InputElement.FocusAsync();
+    }
+
+    private async Task HandleDayKeyDown(KeyboardEventArgs e, DateTime date)
+    {
+        if (IsEnabled is false) return;
+
+        var isRtl = Dir == BitDir.Rtl || (Dir is null && _culture.TextInfo.IsRightToLeft);
+
+        DateTime? target = e.Key switch
+        {
+            "ArrowLeft" => FindEnabledDay(date, isRtl ? 1 : -1),
+            "ArrowRight" => FindEnabledDay(date, isRtl ? -1 : 1),
+            "ArrowUp" => FindEnabledDay(date, -7),
+            "ArrowDown" => FindEnabledDay(date, 7),
+            "Home" => FindEnabledDayTowards(GetStartOfWeek(date), date),
+            "End" => FindEnabledDayTowards(GetStartOfWeek(date).AddDays(6), date),
+            "PageUp" => FindEnabledDayTowards(e.ShiftKey ? _culture.Calendar.AddYears(date, -1) : _culture.Calendar.AddMonths(date, -1), date),
+            "PageDown" => FindEnabledDayTowards(e.ShiftKey ? _culture.Calendar.AddYears(date, 1) : _culture.Calendar.AddMonths(date, 1), date),
+            _ => null
+        };
+
+        if (target.HasValue is false) return;
+
+        await MoveFocusToDay(target.Value);
+    }
+
+    private DateTime? FindEnabledDay(DateTime from, int stepDays)
+    {
+        var date = from;
+
+        for (var i = 0; i < 366; i++)
+        {
+            date = date.AddDays(stepDays);
+
+            // Only the calendar's own bounds end the walk. Days disabled by anything else
+            // (MinRange, DisabledDates, IsDateDisabled, …) are skipped over instead.
+            if (stepDays > 0 && MaxDate.HasValue && date > GetDateTime(MaxDate.Value)) return null;
+            if (stepDays < 0 && MinDate.HasValue && date < GetDateTime(MinDate.Value)) return null;
+
+            if (IsDayDisabled(date) is false) return date;
+        }
+
+        return null;
+    }
+
+    private DateTime? FindEnabledDayTowards(DateTime target, DateTime origin)
+    {
+        var step = target < origin ? 1 : -1;
+        var date = target;
+
+        while (date != origin)
+        {
+            if (IsDayDisabled(date) is false) return date;
+
+            date = date.AddDays(step);
+        }
+
+        return null;
+    }
+
+    private DateTime GetStartOfWeek(DateTime date)
+    {
+        var diff = ((int)date.DayOfWeek - (int)GetFirstDayOfWeek() + 7) % 7;
+
+        return date.AddDays(-diff);
+    }
+
+    private async Task MoveFocusToDay(DateTime target)
+    {
+        var previousYear = _currentYear;
+        var previousMonth = _currentMonth;
+
+        if (IsInRenderedMonths(target) is false)
+        {
+            var year = _culture.Calendar.GetYear(target);
+            var month = _culture.Calendar.GetMonth(target);
+
+            // A target past the last rendered month only has to scroll far enough to become the last
+            // one, so the months already on screen keep as much of their place as they can.
+            var movingForward = ((year * 12) + month) > ((_currentYear * 12) + _currentMonth);
+
+            (_currentYear, _currentMonth) = movingForward
+                                            ? AddMonths(year, month, -(_monthCount - 1))
+                                            : (year, month);
+
+            GenerateMonthData(_currentYear, _currentMonth);
+        }
+
+        _focusedDate = target;
+        _focusAfterRender = true;
+
+        await NotifyMonthChange(previousYear, previousMonth);
+    }
+
+    private async Task NotifyMonthChange(int previousYear, int previousMonth)
+    {
+        if (previousYear == _currentYear && previousMonth == _currentMonth) return;
+        if (OnMonthChange.HasDelegate is false) return;
+
+        var date = _culture.Calendar.ToDateTime(_currentYear, _currentMonth, 1, 0, 0, 0, 0);
+
+        await OnMonthChange.InvokeAsync(new(date, _timeZone.GetUtcOffset(date)));
+    }
+
+    private void HandleOnDayPointerEnter(DateTime date)
+    {
+        if (IsEnabled is false || ReadOnly) return;
+        if (CurrentValue?.StartDate is null || CurrentValue.EndDate.HasValue) return;
+        if (IsDayDisabled(date)) return;
+
+        _hoveredDate = date;
+    }
+
+    private void HandleOnDaysPointerLeave()
+    {
+        _hoveredDate = null;
+    }
+
+    // The prospective range shown while the pointer moves over the day cells and only the start date is picked.
+    private bool IsInHoverRange(DateTime date)
+    {
+        if (_hoveredDate.HasValue is false) return false;
+        if (CurrentValue?.StartDate is null || CurrentValue.EndDate.HasValue) return false;
+
+        var startDate = GetDateTime(CurrentValue.StartDate.Value).Date;
+        var hoveredDate = _hoveredDate.Value.Date;
+
+        return date.Date >= (startDate < hoveredDate ? startDate : hoveredDate) &&
+               date.Date <= (startDate < hoveredDate ? hoveredDate : startDate);
+    }
+
+    private string GetColorClass()
+    {
+        return Color switch
+        {
+            BitColor.Primary => "bit-dtrp-pri",
+            BitColor.Secondary => "bit-dtrp-sec",
+            BitColor.Tertiary => "bit-dtrp-ter",
+            BitColor.Info => "bit-dtrp-inf",
+            BitColor.Success => "bit-dtrp-suc",
+            BitColor.Warning => "bit-dtrp-wrn",
+            BitColor.SevereWarning => "bit-dtrp-swr",
+            BitColor.Error => "bit-dtrp-err",
+            BitColor.PrimaryBackground => "bit-dtrp-pbg",
+            BitColor.SecondaryBackground => "bit-dtrp-sbg",
+            BitColor.TertiaryBackground => "bit-dtrp-tbg",
+            BitColor.PrimaryForeground => "bit-dtrp-pfg",
+            BitColor.SecondaryForeground => "bit-dtrp-sfg",
+            BitColor.TertiaryForeground => "bit-dtrp-tfg",
+            BitColor.PrimaryBorder => "bit-dtrp-pbr",
+            BitColor.SecondaryBorder => "bit-dtrp-sbr",
+            BitColor.TertiaryBorder => "bit-dtrp-tbr",
+            _ => "bit-dtrp-pri"
+        };
+    }
+
     private bool IsMonthOutOfMinAndMaxDate(int month)
     {
         if (MaxDate.HasValue)
         {
-            var maxDateYear = _culture.Calendar.GetYear(MaxDate.Value.DateTime);
-            var maxDateMonth = _culture.Calendar.GetMonth(MaxDate.Value.DateTime);
+            var maxDateYear = _culture.Calendar.GetYear(GetDateTime(MaxDate.Value));
+            var maxDateMonth = _culture.Calendar.GetMonth(GetDateTime(MaxDate.Value));
 
             if (_currentYear > maxDateYear || (_currentYear == maxDateYear && month > maxDateMonth)) return true;
         }
 
         if (MinDate.HasValue)
         {
-            var minDateYear = _culture.Calendar.GetYear(MinDate.Value.DateTime);
-            var minDateMonth = _culture.Calendar.GetMonth(MinDate.Value.DateTime);
+            var minDateYear = _culture.Calendar.GetYear(GetDateTime(MinDate.Value));
+            var minDateMonth = _culture.Calendar.GetMonth(GetDateTime(MinDate.Value));
 
             if (_currentYear < minDateYear || (_currentYear == minDateYear && month < minDateMonth)) return true;
         }
@@ -1612,8 +2503,8 @@ private bool IsMonthOutOfMinAndMaxDate(int month)
 
     private bool IsYearOutOfMinAndMaxDate(int year)
     {
-        return (MaxDate.HasValue && year > _culture.Calendar.GetYear(MaxDate.Value.DateTime)) ||
-               (MinDate.HasValue && year < _culture.Calendar.GetYear(MinDate.Value.DateTime)) ||
+        return (MaxDate.HasValue && year > _culture.Calendar.GetYear(GetDateTime(MaxDate.Value))) ||
+               (MinDate.HasValue && year < _culture.Calendar.GetYear(GetDateTime(MinDate.Value))) ||
                (MaxRange.HasValue && MaxRange.Value.TotalDays > 0 &&
                 CurrentValue?.StartDate is not null &&
                 CurrentValue!.EndDate.HasValue is false &&
@@ -1629,6 +2520,10 @@ private void CheckCurrentCalendarMatchesCurrentValue()
         var currentValueYear = _culture.Calendar.GetYear(currentValue.DateTime);
         var currentValueMonth = _culture.Calendar.GetMonth(currentValue.DateTime);
 
+        // Any of the rendered months showing the start date is enough, so the grid is only rebased
+        // when the start date would otherwise be off screen.
+        if (IsInRenderedMonths(currentValue.DateTime)) return;
+
         if (currentValueYear != _currentYear || currentValueMonth != _currentMonth)
         {
             _currentYear = currentValueYear;
@@ -1637,7 +2532,7 @@ private void CheckCurrentCalendarMatchesCurrentValue()
         }
     }
 
-    private (string style, string klass) GetDayButtonCss(DateTime date)
+    private (string style, string klass) GetDayButtonCss(DateTime date, int monthIndex)
     {
         StringBuilder klass = new StringBuilder();
         StringBuilder style = new StringBuilder();
@@ -1715,16 +2610,48 @@ private void CheckCurrentCalendarMatchesCurrentValue()
             }
         }
 
-        var month = _culture.Calendar.GetMonth(date);
+        //Is in the prospective range being hovered
+        if (isStartDaySelectedDate is false && IsInHoverRange(date))
+        {
+            klass.Append(" bit-dtrp-dhr");
 
-        //Isn't in current month
-        if (month != _currentMonth)
+            if (Classes?.HoveredDayButtons is not null)
+            {
+                klass.Append(' ').Append(Classes?.HoveredDayButtons);
+            }
+
+            if (Styles?.HoveredDayButtons is not null)
+            {
+                style.Append(Styles?.HoveredDayButtons);
+            }
+        }
+
+        var isInMonth = IsInMonth(date, monthIndex);
+
+        //Isn't in the month of its own grid
+        if (isInMonth is false)
         {
             klass.Append(" bit-dtrp-dbo");
         }
 
+        //Is highlighted
+        if (_highlightedDates.Contains(date.Date))
+        {
+            klass.Append(" bit-dtrp-dhl");
+
+            if (Classes?.HighlightedDayButton is not null)
+            {
+                klass.Append(' ').Append(Classes?.HighlightedDayButton);
+            }
+
+            if (Styles?.HighlightedDayButton is not null)
+            {
+                style.Append(' ').Append(Styles?.HighlightedDayButton);
+            }
+        }
+
         //Is today
-        if (month == _currentMonth && date == GetDateTime(DateTimeOffset.Now).Date)
+        if (isInMonth && date == GetToday().Date)
         {
             klass.Append(" bit-dtrp-dtd");
 
@@ -1739,6 +2666,12 @@ private void CheckCurrentCalendarMatchesCurrentValue()
             }
         }
 
+        var customClass = GetDayClass?.Invoke(GetDateTimeOfDayCell(date));
+        if (customClass.HasValue())
+        {
+            klass.Append(' ').Append(customClass);
+        }
+
         return (style.ToString(), klass.ToString());
     }
 
@@ -1904,11 +2837,11 @@ private void HandleOnPmClick(bool isStartTime)
         UpdateTime();
     }
 
-    private bool? IsAm(int hour)
+    // Reflects the hour the time picker is currently showing, so the AM/PM pair stays in sync with
+    // the inputs even before a date is picked and the value is still null.
+    private bool IsAm(int hour)
     {
-        if (CurrentValue is null) return null;
-
-        return hour >= 0 && hour < 12; // am is 00:00 to 11:59
+        return hour is >= 0 and < 12; // am is 00:00 to 11:59
     }
 
     private async Task HandleOnPointerDown(bool isNext, bool isHour, bool isStartTime)
@@ -2055,6 +2988,8 @@ private async Task CloseCallout()
     {
         if (IsEnabled is false) return;
 
+        _hoveredDate = null;
+
         if (await AssignIsOpen(false) is false) return;
 
         await ToggleCallout();
@@ -2064,6 +2999,11 @@ private async Task CloseCallout()
 
     private bool ShowDayPicker()
     {
+        if (IsMonthPickerVisible is false)
+        {
+            return _showTimePickerAsOverlayInternal is false || _isTimePickerOverlayOnTop is false;
+        }
+
         if (ShowTimePicker)
         {
             if (ShowTimePickerAsOverlay)
@@ -2091,6 +3031,8 @@ _isMonthPickerOverlayOnTop is false &&
 
     private bool ShowMonthPicker()
     {
+        if (IsMonthPickerVisible is false) return false;
+
         if (ShowTimePicker)
         {
             if (ShowTimePickerAsOverlay)
@@ -2254,21 +3196,22 @@ private bool IsButtonDisabled(int startTimeHour, int startTimeMinute, int endTim
         return maxRangeTotalMinutes < Math.Abs((startTime - endTime).TotalMinutes);
     }
 
-    private DateTime GetMaxEndDate()
+    private DateTime GetMaxEndDate(DateTimeOffset? startDate = null)
     {
-        return CurrentValue!.StartDate!.Value.DateTime.AddDays(MaxRange!.Value.TotalDays);
+        return (startDate ?? CurrentValue!.StartDate!.Value).DateTime.AddDays(MaxRange!.Value.TotalDays);
     }
 
-    private DateTime GetMinEndDate()
+    private DateTime GetMinEndDate(DateTimeOffset? startDate = null)
     {
-        return CurrentValue!.StartDate!.Value.DateTime.AddDays(-1 * MaxRange!.Value.TotalDays);
+        return (startDate ?? CurrentValue!.StartDate!.Value).DateTime.AddDays(-1 * MaxRange!.Value.TotalDays);
     }
 
     private void ResetPickersState()
     {
+        _hoveredDate = null;
         _showMonthPicker = true;
         _isMonthPickerOverlayOnTop = false;
-        _showMonthPickerAsOverlayInternal = ShowMonthPickerAsOverlay;
+        _showMonthPickerAsOverlayInternal = IsMonthPickerVisible && ShowMonthPickerAsOverlay;
         _isTimePickerOverlayOnTop = false;
         _showTimePickerAsOverlayInternal = ShowTimePickerAsOverlay;
     }
@@ -2277,6 +3220,7 @@ private async Task<bool> ToggleCallout()
     {
         if (Standalone) return false;
         if (IsEnabled is false || IsDisposed) return false;
+        if (_dotnetObj is null) return false;
 
         return await _js.BitCalloutToggleCallout(
             dotnetObj: _dotnetObj,
@@ -2295,12 +3239,27 @@ private async Task<bool> ToggleCallout()
             footerId: "",
             setCalloutWidth: false,
             fixedCalloutWidth: false,
-            maxWindowWidth: MAX_WIDTH);
+            maxWindowWidth: GetMaxWidth());
+    }
+
+    // The presets panel and every extra month widen the callout, so the threshold that decides
+    // whether the pickers have to collapse into overlays has to account for them.
+    private int GetMaxWidth(int? monthCount = null)
+    {
+        var width = MAX_WIDTH + (((monthCount ?? _monthCount) - 1) * MONTH_WIDTH);
+
+        return Presets is not null && Presets.Any() ? width + PRESETS_WIDTH : width;
     }
 
     private string GetCalloutCssClasses()
     {
-        List<string> classes = ["bit-dtrp-cal"];
+        List<string> classes = ["bit-dtrp-cal", GetColorClass()];
+
+        if (IsEnabled is false)
+        {
+            // The callout renders outside of the root element, so it needs the disabled marker of its own.
+            classes.Add("bit-dis");
+        }
 
         if (Standalone)
         {
@@ -2335,10 +3294,13 @@ protected override async ValueTask DisposeAsync(bool disposing)
 
         _cancellationTokenSource?.Cancel();
         _cancellationTokenSource?.Dispose();
+        _dotnetObj?.Dispose();
+        _dotnetObj = null;
         OnValueChanged -= HandleOnValueChanged;
 
         try
         {
+            await _js.BitCalendarsDispose(_calloutId);
             await _js.BitCalloutClearCallout(_calloutId);
             await _js.BitSwipesDispose(_calloutId);
         }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss
index 9faa29df77b..9daee9c231a 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss
@@ -40,6 +40,7 @@
         .bit-dtrp-wlb,
         .bit-dtrp-dbt,
         .bit-dtrp-pkb,
+        .bit-dtrp-prb,
         .bit-dtrp-ptb,
         .bit-dtrp-tdv {
             color: $clr-fg-dis;
@@ -70,6 +71,20 @@
     }
 }
 
+// The callout is rendered outside of the root element, so it carries its own disabled marker.
+.bit-dtrp-cal.bit-dis {
+    .bit-dtrp-pkt,
+    .bit-dtrp-nbt,
+    .bit-dtrp-wlb,
+    .bit-dtrp-dbt,
+    .bit-dtrp-pkb,
+    .bit-dtrp-prb,
+    .bit-dtrp-ptb,
+    .bit-dtrp-tdv {
+        color: $clr-fg-dis;
+    }
+}
+
 .bit-dtrp-cal.bit-dtrp-rtl {
     .bit-dtrp-am-pm {
         order: -1;
@@ -162,7 +177,7 @@
 }
 
 .bit-dtrp-ein {
-    cursor: default;
+    cursor: text;
 }
 
 .bit-dtrp-lic {
@@ -238,15 +253,15 @@
     flex-flow: column nowrap;
 }
 
-.bit-dtrp-dgd {
-    border-spacing: 0;
-    position: relative;
-    text-align: center;
-    font-size: inherit;
-    table-layout: fixed;
-    margin-top: spacing(0.5);
-    border-collapse: collapse;
-    margin-bottom: spacing(1.25);
+// Consecutive months sit right next to each other, so only the first one pads its inline start.
+.bit-dtrp-dwp + .bit-dtrp-dwp {
+    padding-inline-start: 0;
+}
+
+.bit-dtrp-grd {
+    display: flex;
+    flex-grow: 1;
+    flex-flow: column nowrap;
 }
 
 .bit-dtrp-dgh,
@@ -312,6 +327,11 @@
         pointer-events: none;
         background-color: transparent;
     }
+
+    &:focus-visible {
+        z-index: 1;
+        outline: $shp-border-width $shp-border-style $clr-brd-pri;
+    }
 }
 
 .bit-dtrp-dbo {
@@ -319,41 +339,51 @@
     color: $clr-fg-sec;
 }
 
+.bit-dtrp-dbe {
+    width: spacing(3.5);
+    height: spacing(3.5);
+}
+
+.bit-dtrp-dhl {
+    font-weight: 600;
+    background-color: $clr-bg-ter;
+}
+
 .bit-dtrp-dtd {
     font-weight: 600;
     border-radius: 50%;
-    color: $clr-pri-text;
-    background-color: $clr-pri;
+    color: var(--bit-dtrp-clr-txt);
+    background-color: var(--bit-dtrp-clr);
 
     @media(hover: hover) {
         &:hover {
-            background-color: $clr-pri-hover;
+            background-color: var(--bit-dtrp-clr-hover);
         }
     }
 
     &:active {
-        background-color: $clr-pri-active;
+        background-color: var(--bit-dtrp-clr-active);
     }
 }
 
 .bit-dtrp-dss {
-    color: $clr-pri-text;
+    color: var(--bit-dtrp-clr-txt);
     border-end-end-radius: 0;
     border-start-end-radius: 0;
-    background-color: $clr-pri;
+    background-color: var(--bit-dtrp-clr);
     border-end-start-radius: spacing(1);
     border-start-start-radius: spacing(1);
 
     @media (hover: hover) {
         &:hover {
-            background-color: $clr-pri-hover;
+            background-color: var(--bit-dtrp-clr-hover);
         }
     }
 }
 
 .bit-dtrp-dse {
-    color: $clr-pri-text;
-    background-color: $clr-pri;
+    color: var(--bit-dtrp-clr-txt);
+    background-color: var(--bit-dtrp-clr);
     border-end-start-radius: 0;
     border-start-start-radius: 0;
     border-end-end-radius: spacing(1);
@@ -361,7 +391,7 @@
 
     @media (hover: hover) {
         &:hover {
-            background-color: $clr-pri-hover;
+            background-color: var(--bit-dtrp-clr-hover);
         }
     }
 }
@@ -377,7 +407,20 @@
 
     @media (hover: hover) {
         &:hover {
-            background-color: $clr-pri-hover;
+            background-color: var(--bit-dtrp-clr-hover);
+        }
+    }
+}
+
+// The prospective range previewed while the pointer moves over the day cells.
+.bit-dtrp-dhr {
+    border-radius: 0;
+    color: $clr-fg-pri;
+    background-color: $clr-bg-sec;
+
+    @media (hover: hover) {
+        &:hover {
+            background-color: $clr-bg-sec-hover;
         }
     }
 }
@@ -554,12 +597,67 @@
     overflow: hidden;
     box-shadow: none;
     padding: spacing(1.5);
-    min-width: spacing(26);
     box-sizing: content-box;
     flex-flow: column nowrap;
     min-width: spacing(24.5);
 }
 
+.bit-dtrp-prc {
+    margin: 0;
+    display: flex;
+    overflow: auto;
+    box-shadow: none;
+    gap: spacing(0.5);
+    padding: spacing(1.5);
+    box-sizing: content-box;
+    flex-flow: column nowrap;
+    min-width: spacing(14);
+    max-height: spacing(40);
+}
+
+.bit-dtrp-prb {
+    border: none;
+    cursor: pointer;
+    text-align: start;
+    white-space: nowrap;
+    color: $clr-fg-pri;
+    outline: transparent;
+    text-overflow: ellipsis;
+    padding: spacing(1) spacing(1.25);
+    font-size: spacing(1.75);
+    background-color: transparent;
+    border-radius: $shp-border-radius;
+    font-family: $tg-font-family;
+
+    @media (hover: hover) {
+        &:hover {
+            background-color: $clr-bg-pri-hover;
+        }
+    }
+
+    &:disabled {
+        color: $clr-fg-dis;
+        pointer-events: none;
+        background-color: transparent;
+    }
+}
+
+.bit-dtrp-prs {
+    font-weight: 600;
+    color: var(--bit-dtrp-clr-txt);
+    background-color: var(--bit-dtrp-clr);
+
+    @media (hover: hover) {
+        &:hover {
+            background-color: var(--bit-dtrp-clr-hover);
+        }
+    }
+
+    &:active {
+        background-color: var(--bit-dtrp-clr-active);
+    }
+}
+
 .bit-dtrp-pkc {
     margin-top: spacing(0.5);
     margin-bottom: spacing(1.5);
@@ -617,13 +715,12 @@
 }
 
 .bit-dtrp-pcm {
-    color: $clr-pri-text;
-    background-color: $clr-pri;
+    color: var(--bit-dtrp-clr-txt);
+    background-color: var(--bit-dtrp-clr);
 
     @media (hover: hover) {
         &:hover {
-            color: $clr-sec-hover;
-            background-color: $clr-pri-hover;
+            background-color: var(--bit-dtrp-clr-hover);
         }
     }
 }
@@ -716,8 +813,8 @@
 }
 
 .bit-dtrp-bns {
-    color: $clr-pri-text;
-    background-color: $clr-pri;
+    color: var(--bit-dtrp-clr-txt);
+    background-color: var(--bit-dtrp-clr);
 
     &:disabled {
         background-color: $clr-bg-dis;
@@ -725,12 +822,12 @@
 
     @media (hover: hover) {
         &:hover {
-            background-color: $clr-pri-hover;
+            background-color: var(--bit-dtrp-clr-hover);
         }
     }
 
     &:active {
-        background-color: $clr-pri-active;
+        background-color: var(--bit-dtrp-clr-active);
     }
 }
 
@@ -902,5 +999,132 @@
         .bit-dtrp-tic {
             display: flex;
         }
+
+        // The presets no longer fit in a side column on a narrow screen, so they wrap into a row.
+        .bit-dtrp-prc {
+            max-height: unset;
+            flex-flow: row wrap;
+            justify-content: center;
+        }
     }
 }
+
+
+.bit-dtrp-pri {
+    --bit-dtrp-clr: #{$clr-pri};
+    --bit-dtrp-clr-txt: #{$clr-pri-text};
+    --bit-dtrp-clr-hover: #{$clr-pri-hover};
+    --bit-dtrp-clr-active: #{$clr-pri-active};
+}
+
+.bit-dtrp-sec {
+    --bit-dtrp-clr: #{$clr-sec};
+    --bit-dtrp-clr-txt: #{$clr-sec-text};
+    --bit-dtrp-clr-hover: #{$clr-sec-hover};
+    --bit-dtrp-clr-active: #{$clr-sec-active};
+}
+
+.bit-dtrp-ter {
+    --bit-dtrp-clr: #{$clr-ter};
+    --bit-dtrp-clr-txt: #{$clr-ter-text};
+    --bit-dtrp-clr-hover: #{$clr-ter-hover};
+    --bit-dtrp-clr-active: #{$clr-ter-active};
+}
+
+.bit-dtrp-inf {
+    --bit-dtrp-clr: #{$clr-inf};
+    --bit-dtrp-clr-txt: #{$clr-inf-text};
+    --bit-dtrp-clr-hover: #{$clr-inf-hover};
+    --bit-dtrp-clr-active: #{$clr-inf-active};
+}
+
+.bit-dtrp-suc {
+    --bit-dtrp-clr: #{$clr-suc};
+    --bit-dtrp-clr-txt: #{$clr-suc-text};
+    --bit-dtrp-clr-hover: #{$clr-suc-hover};
+    --bit-dtrp-clr-active: #{$clr-suc-active};
+}
+
+.bit-dtrp-wrn {
+    --bit-dtrp-clr: #{$clr-wrn};
+    --bit-dtrp-clr-txt: #{$clr-wrn-text};
+    --bit-dtrp-clr-hover: #{$clr-wrn-hover};
+    --bit-dtrp-clr-active: #{$clr-wrn-active};
+}
+
+.bit-dtrp-swr {
+    --bit-dtrp-clr: #{$clr-swr};
+    --bit-dtrp-clr-txt: #{$clr-swr-text};
+    --bit-dtrp-clr-hover: #{$clr-swr-hover};
+    --bit-dtrp-clr-active: #{$clr-swr-active};
+}
+
+.bit-dtrp-err {
+    --bit-dtrp-clr: #{$clr-err};
+    --bit-dtrp-clr-txt: #{$clr-err-text};
+    --bit-dtrp-clr-hover: #{$clr-err-hover};
+    --bit-dtrp-clr-active: #{$clr-err-active};
+}
+
+.bit-dtrp-pbg {
+    --bit-dtrp-clr: #{$clr-bg-pri};
+    --bit-dtrp-clr-txt: #{$clr-fg-pri};
+    --bit-dtrp-clr-hover: #{$clr-bg-pri-hover};
+    --bit-dtrp-clr-active: #{$clr-bg-pri-active};
+}
+
+.bit-dtrp-sbg {
+    --bit-dtrp-clr: #{$clr-bg-sec};
+    --bit-dtrp-clr-txt: #{$clr-fg-pri};
+    --bit-dtrp-clr-hover: #{$clr-bg-sec-hover};
+    --bit-dtrp-clr-active: #{$clr-bg-sec-active};
+}
+
+.bit-dtrp-tbg {
+    --bit-dtrp-clr: #{$clr-bg-ter};
+    --bit-dtrp-clr-txt: #{$clr-fg-pri};
+    --bit-dtrp-clr-hover: #{$clr-bg-ter-hover};
+    --bit-dtrp-clr-active: #{$clr-bg-ter-active};
+}
+
+.bit-dtrp-pfg {
+    --bit-dtrp-clr: #{$clr-fg-pri};
+    --bit-dtrp-clr-txt: #{$clr-bg-pri};
+    --bit-dtrp-clr-hover: #{$clr-fg-pri-hover};
+    --bit-dtrp-clr-active: #{$clr-fg-pri-active};
+}
+
+.bit-dtrp-sfg {
+    --bit-dtrp-clr: #{$clr-fg-sec};
+    --bit-dtrp-clr-txt: #{$clr-bg-pri};
+    --bit-dtrp-clr-hover: #{$clr-fg-sec-hover};
+    --bit-dtrp-clr-active: #{$clr-fg-sec-active};
+}
+
+.bit-dtrp-tfg {
+    --bit-dtrp-clr: #{$clr-fg-ter};
+    --bit-dtrp-clr-txt: #{$clr-bg-pri};
+    --bit-dtrp-clr-hover: #{$clr-fg-ter-hover};
+    --bit-dtrp-clr-active: #{$clr-fg-ter-active};
+}
+
+.bit-dtrp-pbr {
+    --bit-dtrp-clr: #{$clr-brd-pri};
+    --bit-dtrp-clr-txt: #{$clr-fg-pri};
+    --bit-dtrp-clr-hover: #{$clr-brd-pri-hover};
+    --bit-dtrp-clr-active: #{$clr-brd-pri-active};
+}
+
+.bit-dtrp-sbr {
+    --bit-dtrp-clr: #{$clr-brd-sec};
+    --bit-dtrp-clr-txt: #{$clr-fg-pri};
+    --bit-dtrp-clr-hover: #{$clr-brd-sec-hover};
+    --bit-dtrp-clr-active: #{$clr-brd-sec-active};
+}
+
+.bit-dtrp-tbr {
+    --bit-dtrp-clr: #{$clr-brd-ter};
+    --bit-dtrp-clr-txt: #{$clr-fg-pri};
+    --bit-dtrp-clr-hover: #{$clr-brd-ter-hover};
+    --bit-dtrp-clr-active: #{$clr-brd-ter-active};
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePickerClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePickerClassStyles.cs
index 637b2074844..8c0846efba3 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePickerClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePickerClassStyles.cs
@@ -57,6 +57,21 @@ public class BitDateRangePickerClassStyles
     /// </summary>
     public string? Group { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the presets' container of the BitDateRangePicker.
+    /// </summary>
+    public string? PresetsContainer { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for each preset button of the BitDateRangePicker.
+    /// </summary>
+    public string? PresetButton { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the currently selected preset button of the BitDateRangePicker.
+    /// </summary>
+    public string? SelectedPresetButton { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the day-picker's wrapper of the BitDateRangePicker.
     /// </summary>
@@ -127,16 +142,26 @@ public class BitDateRangePickerClassStyles
     /// </summary>
     public string? NextMonthNavIcon { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the days grid of the BitDateRangePicker.
+    /// </summary>
+    public string? DaysGrid { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the header row of the days of the BitDateRangePicker.
     /// </summary>
     public string? DaysHeaderRow { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the header of the week numbers of the BitDateRangePicker.
+    /// Custom CSS classes/styles for the header cell of the week numbers column of the BitDateRangePicker.
     /// </summary>
     public string? WeekNumbersHeader { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for each day of the week header cell of the BitDateRangePicker.
+    /// </summary>
+    public string? WeekDayHeader { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for each row of the days of the BitDateRangePicker.
     /// </summary>
@@ -152,6 +177,16 @@ public class BitDateRangePickerClassStyles
     /// </summary>
     public string? DayButton { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the highlighted day buttons of the BitDateRangePicker.
+    /// </summary>
+    public string? HighlightedDayButton { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the day buttons inside the prospective range being hovered in the BitDateRangePicker.
+    /// </summary>
+    public string? HoveredDayButtons { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for today day button of the BitDateRangePicker.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePickerPreset.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePickerPreset.cs
new file mode 100644
index 00000000000..70f64c26415
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePickerPreset.cs
@@ -0,0 +1,45 @@
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// Represents a shortcut that fills the BitDateRangePicker with a predefined range (e.g. "Last 7 days").
+/// </summary>
+public class BitDateRangePickerPreset
+{
+    /// <summary>
+    /// The text of the preset's button.
+    /// </summary>
+    public required string Text { get; set; }
+
+    /// <summary>
+    /// The range applied when the preset is selected.
+    /// <see cref="ValueProvider"/> takes precedence over this when both are set.
+    /// </summary>
+    public BitDateRangePickerValue? Value { get; set; }
+
+    /// <summary>
+    /// Custom function providing the range applied when the preset is selected.
+    /// Unlike <see cref="Value"/> it is evaluated on each selection, which keeps relative
+    /// ranges (e.g. "Last 7 days") correct no matter how long the page has been open.
+    /// </summary>
+    public Func<BitDateRangePickerValue?>? ValueProvider { get; set; }
+
+    /// <summary>
+    /// Whether the preset's button is enabled.
+    /// </summary>
+    public bool IsEnabled { get; set; } = true;
+
+    /// <summary>
+    /// The title of the preset's button (tooltip).
+    /// </summary>
+    public string? Title { get; set; }
+
+    /// <summary>
+    /// Custom CSS class for the preset's button.
+    /// </summary>
+    public string? Class { get; set; }
+
+    /// <summary>
+    /// Custom CSS style for the preset's button.
+    /// </summary>
+    public string? Style { get; set; }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Scripts/Calendars.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/Calendars.ts
index cccc8d5193b..8cb9d2a384a 100644
--- a/src/BlazorUI/Bit.BlazorUI/Scripts/Calendars.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Scripts/Calendars.ts
@@ -17,7 +17,7 @@ namespace BitBlazorUI {
                 if (Calendars._navKeys.indexOf(e.key) === -1) return;
 
                 const target = e.target as HTMLElement | null;
-                if (!target || !target.closest('.bit-cal-dbt')) return;
+                if (!target || !target.closest('.bit-cal-dbt, .bit-dtrp-dbt')) return;
 
                 e.preventDefault();
             };
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
index 55fa5543339..165413855ab 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
@@ -4,18 +4,26 @@
 
 <PageOutlet Url="components/daterangepicker"
             Title="DateRangePicker"
-            Description="A BitDateRangePicker offers a drop-down control that’s optimized for picking two dates from a calendar view." />
+            Description="A BitDateRangePicker is a drop-down calendar for picking a start and an end date, with preset shortcuts, up to three months side by side, optional time selection, range limits, disabled days and full globalization support." />
 
 <DemoPage Name="DateRangePicker"
-          Description="A BitDateRangePicker offers a drop-down control that’s optimized for picking two dates from a calendar view where contextual information like the day of the week or fullness of the calendar is important. You can modify the calendar to provide additional context or to limit available dates."
+          Description="A BitDateRangePicker offers a drop-down control that’s optimized for picking two dates from a calendar view where contextual information like the day of the week or fullness of the calendar is important. The first click sets the start of the range, the second one closes it, and the days in between are highlighted while the pointer moves. Up to three months can be shown side by side and the most common ranges offered as one-click presets. The calendar can be constrained (MinDate, MaxDate, MinRange, MaxRange, disabled days), extended with a start/end time picker, rendered inline, navigated entirely from the keyboard and localized to any culture and time zone."
           Parameters="componentParameters"
           SubClasses="componentSubClasses"
           SubEnums="componentSubEnums"
           GitHubUrl="Inputs/DateRangePicker/BitDateRangePicker.razor"
           GitHubDemoUrl="Inputs/DateRangePicker/BitDateRangePickerDemo.razor">
     <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
-        <div>Explore basic configurations of the BitDateRangePicker, including labels, placeholders, week numbers and highlighting features.</div>
-        <br />
+        <div class="example-desc">
+            The DateRangePicker renders a read-only input that opens a calendar callout. Clicking a day starts the range,
+            clicking a second day closes it, and clicking again starts a new range. Beyond the usual input states
+            (<b>Label</b>, <b>Placeholder</b>, <b>Required</b>, <b>IsEnabled</b>) the calendar itself can show week numbers,
+            highlight the current and selected month, and render a start/end time picker with <b>ShowTimePicker</b>.
+            <b>AutoClose</b> keeps the callout open after the second pick, <b>ShowClearButton</b> adds a reset button (labelled
+            through <b>ClearButtonTitle</b>) once a range is set, and <b>StartingValue</b> decides which month and which times
+            the calendar opens on while no value is selected. Opening the callout moves the keyboard focus onto the day grid,
+            unless the input is editable and the range may still be typed.
+        </div>
         <div class="example-content">
             <BitDateRangePicker Label="Basic DateRangePicker" />
             <br /><br />
@@ -35,7 +43,9 @@
             <br /><br />
             <BitDateRangePicker Label="Disabled AutoClose" AutoClose="false" />
             <br /><br />
-            <BitDateRangePicker Label="Show clear button when has a value" ShowClearButton />
+            <BitDateRangePicker Label="Show clear button when has a value" ShowClearButton ClearButtonTitle="Clear the dates" />
+            <br /><br />
+            <BitDateRangePicker Label="Hidden month picker" IsMonthPickerVisible="false" />
             <br /><br />
             <div style="font-weight:600;padding:4px 0;font-size:14px;color:var(--bit-clr-fg-pri);">
                 <div>StartingValue: December 2020</div>
@@ -46,9 +56,36 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Min & Max" RazorCode="@example2RazorCode" Id="example2">
-        <div>Set minimum and maximum selectable dates to restrict user input to a specific range of days, months, or years.</div>
+    <DemoExample Title="Presets" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
+        <div class="example-desc">
+            <b>Presets</b> renders a list of shortcuts next to the calendar so the most common ranges are one click away.
+            Each <b>BitDateRangePickerPreset</b> carries the text of its button and either a fixed <b>Value</b> or a
+            <b>ValueProvider</b> function, which is re-evaluated on every click and therefore keeps relative ranges such as
+            "Last 7 days" correct however long the page has been open. The applied preset stays highlighted until the range
+            is changed by any other means, <b>OnPresetSelect</b> reports which one was clicked, and selecting one closes the
+            callout just like picking the second date does. A preset can also be disabled, titled and styled individually.
+        </div>
+        <div class="example-content">
+            <BitDateRangePicker Label="Common ranges" Presets="presets" @bind-Value="presetsValue"
+                                OnPresetSelect="@(preset => lastSelectedPreset = preset.Text)" />
+        </div>
+        <br />
+        <div>Selected: <b>@(presetsValue?.StartDate?.ToString("d") ?? "-") → @(presetsValue?.EndDate?.ToString("d") ?? "-")</b></div>
+        <div>Last selected preset: <b>@(lastSelectedPreset ?? "-")</b></div>
         <br /><br />
+        <div class="example-content-standalone">
+            <BitDateRangePicker Label="Presets in standalone mode" Presets="presets" Standalone />
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Min & Max" RazorCode="@example3RazorCode" Id="example3">
+        <div class="example-desc">
+            <b>MinDate</b> and <b>MaxDate</b> bound the whole calendar: days, months and years outside them are disabled and
+            the navigation buttons stop at the boundary. <b>MaxRange</b> and <b>MinRange</b> instead bound the length of the
+            selection itself — once the start date is picked, every day that would produce a range longer than
+            <b>MaxRange</b> or shorter than <b>MinRange</b> becomes unselectable. <b>MaxRange</b> also accounts for the hours
+            and minutes of a range, so the time picker's spinners are disabled as soon as they would exceed it.
+        </div>
         <div class="example-content">
             <div>Min: Now.AddDays(-5)</div>
             <div>Max: Now.AddDays(+5)</div>
@@ -64,12 +101,110 @@
             <br /><br />
             <div>MaxRange: 2 days, 4 hours and 30 minutes</div>
             <BitDateRangePicker MaxRange="new TimeSpan(2, 4, 30, 0)" ShowTimePicker />
+            <br /><br />
+            <div>MinRange: 3 days (a stay of at least 3 nights)</div>
+            <BitDateRangePicker MinRange="TimeSpan.FromDays(3)" />
+            <br /><br />
+            <div>MinRange: 2 days &amp; MaxRange: 7 days</div>
+            <BitDateRangePicker MinRange="TimeSpan.FromDays(2)" MaxRange="TimeSpan.FromDays(7)" />
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Disabled dates" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
+        <div class="example-desc">
+            Beyond the min/max bounds, individual days can be blocked out. <b>DisabledDaysOfWeek</b> takes the recurring days
+            to disable (weekends, for example), <b>DisabledDates</b> takes an explicit list of dates (holidays, blackout days)
+            and <b>IsDateDisabled</b> takes a predicate for anything rule-based. Disabled days cannot be clicked and are
+            skipped by the keyboard navigation, but by default the range simply spans over them, so use them for days that
+            must not be a start or an end of the selection. When the range must not cover them at all, <b>ExcludeDisabledDates</b>
+            also disables every day whose range, measured from the already picked start date, would contain one.
+        </div>
+        <div class="example-content">
+            <div>DisabledDaysOfWeek: weekends</div>
+            <BitDateRangePicker DisabledDaysOfWeek="@([DayOfWeek.Saturday, DayOfWeek.Sunday])" />
+            <br /><br />
+            <div>DisabledDates: an explicit list of blackout days</div>
+            <BitDateRangePicker DisabledDates="disabledDates" />
+            <br /><br />
+            <div>IsDateDisabled: every day before today</div>
+            <BitDateRangePicker IsDateDisabled="@(date => date.Date < DateTimeOffset.Now.Date)" />
+            <br /><br />
+            <div>ExcludeDisabledDates: the range cannot reach past a blackout day</div>
+            <BitDateRangePicker DisabledDates="disabledDates" ExcludeDisabledDates />
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Highlighted dates" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
+        <div class="example-desc">
+            <b>HighlightedDates</b> marks days that deserve attention without making them unselectable, and <b>GetDayClass</b>
+            attaches an arbitrary CSS class to any day cell, which makes it possible to color-code a calendar (busy days,
+            promotions, deadlines) from the application's own data.
+        </div>
+        <div class="example-content">
+            <div>HighlightedDates: the next three days</div>
+            <BitDateRangePicker HighlightedDates="highlightedDates" />
+            <br /><br />
+            <div>GetDayClass: paints every Friday</div>
+            <BitDateRangePicker GetDayClass="@(date => date.DayOfWeek == DayOfWeek.Friday ? "custom-friday" : null)" />
         </div>
     </DemoExample>
 
-    <DemoExample Title="Hour/Minute step" RazorCode="@example3RazorCode" Id="example3">
-        <div>Adjust the increment step for hours and minutes when using the BitDateRangePicker's time selection feature.</div>
+    <DemoExample Title="Calendar layout" RazorCode="@example6RazorCode" Id="example6">
+        <div class="example-desc">
+            The shape of the day grid is configurable: <b>FirstDayOfWeek</b> overrides the first column of the week coming
+            from the culture, <b>ShowOutsideDays</b> hides the leading and trailing days of the adjacent months,
+            <b>FixedWeeks</b> always renders six week rows so the calendar keeps a constant height while navigating,
+            <b>WeekNumberRule</b> chooses how week numbers are computed, and <b>Today</b> overrides the date the calendar
+            considers as today, which is useful for tests and for server-driven "current date" scenarios.
+        </div>
+        <div class="example-content">
+            <BitDateRangePicker Label="FirstDayOfWeek: Monday" FirstDayOfWeek="DayOfWeek.Monday" />
+            <br /><br />
+            <BitDateRangePicker Label="ShowOutsideDays: false" ShowOutsideDays="false" />
+            <br /><br />
+            <BitDateRangePicker Label="FixedWeeks (always six rows)" FixedWeeks />
+            <br /><br />
+            <BitDateRangePicker Label="WeekNumberRule: FirstFourDayWeek"
+                                ShowWeekNumbers
+                                FirstDayOfWeek="DayOfWeek.Monday"
+                                WeekNumberRule="System.Globalization.CalendarWeekRule.FirstFourDayWeek" />
+            <br /><br />
+            <BitDateRangePicker Label="Today: 2020/12/04" Today="new DateTimeOffset(2020, 12, 4, 0, 0, 0, DateTimeOffset.Now.Offset)" />
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Multiple months" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
+        <div class="example-desc">
+            <b>MonthCount</b> renders up to three consecutive months side by side, which is how a range spanning a
+            month boundary is picked without navigating in between: the hover preview, the selection and the
+            keyboard navigation all flow across the grids. Only the first month carries the "previous month"
+            button and only the last one the "next month" button, so navigating moves the whole strip. The days
+            of the adjacent months are dropped from the grids, since they would otherwise show up twice, and the
+            calendar quietly falls back to a single month whenever the viewport is too narrow to fit them all.
+        </div>
+        <div class="example-content">
+            <BitDateRangePicker Label="Two months" MonthCount="2" @bind-Value="monthCountValue" />
+            <br /><br />
+            <BitDateRangePicker Label="Two months with presets" MonthCount="2" Presets="presets" />
+            <br /><br />
+            <BitDateRangePicker Label="Three months with week numbers" MonthCount="3" ShowWeekNumbers />
+        </div>
         <br />
+        <div>
+            Selected: <b>@(monthCountValue?.StartDate?.ToString("d") ?? "-") → @(monthCountValue?.EndDate?.ToString("d") ?? "-")</b>
+        </div>
+        <br /><br />
+        <div class="example-content-standalone">
+            <BitDateRangePicker Label="Two months in standalone mode" MonthCount="2" Standalone />
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Hour/Minute step" RazorCode="@example8RazorCode" Id="example8">
+        <div class="example-desc">
+            <b>HourStep</b> and <b>MinuteStep</b> set how much each press of the time picker's up/down buttons changes the
+            start and end times. They apply to both the start and the end time inputs and are handy for quarter-hour
+            bookings or shift-based scheduling.
+        </div>
         <div class="example-content">
             <BitDateRangePicker ShowTimePicker
                                 Label="HourStep = 2"
@@ -81,21 +216,55 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Formatting" RazorCode="@example4RazorCode" Id="example4">
+    <DemoExample Title="Formatting" RazorCode="@example9RazorCode" Id="example9">
         <div class="example-desc">
-            Applications can customize how dates are formatted and parsed. Formatted dates can be ambiguous, so the control will avoid parsing the formatted strings of dates selected using the UI when text input is allowed.
-            In this example, we are formatting and parsing dates as dd=MM(yy).
+            <b>DateFormat</b> controls how each of the two dates is rendered (and parsed back, when text input is allowed),
+            while <b>ValueFormat</b> is the template that composes them into the single string shown in the input;
+            <code>{0}</code> is the start date and <code>{1}</code> is the end date. When no <b>DateFormat</b> is provided the culture's
+            short date pattern is used, extended with the time pattern whenever <b>ShowTimePicker</b> is enabled.
+            An end date that has not been picked yet is rendered as <code>---</code>, which <b>NoDateText</b> replaces with any
+            wording of its own, both when the value is written out and when it is typed back in.
         </div>
         <div class="example-content">
             <BitDateRangePicker Label="DateFormat: 'dd=MM(yy)'" DateFormat="dd=MM(yy)" />
             <br /><br />
             <BitDateRangePicker Label="ValueFormat: 'Dep: {0}, Arr: {1}'" ValueFormat="Dep: {0}, Arr: {1}" />
+            <br /><br />
+            <BitDateRangePicker Label="NoDateText: 'open ended'" NoDateText="open ended" ValueFormat="{0} - {1}" />
+            <br /><br />
+            <BitDateRangePicker Label="Default format with the time picker" ShowTimePicker />
         </div>
     </DemoExample>
 
-    <DemoExample Title="Binding" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
-        <div>Bind a selected date to a model or view, allowing two-way data binding with the BitDateRangePicker.</div>
-        <br />
+    <DemoExample Title="Text input" RazorCode="@example10RazorCode" Id="example10">
+        <div class="example-desc">
+            With <b>AllowTextInput</b> the input becomes editable and the typed text is parsed back into a range. The text
+            must follow the <b>ValueFormat</b> template with both dates written in the <b>DateFormat</b> pattern; an
+            unparsable value raises the validation error of <b>InvalidErrorMessage</b>. Leaving the end date as <code>---</code>
+            (or empty) keeps the range open-ended, and a reversed pair is swapped automatically.
+        </div>
+        <div class="example-content">
+            <BitDateRangePicker Label="Text input allowed"
+                                AllowTextInput
+                                DateFormat="dd/MM/yyyy"
+                                ValueFormat="{0} - {1}"
+                                Placeholder="dd/MM/yyyy - dd/MM/yyyy" />
+            <br /><br />
+            <BitDateRangePicker Label="Custom invalid error message"
+                                AllowTextInput
+                                DateFormat="dd/MM/yyyy"
+                                ValueFormat="{0} - {1}"
+                                InvalidErrorMessage="The entered date range is not valid."
+                                Placeholder="dd/MM/yyyy - dd/MM/yyyy" />
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Binding" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
+        <div class="example-desc">
+            The value of the component is a <b>BitDateRangePickerValue</b> holding a nullable <b>StartDate</b> and
+            <b>EndDate</b>, so a half-picked range is representable. Use <code>@@bind-Value</code> for two-way binding, or
+            <b>DefaultValue</b> together with the <b>OnChange</b> callback for the uncontrolled mode.
+        </div>
         <div class="example-content">
             <BitDateRangePicker @bind-Value="@selectedDateRange" />
         </div>
@@ -104,10 +273,12 @@
         <div>To: <b>@selectedDateRange?.EndDate.ToString()</b></div>
     </DemoExample>
 
-    <DemoExample Title="Culture" RazorCode="@example6RazorCode" Id="example6">
+    <DemoExample Title="Culture" RazorCode="@example12RazorCode" Id="example12">
         <div class="example-desc">
             By default, BitDateRangePicker picks the current culture.
             But you can provide your own instance of CultureInfo for any custom culture.
+            The whole calendar follows it: the calendar system (Gregorian, Persian, Hijri…), the month and day names,
+            the first day of the week, the AM/PM designators and the text direction.
             <br />
             You also can use our
             <BitLink Href="https://github.com/bitfoundation/bitplatform/blob/develop/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Helpers/CultureInfoHelper.cs" Target="_blank">
@@ -128,9 +299,10 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="TimeZone" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
-        <div>
-            Specifies the timezone used to interpret and display the selected date/time.
+    <DemoExample Title="TimeZone" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+        <div class="example-desc">
+            <b>TimeZone</b> specifies the time zone used to interpret and display the selected dates and times, so the
+            offsets of the produced <b>DateTimeOffset</b> values belong to that zone instead of the local one.
             <br />
             Remeber using this feature in different runtimes needs more investigations, for example,
             there are different data available based on the OS the code is running on or different settings
@@ -138,8 +310,8 @@
             <BitLink Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/globalization-localization?view=aspnetcore-9.0#timezone-information"
                      Target="_blank">more info</BitLink>).
         </div>
-        <br /><br />
-        <div>Defalt (local TimeZone):</div><br/>
+        <br />
+        <div>Defalt (local TimeZone):</div><br />
         <div class="example-content">
             <BitDateRangePicker @bind-Value="@timeZoneDateRange1" ShowTimePicker />
         </div>
@@ -155,9 +327,10 @@
             }
         }
 
-        @if (timeZoneInfo is not null) {
+        @if (timeZoneInfo is not null)
+        {
             <br /><br /><br /><br />
-            <div>"@timeZoneInfo.Id" TimeZone:</div><br/>
+            <div>"@timeZoneInfo.Id" TimeZone:</div><br />
             <div class="example-content">
                 <BitDateRangePicker TimeZone="timeZoneInfo" @bind-Value="@timeZoneDateRange2" ShowTimePicker />
             </div>
@@ -166,9 +339,12 @@
         }
     </DemoExample>
 
-    <DemoExample Title="Standalone" RazorCode="@example8RazorCode" Id="example8">
-        <div>Use the BitDateRangePicker in a standalone mode, allowing it to function independently without a surrounding form or container.</div>
-        <br />
+    <DemoExample Title="Standalone" RazorCode="@example14RazorCode" Id="example14">
+        <div class="example-desc">
+            <b>Standalone</b> renders the calendar inline instead of inside a callout, dropping the input and the overlay.
+            It suits filter panels, dashboards and any layout where the calendar should always be visible; the value
+            binding, the constraints and the time picker all behave exactly as they do in the drop-down mode.
+        </div>
         <div class="example-content-standalone">
             <BitDateRangePicker Label="Basic DatePicker" Standalone />
             <br /><br />
@@ -182,9 +358,12 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="ReadOnly" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
-        <div>The ReadOnly parameter makes the date range picker input non-editable, preventing users from manually changing the time value.</div>
-        <br />
+    <DemoExample Title="ReadOnly" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
+        <div class="example-desc">
+            <b>ReadOnly</b> keeps the component fully rendered and navigable — the callout still opens and the months can
+            still be browsed — but blocks every change: days cannot be selected, the time spinners are inert and the typed
+            text is ignored. Unlike <b>IsEnabled="false"</b>, the value is still submitted with the form.
+        </div>
         <div class="example-content">
             <BitDateRangePicker Label="Basic" ReadOnly @bind-Value="readOnlyDateRange" />
             <br /><br />
@@ -198,9 +377,13 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Templates" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
-        <div>Utilize various templates within the BitDateRangePicker, such as custom label templates, day cell templates, and year cell templates.</div>
-        <br />
+    <DemoExample Title="Templates" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
+        <div class="example-desc">
+            Every cell of the calendar can be rendered by the application. <b>LabelTemplate</b> and <b>IconTemplate</b>
+            replace the label and the input's icon, while <b>DayCellTemplate</b>, <b>MonthCellTemplate</b> and
+            <b>YearCellTemplate</b> receive the date of the cell being rendered and can decorate it with badges, colors
+            or any other markup.
+        </div>
         <div class="example-content">
             <BitDateRangePicker>
                 <LabelTemplate>
@@ -240,9 +423,12 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Responsive" RazorCode="@example11RazorCode" Id="example11">
-        <div>Enable responsive design for the BitDateRangePicker, allowing it to adjust its layout and appearance based on the screen size.</div>
-        <br />
+    <DemoExample Title="Responsive" RazorCode="@example17RazorCode" Id="example17">
+        <div class="example-desc">
+            <b>Responsive</b> turns the callout into a full-width panel that slides down from the top of the screen on small
+            viewports, enlarging the day cells and the time inputs for touch, and letting the panel be dismissed with a swipe.
+            On wider screens the component keeps its regular drop-down layout.
+        </div>
         <div class="example-content">
             <BitDateRangePicker Label="Responsive DateRangePicker"
                                 Responsive
@@ -251,13 +437,66 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="External Icons" RazorCode="@example12RazorCode" Id="example12">
+    <DemoExample Title="Validation" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18">
+        <div class="example-desc">
+            Inside an <b>EditForm</b> the DateRangePicker participates in the data annotations validation like any other
+            input: the field is marked invalid until the bound <b>BitDateRangePickerValue</b> satisfies the model's rules,
+            and the messages are reported through <b>ValidationMessage</b>. A custom validation attribute is the natural
+            place for range rules that the calendar itself cannot express.
+        </div>
+        <div class="example-content">
+            <EditForm Model="validationModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
+                <DataAnnotationsValidator />
+
+                <BitDateRangePicker @bind-Value="validationModel.DateRange" />
+
+                <ValidationMessage For="@(() => validationModel.DateRange)" />
+                <br />
+                <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
+                <BitButton ButtonType="BitButtonType.Reset" Variant="BitVariant.Outline"
+                           OnClick="() => { validationModel = new(); SuccessMessage = string.Empty; }">
+                    Reset
+                </BitButton>
+            </EditForm>
+            <br />
+            @if (string.IsNullOrEmpty(SuccessMessage) is false)
+            {
+                <BitMessage Color="BitColor.Success">@SuccessMessage</BitMessage>
+            }
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Color" RazorCode="@example19RazorCode" Id="example19">
+        <div class="example-desc">
+            The <b>Color</b> parameter applies one of the theme colors to the accented parts of the calendar: the today cell,
+            the two ends of the selected range, the highlighted current month and the active AM/PM button.
+        </div>
+        <div class="example-content">
+            <BitDateRangePicker Label="Primary" Color="BitColor.Primary" ShowTimePicker />
+            <br /><br />
+            <BitDateRangePicker Label="Secondary" Color="BitColor.Secondary" />
+            <br /><br />
+            <BitDateRangePicker Label="Tertiary" Color="BitColor.Tertiary" />
+            <br /><br />
+            <BitDateRangePicker Label="Info" Color="BitColor.Info" />
+            <br /><br />
+            <BitDateRangePicker Label="Success" Color="BitColor.Success" />
+            <br /><br />
+            <BitDateRangePicker Label="Warning" Color="BitColor.Warning" />
+            <br /><br />
+            <BitDateRangePicker Label="SevereWarning" Color="BitColor.SevereWarning" />
+            <br /><br />
+            <BitDateRangePicker Label="Error" Color="BitColor.Error" />
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="External Icons" RazorCode="@example20RazorCode" Id="example20">
         <div>Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the <b>Icon</b> parameter.</div>
-        
+
         <br /><br />
-        
+
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
-        
+
         <div>FontAwesome:</div>
         <br />
         <div class="example-content">
@@ -269,9 +508,9 @@
         </div>
 
         <br /><br /><br />
-        
+
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
-        
+
         <div>Bootstrap:</div>
         <br />
         <div class="example-content">
@@ -329,8 +568,12 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Style & Class" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
-        <div>Explore styling and class customization for BitDateRangePicker, including component styles, custom classes, and detailed styles.</div>
+    <DemoExample Title="Style & Class" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21">
+        <div class="example-desc">
+            <b>Style</b> and <b>Class</b> reach the root element only, while <b>Styles</b> and <b>Classes</b> address every
+            part of the component individually — the input and its container, the callout, the day/month/year grids and each
+            of the time picker's buttons — so a fully custom look can be built without overriding the library's CSS.
+        </div>
         <br /><br />
         <div>Component's Style & Class:</div>
         <br />
@@ -352,6 +595,7 @@
                                                       Divider = "border-color: mediumseagreen;",
                                                       DayPickerMonth = "color: darkgreen;",
                                                       TodayDayButton = "background-color: green;",
+                                                      HoveredDayButtons = "background-color: #b4f5b47a;",
                                                       SelectedDayButtons = "background-color: #36fa368c;",
                                                       EndTimeInputContainer = "margin-top: 0.5rem;",
                                                       StartAndEndSelectionDays = "background-color: limegreen;",
@@ -377,6 +621,7 @@
                                                        TodayDayButton = "custom-today-day",
                                                        StartAndEndSelectionDays = "custom-start-end",
                                                        SelectedDayButtons = "custom-selected-days",
+                                                       HoveredDayButtons = "custom-hovered-days",
                                                        PrevMonthNavButton = "custom-prev-month",
                                                        NextMonthNavButton = "custom-next-month",
                                                        DayPickerMonth = "custom-day-month",
@@ -386,8 +631,12 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="RTL" RazorCode="@example14RazorCode" Id="example14">
-        <div>Use BitDateRangePicker in right-to-left (RTL).</div>
+    <DemoExample Title="RTL" RazorCode="@example22RazorCode" Id="example22">
+        <div class="example-desc">
+            Set <b>Dir</b> to <b>BitDir.Rtl</b> to render the DateRangePicker in a right-to-left layout. The calendar, the
+            navigation buttons and the arrow-key navigation all mirror accordingly. A right-to-left <b>Culture</b> switches
+            the direction on its own, so <b>Dir</b> is only needed to override it.
+        </div>
         <br />
         <div dir="rtl">
             <div class="example-content">
@@ -395,4 +644,4 @@
             </div>
         </div>
     </DemoExample>
-</DemoPage>
\ No newline at end of file
+</DemoPage>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs
index bea5299eaca..f305accda16 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs
@@ -58,6 +58,13 @@ public partial class BitDateRangePickerDemo
             Description = "The name of the clear button's icon from the built-in Fluent UI icon set.",
         },
         new()
+        {
+            Name = "ClearButtonTitle",
+            Type = "string",
+            DefaultValue = "Clear the selected date range",
+            Description = "The title and the aria-label of the clear button.",
+        },
+        new()
         {
             Name = "CloseButtonIcon",
             Type = "BitIconInfo?",
@@ -81,6 +88,15 @@ public partial class BitDateRangePickerDemo
             Description = "The title of the close button (tooltip)."
         },
         new()
+        {
+            Name = "Color",
+            Type = "BitColor?",
+            DefaultValue = "null",
+            Description = "The general color of the DateRangePicker that applies to the today day button, the selected range, the highlighted current month and the selected AM/PM buttons.",
+            LinkType = LinkType.Link,
+            Href = "#color-enum",
+        },
+        new()
         {
             Name = "Culture",
             Type = "CultureInfo",
@@ -92,7 +108,7 @@ public partial class BitDateRangePickerDemo
             Name = "DateFormat",
             Type = "string?",
             DefaultValue = "null",
-            Description = "The format of the date in the DateRangePicker.",
+            Description = "The format of each of the two dates in the DateRangePicker. Defaults to the short date pattern of the Culture, extended with the time pattern when ShowTimePicker is enabled.",
         },
         new()
         {
@@ -102,6 +118,27 @@ public partial class BitDateRangePickerDemo
             Description = "Custom template to render the day cells of the DateRangePicker."
         },
         new()
+        {
+            Name = "DisabledDates",
+            Type = "IEnumerable<DateTimeOffset>?",
+            DefaultValue = "null",
+            Description = "The list of dates that are disabled (not selectable) in the DateRangePicker, in addition to MinDate and MaxDate."
+        },
+        new()
+        {
+            Name = "DisabledDaysOfWeek",
+            Type = "IEnumerable<DayOfWeek>?",
+            DefaultValue = "null",
+            Description = "The days of the week that are disabled (not selectable) in the DateRangePicker (e.g. weekends)."
+        },
+        new()
+        {
+            Name = "ExcludeDisabledDates",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Whether the disabled days are excluded from the selected range. By default a range simply spans over the disabled days between its two ends. When enabled, once the start date is picked every day whose range would contain a disabled day becomes unselectable."
+        },
+        new()
         {
             Name = "EndTimeDecreaseHourIcon",
             Type = "BitIconInfo?",
@@ -166,6 +203,27 @@ public partial class BitDateRangePickerDemo
             Description = "The name of the end time-picker's increase-minute button icon from the built-in Fluent UI icon set.",
         },
         new()
+        {
+            Name = "FirstDayOfWeek",
+            Type = "DayOfWeek?",
+            DefaultValue = "null",
+            Description = "Overrides the first day of the week in the day picker. If not set, the first day of the week of the Culture is used."
+        },
+        new()
+        {
+            Name = "FixedWeeks",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Whether the day picker should always render six weeks, filling the extra rows with the days of the adjacent months, to keep the calendar height fixed while navigating between months."
+        },
+        new()
+        {
+            Name = "GetDayClass",
+            Type = "Func<DateTimeOffset, string?>?",
+            DefaultValue = "null",
+            Description = "Custom function to provide additional CSS classes for each day button of the DateRangePicker."
+        },
+        new()
         {
             Name = "GoToNextMonthTitle",
             Type = "string",
@@ -245,6 +303,13 @@ public partial class BitDateRangePickerDemo
             Description = "Whether the month picker should highlight the current month."
         },
         new()
+        {
+            Name = "HighlightedDates",
+            Type = "IEnumerable<DateTimeOffset>?",
+            DefaultValue = "null",
+            Description = "The list of dates that are highlighted (marked) in the day picker of the DateRangePicker."
+        },
+        new()
         {
             Name = "HighlightSelectedMonth",
             Type = "bool",
@@ -321,6 +386,13 @@ public partial class BitDateRangePickerDemo
             Description = "The custom validation error message for the invalid value."
         },
         new()
+        {
+            Name = "IsDateDisabled",
+            Type = "Func<DateTimeOffset, bool>?",
+            DefaultValue = "null",
+            Description = "Custom function to determine if a specific date is disabled (not selectable) in the DateRangePicker."
+        },
+        new()
         {
             Name = "IsMonthPickerVisible",
             Type = "bool",
@@ -370,6 +442,13 @@ public partial class BitDateRangePickerDemo
             Description = "The minimum date allowed for the DateRangePicker.",
         },
         new()
+        {
+            Name = "MinRange",
+            Type = "TimeSpan?",
+            DefaultValue = "null",
+            Description = "The minimum number of days that the selected range must span in the DateRangePicker. Only the days part of the provided TimeSpan is considered.",
+        },
+        new()
         {
             Name = "MinuteStep",
             Type = "int",
@@ -384,6 +463,13 @@ public partial class BitDateRangePickerDemo
             Description = "Custom template to render the month cells of the DateRangePicker."
         },
         new()
+        {
+            Name = "MonthCount",
+            Type = "int",
+            DefaultValue = "1",
+            Description = "The number of consecutive months rendered side by side in the day picker (1 to 3), which makes picking a range that spans two months a single move. It falls back to a single month whenever the viewport is not wide enough to fit them all."
+        },
+        new()
         {
             Name = "MonthPickerToggleTitle",
             Type = "string",
@@ -439,6 +525,13 @@ public partial class BitDateRangePickerDemo
             Description = "The name of the next-year-range navigation button's icon from the built-in Fluent UI icon set.",
         },
         new()
+        {
+            Name = "NoDateText",
+            Type = "string",
+            DefaultValue = "---",
+            Description = "The text rendered in place of a date that has not been picked yet, which is also the token accepted back for an open-ended range when AllowTextInput is enabled."
+        },
+        new()
         {
             Name = "OnClick",
             Type = "EventCallback",
@@ -451,12 +544,26 @@ public partial class BitDateRangePickerDemo
             Description = "The callback for focusing the DateRangePicker's input.",
         },
         new()
+        {
+            Name = "OnMonthChange",
+            Type = "EventCallback<DateTimeOffset>",
+            Description = "Callback for when the displayed month of the day picker changes. The argument is the first day of the newly displayed month.",
+        },
+        new()
         {
             Name = "OnFocusIn",
             Type = "EventCallback",
             Description = "The callback for when the focus moves into the DateRangePicker's input.",
         },
         new()
+        {
+            Name = "OnPresetSelect",
+            Type = "EventCallback<BitDateRangePickerPreset>",
+            Description = "The callback for when a preset is selected. The argument is the selected preset.",
+            Href = "#date-range-picker-preset",
+            LinkType = LinkType.Link
+        },
+        new()
         {
             Name = "OnFocusOut",
             Type = "EventCallback",
@@ -470,6 +577,22 @@ public partial class BitDateRangePickerDemo
             Description = "The placeholder text of the DateRangePicker's input.",
         },
         new()
+        {
+            Name = "Presets",
+            Type = "IEnumerable<BitDateRangePickerPreset>?",
+            DefaultValue = "null",
+            Description = "The list of shortcuts, rendered next to the calendar, that fill the DateRangePicker with a predefined range (e.g. \"Last 7 days\").",
+            LinkType = LinkType.Link,
+            Href = "#date-range-picker-preset",
+        },
+        new()
+        {
+            Name = "PresetsAriaLabel",
+            Type = "string",
+            DefaultValue = "Predefined date ranges",
+            Description = "The aria label of the presets' container for screen readers.",
+        },
+        new()
         {
             Name = "PrevMonthNavIcon",
             Type = "BitIconInfo?",
@@ -525,6 +648,13 @@ public partial class BitDateRangePickerDemo
             Description = "Enables the responsive mode in small screens.",
         },
         new()
+        {
+            Name = "SelectedDateAriaAtomic",
+            Type = "string",
+            DefaultValue = "Selected date range {0}",
+            Description = "The aria-atomic live text announcing the currently selected date range, formatted with the value of the input."
+        },
+        new()
         {
             Name = "ShowClearButton",
             Type = "bool",
@@ -560,11 +690,18 @@ public partial class BitDateRangePickerDemo
             Description = "Whether or not render the time-picker.",
         },
         new()
+        {
+            Name = "ShowOutsideDays",
+            Type = "bool",
+            DefaultValue = "true",
+            Description = "Whether the days of the previous and next months, filling the first and last week rows, should be rendered.",
+        },
+        new()
         {
             Name = "ShowTimePickerAsOverlay",
             Type = "bool",
             DefaultValue = "false",
-            Description = "Show month picker on top of date range picker when visible.",
+            Description = "Show the time picker on top of the date range picker when visible.",
         },
         new()
         {
@@ -700,6 +837,13 @@ public partial class BitDateRangePickerDemo
             Description = "TimeZone for the DateRangePicker."
         },
         new()
+        {
+            Name = "Today",
+            Type = "DateTimeOffset?",
+            DefaultValue = "null",
+            Description = "Overrides the date considered as today by the DateRangePicker, which is DateTimeOffset.Now by default."
+        },
+        new()
         {
             Name = "Underlined",
             Type = "bool",
@@ -711,7 +855,14 @@ public partial class BitDateRangePickerDemo
             Name = "ValueFormat",
             Type = "string",
             DefaultValue = "Start: {0} - End: {1}",
-            Description = "The string format used to show the DateRangePicker's value in its input.",
+            Description = "The string format used to show the DateRangePicker's value in its input, where {0} is the start date and {1} is the end date. It is also the template used to parse the typed text back when AllowTextInput is enabled.",
+        },
+        new()
+        {
+            Name = "WeekNumberRule",
+            Type = "CalendarWeekRule?",
+            DefaultValue = "null",
+            Description = "The rule used to calculate the week numbers. If not set, CalendarWeekRule.FirstFullWeek is used.",
         },
         new()
         {
@@ -768,6 +919,65 @@ public partial class BitDateRangePickerDemo
             ]
         },
         new()
+        {
+            Id = "date-range-picker-preset",
+            Title = "BitDateRangePickerPreset",
+            Parameters =
+            [
+                new()
+                {
+                    Name = "Text",
+                    Type = "string",
+                    DefaultValue = "",
+                    Description = "The text of the preset's button.",
+                },
+                new()
+                {
+                    Name = "Value",
+                    Type = "BitDateRangePickerValue?",
+                    DefaultValue = "null",
+                    Description = "The range applied when the preset is selected. ValueProvider takes precedence over this when both are set.",
+                    Href = "#date-range-picker-value",
+                    LinkType = LinkType.Link
+                },
+                new()
+                {
+                    Name = "ValueProvider",
+                    Type = "Func<BitDateRangePickerValue?>?",
+                    DefaultValue = "null",
+                    Description = "Custom function providing the range applied when the preset is selected. Unlike Value it is evaluated on each selection, which keeps relative ranges (e.g. \"Last 7 days\") correct no matter how long the page has been open.",
+                },
+                new()
+                {
+                    Name = "IsEnabled",
+                    Type = "bool",
+                    DefaultValue = "true",
+                    Description = "Whether the preset's button is enabled.",
+                },
+                new()
+                {
+                    Name = "Title",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "The title of the preset's button (tooltip).",
+                },
+                new()
+                {
+                    Name = "Class",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS class for the preset's button.",
+                },
+                new()
+                {
+                    Name = "Style",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS style for the preset's button.",
+                },
+            ]
+        },
+        new()
         {
             Id = "daterangepicker-class-styles",
             Title = "BitDateRangePickerClassStyles",
@@ -809,13 +1019,6 @@ public partial class BitDateRangePickerDemo
                     Description = "Custom CSS classes/styles for the input container of the BitDateRangePicker."
                 },
                 new()
-                {
-                    Name = "InputContainer",
-                    Type = "string?",
-                    DefaultValue = "null",
-                    Description = "Custom CSS classes/styles for the input container of the BitDateRangePicker."
-                },
-                new()
                 {
                     Name = "Input",
                     Type = "string?",
@@ -858,6 +1061,27 @@ public partial class BitDateRangePickerDemo
                     Description = "Custom CSS classes/styles for the group of the BitDateRangePicker."
                 },
                 new()
+                {
+                    Name = "PresetsContainer",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the presets' container of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "PresetButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for each preset button of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "SelectedPresetButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the currently selected preset button of the BitDateRangePicker."
+                },
+                new()
                 {
                     Name = "DayPickerWrapper",
                     Type = "string?",
@@ -942,6 +1166,13 @@ public partial class BitDateRangePickerDemo
                     Description = "Custom CSS classes/styles for the Go to next month icon of the BitDateRangePicker."
                 },
                 new()
+                {
+                    Name = "DaysGrid",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the days grid of the BitDateRangePicker."
+                },
+                new()
                 {
                     Name = "DaysHeaderRow",
                     Type = "string?",
@@ -953,7 +1184,14 @@ public partial class BitDateRangePickerDemo
                     Name = "WeekNumbersHeader",
                     Type = "string?",
                     DefaultValue = "null",
-                    Description = "Custom CSS classes/styles for the header of the week numbers of the BitDateRangePicker."
+                    Description = "Custom CSS classes/styles for the header cell of the week numbers column of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "WeekDayHeader",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for each day of the week header cell of the BitDateRangePicker."
                 },
                 new()
                 {
@@ -977,6 +1215,20 @@ public partial class BitDateRangePickerDemo
                     Description = "Custom CSS classes/styles for each day button of the BitDateRangePicker."
                 },
                 new()
+                {
+                    Name = "HighlightedDayButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the highlighted day buttons of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "HoveredDayButtons",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the day buttons inside the prospective range being hovered in the BitDateRangePicker."
+                },
+                new()
                 {
                     Name = "TodayDayButton",
                     Type = "string?",
@@ -1013,87 +1265,311 @@ public partial class BitDateRangePickerDemo
                 },
                 new()
                 {
-                    Name = "TimePickerContainer",
+                    Name = "TimePickerWrapper",
                     Type = "string?",
                     DefaultValue = "null",
-                    Description = "Custom CSS classes/styles for the time-picker's main container of the BitDateRangePicker."
+                    Description = "Custom CSS classes/styles for the time-picker's wrapper of the BitDateRangePicker."
                 },
                 new()
                 {
-                    Name = "StartTimePickerWrapper",
+                    Name = "TimePickerHeader",
                     Type = "string?",
                     DefaultValue = "null",
-                    Description = "Custom CSS classes/styles for the start time-picker's wrapper of the BitDateRangePicker."
+                    Description = "Custom CSS classes/styles for the time-picker's header of the BitDateRangePicker."
                 },
                 new()
                 {
-                    Name = "EndTimePickerWrapper",
+                    Name = "TimePickerNavWrapper",
                     Type = "string?",
                     DefaultValue = "null",
-                    Description = "Custom CSS classes/styles for the end time-picker's wrapper of the BitDateRangePicker."
+                    Description = "Custom CSS classes/styles for the wrapper of the time-picker's nav buttons of the BitDateRangePicker."
                 },
                 new()
                 {
-                    Name = "TimePickerWrapper",
+                    Name = "ShowTimePickerButton",
                     Type = "string?",
                     DefaultValue = "null",
-                    Description = "Custom CSS classes/styles for the time-picker's wrapper of the BitDateRangePicker."
+                    Description = "Custom CSS classes/styles for the show time-picker button of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "ShowTimePickerIcon",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the show time-picker icon of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "HideTimePickerButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the hide time-picker button of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "HideTimePickerIcon",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the hide time-picker icon of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "TimeInputContainer",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the time's input container of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "StartTimeInputContainer",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the start time's input container of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "EndTimeInputContainer",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the end time's input container of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "StartTimeHourInputContainer",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the start time's hour input container of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "EndTimeHourInputContainer",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the end time's hour input container of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "StartTimeMinuteInputContainer",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the start time's minute input container of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "EndTimeMinuteInputContainer",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the end time's minute input container of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "StartTimeHourInput",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the start time's hour input of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "EndTimeHourInput",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the end time's hour input of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "StartTimeMinuteInput",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the start time's minute input of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "EndTimeMinuteInput",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the end time's minute input of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "StartTimeHourMinuteSeparator",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the start time's hour/minute separator of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "EndTimeHourMinuteSeparator",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the end time's hour/minute separator of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "StartTimeIncreaseHourButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the start time's increase hour button of the BitDateRangePicker."
                 },
                 new()
                 {
-                    Name = "TimePickerHourInput",
+                    Name = "StartTimeIncreaseHourIcon",
                     Type = "string?",
                     DefaultValue = "null",
-                    Description = "Custom CSS classes/styles for the time-picker's hour input of the BitDateRangePicker."
+                    Description = "Custom CSS classes/styles for the start time's increase hour icon of the BitDateRangePicker."
                 },
                 new()
                 {
-                    Name = "TimePickerDivider",
+                    Name = "StartTimeDecreaseHourButton",
                     Type = "string?",
                     DefaultValue = "null",
-                    Description = "Custom CSS classes/styles for the time-picker's divider of the BitDateRangePicker."
+                    Description = "Custom CSS classes/styles for the start time's decrease hour button of the BitDateRangePicker."
                 },
                 new()
                 {
-                    Name = "StartTimePickerAmPmContainer",
+                    Name = "StartTimeDecreaseHourIcon",
                     Type = "string?",
                     DefaultValue = "null",
-                    Description = "Custom CSS classes/styles for the start time-picker's minute input of the BitDateRangePicker."
+                    Description = "Custom CSS classes/styles for the start time's decrease hour icon of the BitDateRangePicker."
                 },
                 new()
                 {
-                    Name = "EndTimePickerAmPmContainer",
+                    Name = "StartTimeIncreaseMinuteButton",
                     Type = "string?",
                     DefaultValue = "null",
-                    Description = "Custom CSS classes/styles for the end time-picker's Am Pm container of the BitDateRangePicker."
+                    Description = "Custom CSS classes/styles for the start time's increase minute button of the BitDateRangePicker."
                 },
                 new()
                 {
-                    Name = "TimePickerAmPmContainer",
+                    Name = "StartTimeIncreaseMinuteIcon",
                     Type = "string?",
                     DefaultValue = "null",
-                    Description = "Custom CSS classes/styles for the time-picker's Am Pm container of the BitDateRangePicker."
+                    Description = "Custom CSS classes/styles for the start time's increase minute icon of the BitDateRangePicker."
                 },
                 new()
                 {
-                    Name = "TimePickerAmPmContainer",
+                    Name = "StartTimeDecreaseMinuteButton",
                     Type = "string?",
                     DefaultValue = "null",
-                    Description = "Custom CSS classes/styles for the time-picker's Am Pm container of the BitDateRangePicker."
+                    Description = "Custom CSS classes/styles for the start time's decrease minute button of the BitDateRangePicker."
                 },
                 new()
                 {
-                    Name = "TimePickerAmButton",
+                    Name = "StartTimeDecreaseMinuteIcon",
                     Type = "string?",
                     DefaultValue = "null",
-                    Description = "Custom CSS classes/styles for the time-picker's Am button of the BitDateRangePicker."
+                    Description = "Custom CSS classes/styles for the start time's decrease minute icon of the BitDateRangePicker."
                 },
                 new()
                 {
-                    Name = "TimePickerPmButton",
+                    Name = "EndTimeIncreaseHourButton",
                     Type = "string?",
                     DefaultValue = "null",
-                    Description = "Custom CSS classes/styles for the time-picker's Pm button of the BitDateRangePicker."
+                    Description = "Custom CSS classes/styles for the end time's increase hour button of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "EndTimeIncreaseHourIcon",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the end time's increase hour icon of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "EndTimeDecreaseHourButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the end time's decrease hour button of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "EndTimeDecreaseHourIcon",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the end time's decrease hour icon of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "EndTimeIncreaseMinuteButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the end time's increase minute button of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "EndTimeIncreaseMinuteIcon",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the end time's increase minute icon of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "EndTimeDecreaseMinuteButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the end time's decrease minute button of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "EndTimeDecreaseMinuteIcon",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the end time's decrease minute icon of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "StartTimeAmPmContainer",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the start time's Am Pm container of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "EndTimeAmPmContainer",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the end time's Am Pm container of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "StartTimeAmButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the start time's Am button of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "StartTimePmButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the start time's Pm button of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "EndTimeAmButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the end time's Am button of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "EndTimePmButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the end time's Pm button of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "StartTimeWrapper",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the start time's wrapper of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "EndTimeWrapper",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the end time's wrapper of the BitDateRangePicker."
                 },
                 new()
                 {
@@ -1284,6 +1760,32 @@ public partial class BitDateRangePickerDemo
 
     private readonly List<ComponentSubEnum> componentSubEnums =
     [
+        new()
+        {
+            Id = "color-enum",
+            Name = "BitColor",
+            Description = "Defines the general colors available in the bit BlazorUI.",
+            Items =
+            [
+                new() { Name = "Primary", Description = "Primary general color.", Value = "0" },
+                new() { Name = "Secondary", Description = "Secondary general color.", Value = "1" },
+                new() { Name = "Tertiary", Description = "Tertiary general color.", Value = "2" },
+                new() { Name = "Info", Description = "Info general color.", Value = "3" },
+                new() { Name = "Success", Description = "Success general color.", Value = "4" },
+                new() { Name = "Warning", Description = "Warning general color.", Value = "5" },
+                new() { Name = "SevereWarning", Description = "SevereWarning general color.", Value = "6" },
+                new() { Name = "Error", Description = "Error general color.", Value = "7" },
+                new() { Name = "PrimaryBackground", Description = "Primary background color.", Value = "8" },
+                new() { Name = "SecondaryBackground", Description = "Secondary background color.", Value = "9" },
+                new() { Name = "TertiaryBackground", Description = "Tertiary background color.", Value = "10" },
+                new() { Name = "PrimaryForeground", Description = "Primary foreground color.", Value = "11" },
+                new() { Name = "SecondaryForeground", Description = "Secondary foreground color.", Value = "12" },
+                new() { Name = "TertiaryForeground", Description = "Tertiary foreground color.", Value = "13" },
+                new() { Name = "PrimaryBorder", Description = "Primary border color.", Value = "14" },
+                new() { Name = "SecondaryBorder", Description = "Secondary border color.", Value = "15" },
+                new() { Name = "TertiaryBorder", Description = "Tertiary border color.", Value = "16" },
+            ]
+        },
         new()
         {
             Id = "icon-location-enum",
@@ -1334,6 +1836,80 @@ public partial class BitDateRangePickerDemo
 
     private BitDateRangePickerValue? classesValue;
 
+    private BitDateRangePickerValue? presetsValue;
+
+    private string? lastSelectedPreset;
+
+    private BitDateRangePickerValue? monthCountValue;
+
+    private readonly BitDateRangePickerPreset[] presets =
+    [
+        new()
+        {
+            Text = "Today",
+            ValueProvider = () => new() { StartDate = DateTimeOffset.Now.Date, EndDate = DateTimeOffset.Now.Date }
+        },
+        new()
+        {
+            Text = "Yesterday",
+            ValueProvider = () => new() { StartDate = DateTimeOffset.Now.Date.AddDays(-1), EndDate = DateTimeOffset.Now.Date.AddDays(-1) }
+        },
+        new()
+        {
+            Text = "Last 7 days",
+            ValueProvider = () => new() { StartDate = DateTimeOffset.Now.Date.AddDays(-6), EndDate = DateTimeOffset.Now.Date }
+        },
+        new()
+        {
+            Text = "Last 30 days",
+            ValueProvider = () => new() { StartDate = DateTimeOffset.Now.Date.AddDays(-29), EndDate = DateTimeOffset.Now.Date }
+        },
+        new()
+        {
+            Text = "This month",
+            ValueProvider = () =>
+            {
+                var now = DateTimeOffset.Now.Date;
+                var firstDay = new DateTime(now.Year, now.Month, 1);
+                return new() { StartDate = firstDay, EndDate = firstDay.AddMonths(1).AddDays(-1) };
+            }
+        },
+        new()
+        {
+            Text = "Coming soon",
+            IsEnabled = false,
+            Title = "This preset is not available yet"
+        },
+    ];
+
+    private readonly DateTimeOffset[] disabledDates =
+    [
+        DateTimeOffset.Now.AddDays(2),
+        DateTimeOffset.Now.AddDays(3),
+        DateTimeOffset.Now.AddDays(8),
+    ];
+
+    private readonly DateTimeOffset[] highlightedDates =
+    [
+        DateTimeOffset.Now.AddDays(1),
+        DateTimeOffset.Now.AddDays(2),
+        DateTimeOffset.Now.AddDays(3),
+    ];
+
+    private string SuccessMessage = string.Empty;
+    private FormValidationDateRangePickerModel validationModel = new();
+
+    private void HandleValidSubmit()
+    {
+        SuccessMessage = "Form Submitted Successfully!";
+        StateHasChanged();
+    }
+
+    private void HandleInvalidSubmit()
+    {
+        SuccessMessage = string.Empty;
+    }
+
     private BitDateRangePickerValue? selectedDateRange = new()
     {
         StartDate = new DateTimeOffset(2020, 1, 17, 0, 0, 0, DateTimeOffset.Now.Offset),
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs
index 41e163a5486..46205379e83 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs
@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.DateRangePicker;
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.DateRangePicker;
 
 public partial class BitDateRangePickerDemo
 {
@@ -12,7 +12,8 @@ public partial class BitDateRangePickerDemo
 <BitDateRangePicker Label=""TimePicker"" ShowTimePicker />
 <BitDateRangePicker Label=""Custom Icon"" IconName=""@BitIconName.Airplane"" />
 <BitDateRangePicker Label=""Disabled AutoClose"" AutoClose=""false"" />
-<BitDateRangePicker Label=""Show clear button when has a value"" ShowClearButton />
+<BitDateRangePicker Label=""Show clear button when has a value"" ShowClearButton ClearButtonTitle=""Clear the dates"" />
+<BitDateRangePicker Label=""Hidden month picker"" IsMonthPickerVisible=""false"" />
 <BitDateRangePicker Label=""StartingValue: December 2020, Start Time: 10:12, End Time: 16:59"" ShowTimePicker StartingValue=""startingValue"" />";
     private readonly string example1CsharpCode = @"
 private BitDateRangePickerValue? startingValue = new()
@@ -22,12 +23,127 @@ public partial class BitDateRangePickerDemo
 };";
 
     private readonly string example2RazorCode = @"
+<BitDateRangePicker Label=""Common ranges"" Presets=""presets"" @bind-Value=""presetsValue""
+                    OnPresetSelect=""@(preset => lastSelectedPreset = preset.Text)"" />
+<div>Selected: <b>@(presetsValue?.StartDate?.ToString(""d"") ?? ""-"") → @(presetsValue?.EndDate?.ToString(""d"") ?? ""-"")</b></div>
+<div>Last selected preset: <b>@(lastSelectedPreset ?? ""-"")</b></div>
+
+<BitDateRangePicker Label=""Presets in standalone mode"" Presets=""presets"" Standalone />";
+    private readonly string example2CsharpCode = @"
+private string? lastSelectedPreset;
+private BitDateRangePickerValue? presetsValue;
+
+private readonly BitDateRangePickerPreset[] presets =
+[
+    new()
+    {
+        Text = ""Today"",
+        ValueProvider = () => new() { StartDate = DateTimeOffset.Now.Date, EndDate = DateTimeOffset.Now.Date }
+    },
+    new()
+    {
+        Text = ""Yesterday"",
+        ValueProvider = () => new() { StartDate = DateTimeOffset.Now.Date.AddDays(-1), EndDate = DateTimeOffset.Now.Date.AddDays(-1) }
+    },
+    new()
+    {
+        Text = ""Last 7 days"",
+        ValueProvider = () => new() { StartDate = DateTimeOffset.Now.Date.AddDays(-6), EndDate = DateTimeOffset.Now.Date }
+    },
+    new()
+    {
+        Text = ""Last 30 days"",
+        ValueProvider = () => new() { StartDate = DateTimeOffset.Now.Date.AddDays(-29), EndDate = DateTimeOffset.Now.Date }
+    },
+    new()
+    {
+        Text = ""This month"",
+        ValueProvider = () =>
+        {
+            var now = DateTimeOffset.Now.Date;
+            var firstDay = new DateTime(now.Year, now.Month, 1);
+            return new() { StartDate = firstDay, EndDate = firstDay.AddMonths(1).AddDays(-1) };
+        }
+    },
+    new()
+    {
+        Text = ""Coming soon"",
+        IsEnabled = false,
+        Title = ""This preset is not available yet""
+    },
+];";
+
+    private readonly string example3RazorCode = @"
 <BitDateRangePicker MinDate=""DateTimeOffset.Now.AddDays(-5)"" MaxDate=""DateTimeOffset.Now.AddDays(5)"" />
 <BitDateRangePicker MinDate=""DateTimeOffset.Now.AddMonths(-2)"" MaxDate=""DateTimeOffset.Now.AddMonths(1)"" />
 <BitDateRangePicker MinDate=""DateTimeOffset.Now.AddYears(-5)"" MaxDate=""DateTimeOffset.Now.AddYears(1)"" />
-<BitDateRangePicker MaxRange=""new TimeSpan(2, 4, 30, 0)"" ShowTimePicker />";
+<BitDateRangePicker MaxRange=""new TimeSpan(2, 4, 30, 0)"" ShowTimePicker />
+<BitDateRangePicker MinRange=""TimeSpan.FromDays(3)"" />
+<BitDateRangePicker MinRange=""TimeSpan.FromDays(2)"" MaxRange=""TimeSpan.FromDays(7)"" />";
 
-    private readonly string example3RazorCode = @"
+    private readonly string example4RazorCode = @"
+<BitDateRangePicker DisabledDaysOfWeek=""@([DayOfWeek.Saturday, DayOfWeek.Sunday])"" />
+
+<BitDateRangePicker DisabledDates=""disabledDates"" />
+
+<BitDateRangePicker IsDateDisabled=""@(date => date.Date < DateTimeOffset.Now.Date)"" />
+
+<BitDateRangePicker DisabledDates=""disabledDates"" ExcludeDisabledDates />";
+    private readonly string example4CsharpCode = @"
+private readonly DateTimeOffset[] disabledDates =
+[
+    DateTimeOffset.Now.AddDays(2),
+    DateTimeOffset.Now.AddDays(3),
+    DateTimeOffset.Now.AddDays(8),
+];";
+
+    private readonly string example5RazorCode = @"
+<style>
+    .custom-friday {
+        color: white;
+        background-color: #8a2be29c;
+    }
+</style>
+
+
+<BitDateRangePicker HighlightedDates=""highlightedDates"" />
+
+<BitDateRangePicker GetDayClass=""@(date => date.DayOfWeek == DayOfWeek.Friday ? ""custom-friday"" : null)"" />";
+    private readonly string example5CsharpCode = @"
+private readonly DateTimeOffset[] highlightedDates =
+[
+    DateTimeOffset.Now.AddDays(1),
+    DateTimeOffset.Now.AddDays(2),
+    DateTimeOffset.Now.AddDays(3),
+];";
+
+    private readonly string example6RazorCode = @"
+<BitDateRangePicker Label=""FirstDayOfWeek: Monday"" FirstDayOfWeek=""DayOfWeek.Monday"" />
+
+<BitDateRangePicker Label=""ShowOutsideDays: false"" ShowOutsideDays=""false"" />
+
+<BitDateRangePicker Label=""FixedWeeks (always six rows)"" FixedWeeks />
+
+<BitDateRangePicker Label=""WeekNumberRule: FirstFourDayWeek""
+                    ShowWeekNumbers
+                    FirstDayOfWeek=""DayOfWeek.Monday""
+                    WeekNumberRule=""System.Globalization.CalendarWeekRule.FirstFourDayWeek"" />
+
+<BitDateRangePicker Label=""Today: 2020/12/04"" Today=""new DateTimeOffset(2020, 12, 4, 0, 0, 0, DateTimeOffset.Now.Offset)"" />";
+
+    private readonly string example7RazorCode = @"
+<BitDateRangePicker Label=""Two months"" MonthCount=""2"" @bind-Value=""monthCountValue"" />
+<div>Selected: <b>@(monthCountValue?.StartDate?.ToString(""d"") ?? ""-"") → @(monthCountValue?.EndDate?.ToString(""d"") ?? ""-"")</b></div>
+
+<BitDateRangePicker Label=""Two months with presets"" MonthCount=""2"" Presets=""presets"" />
+
+<BitDateRangePicker Label=""Three months with week numbers"" MonthCount=""3"" ShowWeekNumbers />
+
+<BitDateRangePicker Label=""Two months in standalone mode"" MonthCount=""2"" Standalone />";
+    private readonly string example7CsharpCode = @"
+private BitDateRangePickerValue? monthCountValue;";
+
+    private readonly string example8RazorCode = @"
 <BitDateRangePicker ShowTimePicker
                     Label=""HourStep = 2""
                     HourStep=""2"" />
@@ -36,22 +152,38 @@ public partial class BitDateRangePickerDemo
                     Label=""MinuteStep = 15""
                     MinuteStep=""15"" />";
 
-    private readonly string example4RazorCode = @"
+    private readonly string example9RazorCode = @"
 <BitDateRangePicker Label=""DateFormat: 'dd=MM(yy)'"" DateFormat=""dd=MM(yy)"" />
-<BitDateRangePicker Label=""ValueFormat: 'Dep: {0}, Arr: {1}'"" ValueFormat=""Dep: {0}, Arr: {1}"" />";
+<BitDateRangePicker Label=""ValueFormat: 'Dep: {0}, Arr: {1}'"" ValueFormat=""Dep: {0}, Arr: {1}"" />
+<BitDateRangePicker Label=""NoDateText: 'open ended'"" NoDateText=""open ended"" ValueFormat=""{0} - {1}"" />
+<BitDateRangePicker Label=""Default format with the time picker"" ShowTimePicker />";
 
-    private readonly string example5RazorCode = @"
+    private readonly string example10RazorCode = @"
+<BitDateRangePicker Label=""Text input allowed""
+                    AllowTextInput
+                    DateFormat=""dd/MM/yyyy""
+                    ValueFormat=""{0} - {1}""
+                    Placeholder=""dd/MM/yyyy - dd/MM/yyyy"" />
+
+<BitDateRangePicker Label=""Custom invalid error message""
+                    AllowTextInput
+                    DateFormat=""dd/MM/yyyy""
+                    ValueFormat=""{0} - {1}""
+                    InvalidErrorMessage=""The entered date range is not valid.""
+                    Placeholder=""dd/MM/yyyy - dd/MM/yyyy"" />";
+
+    private readonly string example11RazorCode = @"
 <BitDateRangePicker @bind-Value=""@selectedDateRange"" />
 <div>From: <b>@selectedDateRange?.StartDate.ToString()</b></div>
 <div>To: <b>@selectedDateRange?.EndDate.ToString()</b></div>";
-    private readonly string example5CsharpCode = @"
+    private readonly string example11CsharpCode = @"
 private BitDateRangePickerValue? selectedDateRange = new()
 {
     StartDate = new DateTimeOffset(2020, 1, 17, 0, 0, 0, DateTimeOffset.Now.Offset),
     EndDate = new DateTimeOffset(2020, 1, 25, 0, 0, 0, DateTimeOffset.Now.Offset)
 };";
 
-    private readonly string example6RazorCode = @"
+    private readonly string example12RazorCode = @"
 <BitDateRangePicker Label=""fa-IR culture with Farsi names""
                     GoToTodayTitle=""برو به امروز""
                     ValueFormat=""شروع: {0}, پایان: {1}""
@@ -62,7 +194,7 @@ public partial class BitDateRangePickerDemo
                     ValueFormat=""Shoro: {0}, Payan: {1}""
                     Culture=""CultureInfoHelper.GetFaIrCultureWithFingilishNames()"" />";
 
-    private readonly string example7RazorCode = @"
+    private readonly string example13RazorCode = @"
 <BitDateRangePicker @bind-Value=""@timeZoneDateRange1"" ShowTimePicker />
 <div>Selected date range: from @(timeZoneDateRange1?.StartDate?.ToString() ?? ""-"") to @(timeZoneDateRange1?.EndDate?.ToString() ?? ""-"")</div>
 
@@ -80,30 +212,30 @@ public partial class BitDateRangePickerDemo
     <BitDateRangePicker TimeZone=""timeZoneInfo"" @bind-Value=""@timeZoneDateRange2"" ShowTimePicker />
     <div>Selected date range: from @(timeZoneDateRange2?.StartDate?.ToString() ?? ""-"") to @(timeZoneDateRange2?.EndDate?.ToString() ?? ""-"")</div>
 }";
-    private readonly string example7CsharpCode = @"
+    private readonly string example13CsharpCode = @"
 private BitDateRangePickerValue? timeZoneDateRange1 = new();
 private BitDateRangePickerValue? timeZoneDateRange2 = new();";
 
-    private readonly string example8RazorCode = @"
+    private readonly string example14RazorCode = @"
 <BitDateRangePicker Label=""Basic DatePicker"" Standalone />
 <BitDateRangePicker Label=""Disabled"" IsEnabled=""false"" Standalone />
 <BitDateRangePicker Label=""Week numbers"" ShowWeekNumbers Standalone />
 <BitDateRangePicker Label=""Highlight months"" HighlightCurrentMonth HighlightSelectedMonth Standalone />
 <BitDateRangePicker Label=""TimePicker"" ShowTimePicker Standalone />";
 
-    private readonly string example9RazorCode = @"
+    private readonly string example15RazorCode = @"
 <BitDateRangePicker Label=""Basic"" ReadOnly @bind-Value=""readOnlyDateRange"" />
 <BitDateRangePicker Label=""Text input allowed"" ReadOnly AllowTextInput @bind-Value=""readOnlyDateRange"" />
 <BitDateRangePicker Label=""Standalone"" ReadOnly Standalone @bind-Value=""readOnlyDateRange"" />
 <BitDateRangePicker Label=""Standalone with TimePicker"" ReadOnly ShowTimePicker Standalone @bind-Value=""readOnlyDateRange"" />";
-    private readonly string example9CsharpCode = @"
+    private readonly string example15CsharpCode = @"
 private BitDateRangePickerValue? readOnlyDateRange = new()
 {
     StartDate = new DateTimeOffset(2024, 12, 8, 12, 15, 0, DateTimeOffset.Now.Offset),
     EndDate = new DateTimeOffset(2024, 12, 12, 16, 45, 0, DateTimeOffset.Now.Offset),
 };";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example16RazorCode = @"
 <BitDateRangePicker>
     <LabelTemplate>
         Custom label <BitIcon IconName=""@BitIconName.Calendar"" />
@@ -139,16 +271,78 @@ public partial class BitDateRangePickerDemo
         </span>
     </YearCellTemplate>
 </BitDateRangePicker>";
-    private readonly string example10CsharpCode = @"
+    private readonly string example16CsharpCode = @"
 private CultureInfo culture = CultureInfo.CurrentUICulture;";
 
-    private readonly string example11RazorCode = @"
+    private readonly string example17RazorCode = @"
 <BitDateRangePicker Label=""Responsive DateRangePicker""
                     Responsive
                     ShowWeekNumbers
                     Placeholder=""Select a date range"" />";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example18RazorCode = @"
+<EditForm Model=""validationModel"" OnValidSubmit=""HandleValidSubmit"" OnInvalidSubmit=""HandleInvalidSubmit"">
+    <DataAnnotationsValidator />
+
+    <BitDateRangePicker @bind-Value=""validationModel.DateRange"" />
+
+    <ValidationMessage For=""@(() => validationModel.DateRange)"" />
+
+    <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
+    <BitButton ButtonType=""BitButtonType.Reset"" Variant=""BitVariant.Outline""
+               OnClick=""() => { validationModel = new(); SuccessMessage = string.Empty; }"">
+        Reset
+    </BitButton>
+</EditForm>
+
+@if (string.IsNullOrEmpty(SuccessMessage) is false)
+{
+    <BitMessage Color=""BitColor.Success"">@SuccessMessage</BitMessage>
+}";
+    private readonly string example18CsharpCode = @"
+public class FormValidationDateRangePickerModel
+{
+    [Required(ErrorMessage = ""The date range is required."")]
+    [CompleteDateRange(ErrorMessage = ""Both the start and the end dates are required."")]
+    public BitDateRangePickerValue? DateRange { get; set; }
+}
+
+// The end date of a BitDateRangePickerValue stays null while only the first date has been picked.
+public class CompleteDateRangeAttribute : ValidationAttribute
+{
+    public override bool IsValid(object? value)
+    {
+        if (value is not BitDateRangePickerValue range) return true;
+
+        return range.StartDate.HasValue && range.EndDate.HasValue;
+    }
+}
+
+private string SuccessMessage = string.Empty;
+private FormValidationDateRangePickerModel validationModel = new();
+
+private void HandleValidSubmit()
+{
+    SuccessMessage = ""Form Submitted Successfully!"";
+    StateHasChanged();
+}
+
+private void HandleInvalidSubmit()
+{
+    SuccessMessage = string.Empty;
+}";
+
+    private readonly string example19RazorCode = @"
+<BitDateRangePicker Label=""Primary"" Color=""BitColor.Primary"" ShowTimePicker />
+<BitDateRangePicker Label=""Secondary"" Color=""BitColor.Secondary"" />
+<BitDateRangePicker Label=""Tertiary"" Color=""BitColor.Tertiary"" />
+<BitDateRangePicker Label=""Info"" Color=""BitColor.Info"" />
+<BitDateRangePicker Label=""Success"" Color=""BitColor.Success"" />
+<BitDateRangePicker Label=""Warning"" Color=""BitColor.Warning"" />
+<BitDateRangePicker Label=""SevereWarning"" Color=""BitColor.SevereWarning"" />
+<BitDateRangePicker Label=""Error"" Color=""BitColor.Error"" />";
+
+    private readonly string example20RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 
 <BitDateRangePicker Label=""FontAwesome (string)"" Icon=""@(""fa-solid fa-calendar-days"")"" />
@@ -202,7 +396,7 @@ public partial class BitDateRangePickerDemo
                    NextYearRangeNavIcon=""@BitIconInfo.Bi(""chevron-double-right"")""
                    GoToTodayIcon=""@BitIconInfo.Bi(""calendar-event"")"" />";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example21RazorCode = @"
 <style>
     .custom-class {
         overflow: hidden;
@@ -304,6 +498,10 @@ public partial class BitDateRangePickerDemo
         background-color: violet;
     }
 
+    .custom-hovered-days {
+        background-color: #9726ff2e;
+    }
+
     .custom-week-header {
         color: white;
         margin: 0.15rem;
@@ -356,6 +554,7 @@ public partial class BitDateRangePickerDemo
                                       Divider = ""border-color: mediumseagreen;"",
                                       DayPickerMonth = ""color: darkgreen;"",
                                       TodayDayButton = ""background-color: green;"",
+                                      HoveredDayButtons = ""background-color: #b4f5b47a;"",
                                       SelectedDayButtons = ""background-color: #36fa368c;"",
                                       EndTimeInputContainer = ""margin-top: 0.5rem;"",
                                       StartAndEndSelectionDays = ""background-color: limegreen;"",
@@ -381,15 +580,16 @@ public partial class BitDateRangePickerDemo
                                        TodayDayButton = ""custom-today-day"",
                                        StartAndEndSelectionDays = ""custom-start-end"",
                                        SelectedDayButtons = ""custom-selected-days"",
+                                       HoveredDayButtons = ""custom-hovered-days"",
                                        PrevMonthNavButton = ""custom-prev-month"",
                                        NextMonthNavButton = ""custom-next-month"",
                                        DayPickerMonth = ""custom-day-month"",
                                        DayPickerHeader = ""custom-day-header"",
                                        WeekNumbersHeader = ""custom-week-header"",
                                        YearMonthPickerWrapper = ""custom-year-picker"" })"" />";
-    private readonly string example13CsharpCode = @"
+    private readonly string example21CsharpCode = @"
 private BitDateRangePickerValue? classesValue;";
 
-    private readonly string example14RazorCode = @"
+    private readonly string example22RazorCode = @"
 <BitDateRangePicker Dir=""BitDir.Rtl"" />";
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.scss
index 1a0a6471771..1e0b79d41cc 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.scss
@@ -34,6 +34,15 @@
 }
 
 ::deep {
+    .custom-friday {
+        color: white;
+        background-color: #8a2be29c;
+    }
+
+    .custom-hovered-days {
+        background-color: #9726ff2e;
+    }
+
     .custom-class {
         overflow: hidden;
         margin-inline: 1rem;
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/FormValidationDateRangePickerModel.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/FormValidationDateRangePickerModel.cs
index cdb2786ac63..c29d34c401a 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/FormValidationDateRangePickerModel.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/FormValidationDateRangePickerModel.cs
@@ -1,7 +1,22 @@
-namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.DateRangePicker;
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.DateRangePicker;
 
 public class FormValidationDateRangePickerModel
 {
-    [Required]
-    public DateTimeOffset? Date { get; set; }
+    [Required(ErrorMessage = "The date range is required.")]
+    [CompleteDateRange(ErrorMessage = "Both the start and the end dates are required.")]
+    public BitDateRangePickerValue? DateRange { get; set; }
+}
+
+/// <summary>
+/// Validates that a picked range is complete, since the end date of a BitDateRangePickerValue
+/// stays null while only the first date of the range has been selected.
+/// </summary>
+public class CompleteDateRangeAttribute : ValidationAttribute
+{
+    public override bool IsValid(object? value)
+    {
+        if (value is not BitDateRangePickerValue range) return true;
+
+        return range.StartDate.HasValue && range.EndDate.HasValue;
+    }
 }
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs
index c597a935146..188fdb76942 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs
@@ -690,7 +690,26 @@ public void BitDateRangePickerNextYearRangeNavIconTest()
             $"Expected 'fa-angles-right' on NextYearRangeNavIcon but got: {string.Join(' ', icon.ClassList)}");
     }
 
-    [Ignore]
+    // The show/hide time-picker buttons only exist once the callout has been opened through a click,
+    // since that is what puts the time picker into its overlay mode.
+    private static IRenderedComponent<BitDateRangePicker> RenderOpenedOverlayTimePicker(
+        Action<ComponentParameterCollectionBuilder<BitDateRangePicker>> parameterBuilder,
+        BunitContext context)
+    {
+        var isOpen = false;
+        var component = context.Render<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.ShowTimePickerAsOverlay, true);
+            parameterBuilder(parameters);
+        });
+
+        component.Find(".bit-dtrp-wrp").Click();
+
+        return component;
+    }
+
     [TestMethod,
         DataRow("Clock", "bit-icon--Clock"),
         DataRow(null, "bit-icon--Clock")
@@ -699,43 +718,41 @@ public void BitDateRangePickerShowTimePickerIconNameTest(string? iconName, strin
     {
         Context.JSInterop.Mode = JSRuntimeMode.Loose;
 
-        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        var component = RenderOpenedOverlayTimePicker(parameters =>
         {
-            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.Classes, new BitDateRangePickerClassStyles { ShowTimePickerIcon = "show-time-picker-icon" });
 
             if (iconName is not null)
             {
                 parameters.Add(p => p.ShowTimePickerIconName, iconName);
             }
-        });
+        }, Context);
 
-        var icon = component.FindAll("i").FirstOrDefault(i => i.ClassList.Contains(expectedClass));
+        var icon = component.Find(".show-time-picker-icon");
 
-        Assert.IsNotNull(icon,
-            $"Expected class '{expectedClass}' on ShowTimePickerIcon but no matching icon element was found.");
+        Assert.IsTrue(icon.ClassList.Contains(expectedClass),
+            $"Expected class '{expectedClass}' on ShowTimePickerIcon but got: {string.Join(' ', icon.ClassList)}");
     }
 
-    [Ignore]
     [TestMethod]
     public void BitDateRangePickerShowTimePickerIconTest()
     {
         Context.JSInterop.Mode = JSRuntimeMode.Loose;
 
-        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        var component = RenderOpenedOverlayTimePicker(parameters =>
         {
-            parameters.Add(p => p.ShowTimePicker, true);
             parameters.Add(p => p.ShowTimePickerIcon, BitIconInfo.Css("fa-solid fa-clock"));
-        });
+            parameters.Add(p => p.Classes, new BitDateRangePickerClassStyles { ShowTimePickerIcon = "show-time-picker-icon" });
+        }, Context);
 
-        var icon = component.FindAll("i").FirstOrDefault(i => i.ClassList.Contains("fa-clock"));
+        var icon = component.Find(".show-time-picker-icon");
 
-        Assert.IsNotNull(icon,
-            $"Expected 'fa-clock' on ShowTimePickerIcon but no matching icon element was found.");
         Assert.IsTrue(icon.ClassList.Contains("fa-solid"),
             $"Expected 'fa-solid' on ShowTimePickerIcon but got: {string.Join(' ', icon.ClassList)}");
+        Assert.IsTrue(icon.ClassList.Contains("fa-clock"),
+            $"Expected 'fa-clock' on ShowTimePickerIcon but got: {string.Join(' ', icon.ClassList)}");
     }
 
-    [Ignore]
     [TestMethod,
         DataRow("CalendarSolid", "bit-icon--CalendarSolid"),
         DataRow(null, "bit-icon--CalendarMirrored")
@@ -744,40 +761,52 @@ public void BitDateRangePickerHideTimePickerIconNameTest(string? iconName, strin
     {
         Context.JSInterop.Mode = JSRuntimeMode.Loose;
 
-        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        var component = RenderOpenedOverlayTimePicker(parameters =>
         {
-            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.Classes, new BitDateRangePickerClassStyles
+            {
+                ShowTimePickerButton = "show-time-picker-button",
+                HideTimePickerIcon = "hide-time-picker-icon"
+            });
 
             if (iconName is not null)
             {
                 parameters.Add(p => p.HideTimePickerIconName, iconName);
             }
-        });
+        }, Context);
 
-        var icon = component.FindAll("i").FirstOrDefault(i => i.ClassList.Contains(expectedClass));
+        // Bring the time picker overlay on top so its hide button gets rendered.
+        component.Find(".show-time-picker-button").Click();
 
-        Assert.IsNotNull(icon,
-            $"Expected class '{expectedClass}' on HideTimePickerIcon but no matching icon element was found.");
+        var icon = component.Find(".hide-time-picker-icon");
+
+        Assert.IsTrue(icon.ClassList.Contains(expectedClass),
+            $"Expected class '{expectedClass}' on HideTimePickerIcon but got: {string.Join(' ', icon.ClassList)}");
     }
 
-    [Ignore]
     [TestMethod]
     public void BitDateRangePickerHideTimePickerIconTest()
     {
         Context.JSInterop.Mode = JSRuntimeMode.Loose;
 
-        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        var component = RenderOpenedOverlayTimePicker(parameters =>
         {
-            parameters.Add(p => p.ShowTimePicker, true);
             parameters.Add(p => p.HideTimePickerIcon, BitIconInfo.Css("fa-solid fa-calendar"));
-        });
+            parameters.Add(p => p.Classes, new BitDateRangePickerClassStyles
+            {
+                ShowTimePickerButton = "show-time-picker-button",
+                HideTimePickerIcon = "hide-time-picker-icon"
+            });
+        }, Context);
 
-        var icon = component.FindAll("i").FirstOrDefault(i => i.ClassList.Contains("fa-calendar"));
+        component.Find(".show-time-picker-button").Click();
+
+        var icon = component.Find(".hide-time-picker-icon");
 
-        Assert.IsNotNull(icon,
-            $"Expected 'fa-calendar' on HideTimePickerIcon but no matching icon element was found.");
         Assert.IsTrue(icon.ClassList.Contains("fa-solid"),
             $"Expected 'fa-solid' on HideTimePickerIcon but got: {string.Join(' ', icon.ClassList)}");
+        Assert.IsTrue(icon.ClassList.Contains("fa-calendar"),
+            $"Expected 'fa-calendar' on HideTimePickerIcon but got: {string.Join(' ', icon.ClassList)}");
     }
 
     [TestMethod,
@@ -1171,4 +1200,1424 @@ public void BitDateRangePickerShouldRespectDefaultValue()
         Assert.AreEqual(defaultValue.StartDate, component.Instance.Value!.StartDate);
         Assert.AreEqual(defaultValue.EndDate, component.Instance.Value!.EndDate);
     }
+
+    [TestMethod,
+        DataRow(null, "bit-dtrp-pri"),
+        DataRow(BitColor.Primary, "bit-dtrp-pri"),
+        DataRow(BitColor.Secondary, "bit-dtrp-sec"),
+        DataRow(BitColor.Tertiary, "bit-dtrp-ter"),
+        DataRow(BitColor.Info, "bit-dtrp-inf"),
+        DataRow(BitColor.Success, "bit-dtrp-suc"),
+        DataRow(BitColor.Warning, "bit-dtrp-wrn"),
+        DataRow(BitColor.SevereWarning, "bit-dtrp-swr"),
+        DataRow(BitColor.Error, "bit-dtrp-err")
+    ]
+    public void BitDateRangePickerColorTest(BitColor? color, string expectedClass)
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.Color, color);
+        });
+
+        Assert.IsTrue(component.Find(".bit-dtrp").ClassList.Contains(expectedClass));
+        // The callout is rendered outside of the root element, so it carries the color class on its own.
+        Assert.IsTrue(component.Find(".bit-dtrp-cal").ClassList.Contains(expectedClass));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerDisabledDaysOfWeekTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.Today, new DateTimeOffset(2024, 6, 12, 0, 0, 0, TimeSpan.Zero));
+            parameters.Add(p => p.DisabledDaysOfWeek, new[] { DayOfWeek.Saturday, DayOfWeek.Sunday });
+        });
+
+        var days = component.FindAll(".bit-dtrp-dbt");
+
+        // June 2024 starts on a Saturday, so the very first rendered cell is a disabled weekend day.
+        Assert.IsTrue(days.Count(d => d.HasAttribute("disabled")) > 0);
+        Assert.IsTrue(days[0].HasAttribute("disabled"));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerDisabledDatesTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var today = DateTimeOffset.Now.Date;
+        var disabledDate = new DateTimeOffset(today.AddDays(1), DateTimeOffset.Now.Offset);
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.DisabledDates, new[] { disabledDate });
+        });
+
+        var disabledCount = component.FindAll(".bit-dtrp-dbt").Count(d => d.HasAttribute("disabled"));
+
+        Assert.AreEqual(1, disabledCount);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerIsDateDisabledTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.IsDateDisabled, (DateTimeOffset date) => date.Day % 2 == 0);
+        });
+
+        var days = component.FindAll(".bit-dtrp-dbt");
+
+        Assert.IsTrue(days.Count(d => d.HasAttribute("disabled")) > 0);
+        Assert.IsTrue(days.All(d => d.HasAttribute("disabled") is false || int.Parse(d.TextContent.Trim()) % 2 == 0));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerDisabledDateShouldNotBeSelectable()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var isOpen = true;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+            parameters.Add(p => p.IsDateDisabled, (DateTimeOffset _) => true);
+        });
+
+        component.FindAll(".bit-dtrp-dbt")[0].Click();
+
+        Assert.IsNull(component.Instance.Value);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerHighlightedDatesTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var highlightedDate = new DateTimeOffset(DateTimeOffset.Now.Date.AddDays(1), DateTimeOffset.Now.Offset);
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.HighlightedDates, new[] { highlightedDate });
+        });
+
+        Assert.AreEqual(1, component.FindAll(".bit-dtrp-dhl").Count);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerGetDayClassTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.GetDayClass, (DateTimeOffset date) => date.DayOfWeek == DayOfWeek.Friday ? "custom-day" : null);
+        });
+
+        var fridays = component.FindAll(".custom-day");
+
+        Assert.IsTrue(fridays.Count >= 4);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerFirstDayOfWeekTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.FirstDayOfWeek, DayOfWeek.Monday);
+        });
+
+        var firstHeaderCell = component.FindAll(".bit-dtrp-dgh .bit-dtrp-wlb")[0];
+
+        Assert.AreEqual("Monday", firstHeaderCell.GetAttribute("title"));
+    }
+
+    [TestMethod,
+        DataRow(true),
+        DataRow(false)
+    ]
+    public void BitDateRangePickerShowOutsideDaysTest(bool showOutsideDays)
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ShowOutsideDays, showOutsideDays);
+            parameters.Add(p => p.Today, new DateTimeOffset(2024, 6, 12, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        var emptyCells = component.FindAll(".bit-dtrp-dbe");
+        var outsideDays = component.FindAll(".bit-dtrp-dbo");
+
+        if (showOutsideDays)
+        {
+            Assert.AreEqual(0, emptyCells.Count);
+            Assert.IsTrue(outsideDays.Count > 0);
+        }
+        else
+        {
+            Assert.IsTrue(emptyCells.Count > 0);
+            Assert.AreEqual(0, outsideDays.Count);
+        }
+    }
+
+    [TestMethod,
+        DataRow(true),
+        DataRow(false)
+    ]
+    public void BitDateRangePickerFixedWeeksTest(bool fixedWeeks)
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        // February 2021 starts on a Monday and has exactly 28 days, so it only fills 5 rows
+        // (4 without the leading week) unless FixedWeeks pads it up to 6.
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.FixedWeeks, fixedWeeks);
+            parameters.Add(p => p.Today, new DateTimeOffset(2021, 2, 10, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        var rows = component.FindAll(".bit-dtrp-dgr");
+
+        if (fixedWeeks)
+        {
+            Assert.AreEqual(6, rows.Count);
+        }
+        else
+        {
+            Assert.IsTrue(rows.Count < 6);
+        }
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerTodayTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.Today, new DateTimeOffset(2020, 12, 4, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        var todayCell = component.Find(".bit-dtrp-dtd");
+
+        Assert.AreEqual("4", todayCell.TextContent.Trim());
+        Assert.AreEqual("date", todayCell.GetAttribute("aria-current"));
+    }
+
+    [TestMethod,
+        DataRow(true),
+        DataRow(false)
+    ]
+    public void BitDateRangePickerIsMonthPickerVisibleTest(bool isMonthPickerVisible)
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.IsMonthPickerVisible, isMonthPickerVisible);
+        });
+
+        // The day picker must always stay visible.
+        Assert.AreEqual(1, component.FindAll(".bit-dtrp-dwp").Count);
+        Assert.AreEqual(isMonthPickerVisible ? 1 : 0, component.FindAll(".bit-dtrp-mwp").Count);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerHiddenMonthPickerWithTimePickerTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.IsMonthPickerVisible, false);
+        });
+
+        // Hiding the month picker must not take the day picker or the time picker down with it.
+        Assert.AreEqual(1, component.FindAll(".bit-dtrp-dwp").Count);
+        Assert.AreEqual(1, component.FindAll(".bit-dtrp-twp").Count);
+        Assert.AreEqual(0, component.FindAll(".bit-dtrp-mwp").Count);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerWeekNumberTitleTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ShowWeekNumbers, true);
+            parameters.Add(p => p.WeekNumberTitle, "W {0}");
+        });
+
+        var weekNumber = component.FindAll(".bit-dtrp-wnm")[0];
+
+        Assert.AreEqual($"W {weekNumber.TextContent.Trim()}", weekNumber.GetAttribute("title"));
+        Assert.AreEqual(weekNumber.GetAttribute("title"), weekNumber.GetAttribute("aria-label"));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerSelectedDateAriaAtomicTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.SelectedDateAriaAtomic, "Picked {0}");
+            parameters.Add(p => p.ValueFormat, "{0}~{1}");
+            parameters.Add(p => p.DateFormat, "yyyy-MM-dd");
+            parameters.Add(p => p.Value, new BitDateRangePickerValue
+            {
+                StartDate = new DateTimeOffset(2024, 3, 1, 0, 0, 0, TimeSpan.Zero),
+                EndDate = new DateTimeOffset(2024, 3, 5, 0, 0, 0, TimeSpan.Zero)
+            });
+        });
+
+        Assert.AreEqual("Picked 2024-03-01~2024-03-05", component.Find(".bit-dtrp-sdt").TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerFormatValueAsStringTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.DateFormat, "yyyy-MM-dd");
+            parameters.Add(p => p.Value, new BitDateRangePickerValue
+            {
+                StartDate = new DateTimeOffset(2024, 3, 1, 0, 0, 0, TimeSpan.Zero)
+            });
+        });
+
+        // A range without an end date renders the "---" placeholder.
+        Assert.AreEqual("Start: 2024-03-01 - End: ---", component.Find(".bit-dtrp-inp").GetAttribute("value"));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerAllowTextInputTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.AllowTextInput, true);
+            parameters.Add(p => p.DateFormat, "yyyy-MM-dd");
+            parameters.Add(p => p.ValueFormat, "{0} - {1}");
+        });
+
+        component.Find(".bit-dtrp-inp").Change("2024-03-01 - 2024-03-05");
+
+        Assert.IsNotNull(component.Instance.Value);
+        Assert.AreEqual(new DateTime(2024, 3, 1), component.Instance.Value!.StartDate!.Value.DateTime);
+        Assert.AreEqual(new DateTime(2024, 3, 5), component.Instance.Value!.EndDate!.Value.DateTime);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerAllowTextInputShouldSwapReversedDates()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.AllowTextInput, true);
+            parameters.Add(p => p.DateFormat, "yyyy-MM-dd");
+            parameters.Add(p => p.ValueFormat, "{0} - {1}");
+        });
+
+        component.Find(".bit-dtrp-inp").Change("2024-03-05 - 2024-03-01");
+
+        Assert.AreEqual(new DateTime(2024, 3, 1), component.Instance.Value!.StartDate!.Value.DateTime);
+        Assert.AreEqual(new DateTime(2024, 3, 5), component.Instance.Value!.EndDate!.Value.DateTime);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerAllowTextInputShouldAcceptAnOpenEndedRange()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.AllowTextInput, true);
+            parameters.Add(p => p.DateFormat, "yyyy-MM-dd");
+            parameters.Add(p => p.ValueFormat, "{0} - {1}");
+        });
+
+        component.Find(".bit-dtrp-inp").Change("2024-03-01 - ---");
+
+        Assert.AreEqual(new DateTime(2024, 3, 1), component.Instance.Value!.StartDate!.Value.DateTime);
+        Assert.IsNull(component.Instance.Value!.EndDate);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerAllowTextInputShouldClearOnEmptyText()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        BitDateRangePickerValue? value = new()
+        {
+            StartDate = new DateTimeOffset(2024, 3, 1, 0, 0, 0, TimeSpan.Zero),
+            EndDate = new DateTimeOffset(2024, 3, 5, 0, 0, 0, TimeSpan.Zero)
+        };
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.AllowTextInput, true);
+            parameters.Add(p => p.DateFormat, "yyyy-MM-dd");
+            parameters.Add(p => p.ValueFormat, "{0} - {1}");
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        component.Find(".bit-dtrp-inp").Change(string.Empty);
+
+        Assert.IsNull(component.Instance.Value);
+        Assert.IsNull(value);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerAllowTextInputShouldRejectAnInvalidText()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.AllowTextInput, true);
+            parameters.Add(p => p.DateFormat, "yyyy-MM-dd");
+            parameters.Add(p => p.ValueFormat, "{0} - {1}");
+        });
+
+        component.Find(".bit-dtrp-inp").Change("not a date range");
+
+        Assert.IsNull(component.Instance.Value);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerTextInputShouldBeIgnoredWhenNotAllowed()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.DateFormat, "yyyy-MM-dd");
+            parameters.Add(p => p.ValueFormat, "{0} - {1}");
+        });
+
+        component.Find(".bit-dtrp-inp").Change("2024-03-01 - 2024-03-05");
+
+        Assert.IsNull(component.Instance.Value);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerMinRangeTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var isOpen = true;
+        var startDate = new DateTimeOffset(DateTimeOffset.Now.Date.AddDays(-15), DateTimeOffset.Now.Offset);
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+            parameters.Add(p => p.MinRange, TimeSpan.FromDays(3));
+            parameters.Add(p => p.Value, new BitDateRangePickerValue { StartDate = startDate });
+        });
+
+        var startCell = component.Find(".bit-dtrp-dss");
+
+        // The start date itself and the two days around it cannot close a 3-day-minimum range.
+        Assert.IsTrue(startCell.HasAttribute("disabled"));
+
+        var enabledDays = component.FindAll(".bit-dtrp-dbt").Count(d => d.HasAttribute("disabled") is false);
+        Assert.IsTrue(enabledDays > 0);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerMinRangeShouldNotDisableAnythingWithoutAStartDate()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.MinRange, TimeSpan.FromDays(3));
+        });
+
+        Assert.AreEqual(0, component.FindAll(".bit-dtrp-dbt").Count(d => d.HasAttribute("disabled")));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerHoverRangePreviewTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var isOpen = true;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+            parameters.Add(p => p.Today, new DateTimeOffset(2024, 6, 12, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        var days = component.FindAll(".bit-dtrp-dbt");
+
+        // No start date yet, so hovering must not preview anything.
+        days[10].PointerEnter();
+        Assert.AreEqual(0, component.FindAll(".bit-dtrp-dhr").Count);
+
+        component.FindAll(".bit-dtrp-dbt")[10].Click();
+        component.FindAll(".bit-dtrp-dbt")[14].PointerEnter();
+
+        // The four days between the start date (exclusive) and the hovered one (inclusive).
+        Assert.AreEqual(4, component.FindAll(".bit-dtrp-dhr").Count);
+
+        // Closing the range clears the preview.
+        component.FindAll(".bit-dtrp-dbt")[14].Click();
+        Assert.AreEqual(0, component.FindAll(".bit-dtrp-dhr").Count);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerDayKeyboardNavigationTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.Today, new DateTimeOffset(2024, 6, 12, 0, 0, 0, TimeSpan.Zero));
+        });
+
+        var monthTitleBefore = component.Find(".bit-dtrp-pkt, .bit-dtrp-ptb").TextContent.Trim();
+
+        // Today is the roving-tabindex day, so PageDown from it moves the calendar to the next month.
+        component.Find(".bit-dtrp-dtd").KeyDown(Key.PageDown);
+
+        var monthTitleAfter = component.Find(".bit-dtrp-pkt, .bit-dtrp-ptb").TextContent.Trim();
+
+        Assert.AreNotEqual(monthTitleBefore, monthTitleAfter);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerKeyboardNavigationShouldSkipDisabledDays()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var today = new DateTimeOffset(2024, 6, 12, 0, 0, 0, TimeSpan.Zero);
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.Today, today);
+            // A gap of disabled days right after today: the arrow key has to jump over it,
+            // not stop at its edge.
+            parameters.Add(p => p.DisabledDates, new[]
+            {
+                today.AddDays(1),
+                today.AddDays(2),
+                today.AddDays(3),
+            });
+        });
+
+        var focusedBefore = component.FindAll(".bit-dtrp-dbt").Single(d => d.GetAttribute("tabindex") == "0");
+        Assert.AreEqual("12", focusedBefore.TextContent.Trim());
+
+        focusedBefore.KeyDown(Key.Right);
+
+        var focusedAfter = component.FindAll(".bit-dtrp-dbt").Single(d => d.GetAttribute("tabindex") == "0");
+
+        Assert.AreEqual("16", focusedAfter.TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerKeyboardNavigationShouldJumpOverTheMinRangeGap()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var today = new DateTimeOffset(2024, 6, 12, 0, 0, 0, TimeSpan.Zero);
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.Today, today);
+            parameters.Add(p => p.MinRange, TimeSpan.FromDays(4));
+            parameters.Add(p => p.Value, new BitDateRangePickerValue { StartDate = today });
+        });
+
+        // June 12 is the start date, so June 9 to June 15 cannot close a 4-day-minimum range.
+        // Moving right from June 8 has to jump the whole gap instead of stopping at its edge.
+        var june8 = component.FindAll(".bit-dtrp-dbt")
+                             .Single(d => d.TextContent.Trim() == "8" && d.ClassList.Contains("bit-dtrp-dbo") is false);
+        Assert.IsFalse(june8.HasAttribute("disabled"));
+
+        june8.KeyDown(Key.Right);
+
+        var focusedAfter = component.FindAll(".bit-dtrp-dbt").Single(d => d.GetAttribute("tabindex") == "0");
+
+        Assert.AreEqual("16", focusedAfter.TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerKeyboardNavigationShouldStopAtMaxDate()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var today = new DateTimeOffset(2024, 6, 12, 0, 0, 0, TimeSpan.Zero);
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.Today, today);
+            parameters.Add(p => p.MaxDate, today);
+        });
+
+        var focused = component.FindAll(".bit-dtrp-dbt").Single(d => d.GetAttribute("tabindex") == "0");
+        focused.KeyDown(Key.Right);
+
+        var focusedAfter = component.FindAll(".bit-dtrp-dbt").Single(d => d.GetAttribute("tabindex") == "0");
+
+        Assert.AreEqual("12", focusedAfter.TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerRovingTabIndexTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+        });
+
+        var tabbableDays = component.FindAll(".bit-dtrp-dbt").Where(d => d.GetAttribute("tabindex") == "0").ToList();
+
+        Assert.AreEqual(1, tabbableDays.Count);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerOnMonthChangeTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        DateTimeOffset? changedMonth = null;
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.Today, new DateTimeOffset(2024, 6, 12, 0, 0, 0, TimeSpan.Zero));
+            parameters.Add(p => p.OnMonthChange, (DateTimeOffset date) => changedMonth = date);
+        });
+
+        component.FindAll(".bit-dtrp-nbt")[1].Click();
+
+        Assert.IsNotNull(changedMonth);
+        Assert.AreEqual(1, changedMonth!.Value.Day);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerEndTimeAmPmButtonsTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.TimeFormat, BitTimeFormat.TwelveHours);
+            parameters.Add(p => p.Value, new BitDateRangePickerValue
+            {
+                // 14:00 is PM, so the AM button must be the enabled one.
+                StartDate = new DateTimeOffset(2024, 3, 1, 9, 0, 0, TimeSpan.Zero),
+                EndDate = new DateTimeOffset(2024, 3, 5, 14, 0, 0, TimeSpan.Zero)
+            });
+        });
+
+        var endAmButton = component.FindAll(".bit-dtrp-eic .bit-dtrp-bam")[0];
+        var endPmButton = component.FindAll(".bit-dtrp-eic .bit-dtrp-bpm")[0];
+
+        Assert.IsFalse(endAmButton.HasAttribute("disabled"));
+        Assert.IsTrue(endPmButton.HasAttribute("disabled"));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerEndTimeAmClickShouldSwitchToAm()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        BitDateRangePickerValue? value = new()
+        {
+            StartDate = new DateTimeOffset(2024, 3, 1, 9, 0, 0, TimeSpan.Zero),
+            EndDate = new DateTimeOffset(2024, 3, 5, 14, 0, 0, TimeSpan.Zero)
+        };
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.TimeFormat, BitTimeFormat.TwelveHours);
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        component.FindAll(".bit-dtrp-eic .bit-dtrp-bam")[0].Click();
+
+        Assert.AreEqual(2, component.Instance.Value!.EndDate!.Value.Hour);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerSelectDateShouldNotMutateTheBoundInstance()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var isOpen = true;
+        var boundValue = new BitDateRangePickerValue
+        {
+            StartDate = new DateTimeOffset(DateTimeOffset.Now.Date.AddDays(-5), DateTimeOffset.Now.Offset),
+            EndDate = new DateTimeOffset(DateTimeOffset.Now.Date.AddDays(-1), DateTimeOffset.Now.Offset)
+        };
+        var originalStart = boundValue.StartDate;
+        var originalEnd = boundValue.EndDate;
+        BitDateRangePickerValue? currentValue = boundValue;
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+            parameters.Bind(p => p.Value, currentValue, v => currentValue = v);
+        });
+
+        // A third click restarts the range, which used to null out the caller's own instance.
+        component.Find(".bit-dtrp-dtd").Click();
+
+        Assert.AreEqual(originalStart, boundValue.StartDate);
+        Assert.AreEqual(originalEnd, boundValue.EndDate);
+        Assert.AreNotSame(boundValue, component.Instance.Value);
+        Assert.AreEqual(DateTimeOffset.Now.Date, component.Instance.Value!.StartDate!.Value.Date);
+        Assert.IsNull(component.Instance.Value!.EndDate);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerPresetsShouldNotRenderWithoutPresets()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+        });
+
+        Assert.AreEqual(0, component.FindAll(".bit-dtrp-prc").Count);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerPresetsRenderTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.PresetsAriaLabel, "Quick ranges");
+            parameters.Add(p => p.Presets, new BitDateRangePickerPreset[]
+            {
+                new() { Text = "Today", Value = new() { StartDate = DateTimeOffset.Now.Date, EndDate = DateTimeOffset.Now.Date } },
+                new() { Text = "Disabled one", IsEnabled = false, Title = "Not yet" },
+            });
+        });
+
+        var container = component.Find(".bit-dtrp-prc");
+        var buttons = component.FindAll(".bit-dtrp-prb");
+
+        Assert.AreEqual("Quick ranges", container.GetAttribute("aria-label"));
+        Assert.AreEqual(2, buttons.Count);
+        Assert.AreEqual("Today", buttons[0].TextContent.Trim());
+        Assert.IsFalse(buttons[0].HasAttribute("disabled"));
+        Assert.IsTrue(buttons[1].HasAttribute("disabled"));
+        Assert.AreEqual("Not yet", buttons[1].GetAttribute("title"));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerPresetSelectionTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var isOpen = true;
+        var start = new DateTimeOffset(2024, 3, 1, 0, 0, 0, TimeSpan.Zero);
+        var end = new DateTimeOffset(2024, 3, 5, 0, 0, 0, TimeSpan.Zero);
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+            parameters.Add(p => p.Presets, new BitDateRangePickerPreset[]
+            {
+                new() { Text = "March 1-5", Value = new() { StartDate = start, EndDate = end } },
+            });
+        });
+
+        component.Find(".bit-dtrp-prb").Click();
+
+        Assert.AreEqual(start, component.Instance.Value!.StartDate);
+        Assert.AreEqual(end, component.Instance.Value!.EndDate);
+        // AutoClose is on by default, so selecting a preset closes the callout.
+        Assert.IsFalse(isOpen);
+        // The matching preset is marked as the selected one.
+        Assert.IsTrue(component.Find(".bit-dtrp-prb").ClassList.Contains("bit-dtrp-prs"));
+        Assert.AreEqual("true", component.Find(".bit-dtrp-prb").GetAttribute("aria-pressed"));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerPresetValueProviderShouldTakePrecedence()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var isOpen = true;
+        var providedStart = new DateTimeOffset(2024, 5, 10, 0, 0, 0, TimeSpan.Zero);
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+            parameters.Add(p => p.Presets, new BitDateRangePickerPreset[]
+            {
+                new()
+                {
+                    Text = "Provided",
+                    Value = new() { StartDate = new DateTimeOffset(2000, 1, 1, 0, 0, 0, TimeSpan.Zero) },
+                    ValueProvider = () => new() { StartDate = providedStart, EndDate = providedStart.AddDays(2) }
+                },
+            });
+        });
+
+        component.Find(".bit-dtrp-prb").Click();
+
+        Assert.AreEqual(providedStart, component.Instance.Value!.StartDate);
+        Assert.AreEqual(providedStart.AddDays(2), component.Instance.Value!.EndDate);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerDisabledPresetShouldNotBeSelectable()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var isOpen = true;
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+            parameters.Add(p => p.ReadOnly, true);
+            parameters.Add(p => p.Presets, new BitDateRangePickerPreset[]
+            {
+                new() { Text = "Today", Value = new() { StartDate = DateTimeOffset.Now.Date } },
+            });
+        });
+
+        component.Find(".bit-dtrp-prb").Click();
+
+        Assert.IsNull(component.Instance.Value);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerPresetShouldNavigateTheCalendarToItsStartDate()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var isOpen = true;
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+            parameters.Add(p => p.AutoClose, false);
+            parameters.Add(p => p.Presets, new BitDateRangePickerPreset[]
+            {
+                new()
+                {
+                    Text = "March 2024",
+                    Value = new()
+                    {
+                        StartDate = new DateTimeOffset(2024, 3, 1, 0, 0, 0, TimeSpan.Zero),
+                        EndDate = new DateTimeOffset(2024, 3, 31, 0, 0, 0, TimeSpan.Zero)
+                    }
+                },
+            });
+        });
+
+        component.Find(".bit-dtrp-prb").Click();
+
+        Assert.IsTrue(component.Find(".bit-dtrp-pkt, .bit-dtrp-ptb").TextContent.Contains("2024"));
+        Assert.IsTrue(component.Find(".bit-dtrp-pkt, .bit-dtrp-ptb").TextContent.Contains("March"));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerInputArrowDownShouldOpenTheCallout()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var isOpen = false;
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+        });
+
+        component.Find(".bit-dtrp-inp").KeyDown(Key.Down);
+
+        Assert.IsTrue(isOpen);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerInputEscapeShouldCloseTheCallout()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var isOpen = true;
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+        });
+
+        component.Find(".bit-dtrp-inp").KeyDown(Key.Escape);
+
+        Assert.IsFalse(isOpen);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerInputEnterShouldNotOpenWhenTextInputIsAllowed()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var isOpen = false;
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+            parameters.Add(p => p.AllowTextInput, true);
+        });
+
+        component.Find(".bit-dtrp-inp").KeyDown(Key.Enter);
+
+        Assert.IsFalse(isOpen);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerCalloutEscapeShouldCloseTheCallout()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var isOpen = true;
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+        });
+
+        // Escape has to work from anywhere inside the dialog, not only from the day buttons.
+        component.Find(".bit-dtrp-nbt").KeyDown(Key.Escape);
+
+        Assert.IsFalse(isOpen);
+    }
+
+    [TestMethod,
+        DataRow(true),
+        DataRow(false)
+    ]
+    public void BitDateRangePickerCalloutShouldCarryTheDisabledClass(bool isEnabled)
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsEnabled, isEnabled);
+        });
+
+        // The callout renders outside of the root element, so it needs the marker of its own.
+        Assert.AreEqual(isEnabled is false, component.Find(".bit-dtrp-cal").ClassList.Contains("bit-dis"));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerCalloutShouldCarryTheDir()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.Dir, BitDir.Rtl);
+        });
+
+        Assert.AreEqual("rtl", component.Find(".bit-dtrp-cal").GetAttribute("dir"));
+        Assert.IsTrue(component.Find(".bit-dtrp-cal").ClassList.Contains("bit-dtrp-rtl"));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerAriaLiveShouldStayEmptyWithoutAValue()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>();
+
+        Assert.AreEqual(string.Empty, component.Find(".bit-dtrp-sdt").TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerStartTimeMinuteShouldRespectMaxRange()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.MaxRange, TimeSpan.FromHours(2));
+            parameters.Add(p => p.Value, new BitDateRangePickerValue
+            {
+                StartDate = new DateTimeOffset(2024, 3, 1, 10, 0, 0, TimeSpan.Zero),
+                EndDate = new DateTimeOffset(2024, 3, 1, 11, 0, 0, TimeSpan.Zero)
+            });
+        });
+
+        // Pushing the start time past the end time of the same day is not allowed.
+        component.FindAll(".bit-dtrp-sic .bit-dtrp-tin")[1].Input("59");
+
+        Assert.IsTrue(component.Instance.Value!.StartDate <= component.Instance.Value!.EndDate);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerMonthCountShouldRenderConsecutiveMonths()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.MonthCount, 2);
+            parameters.Add(p => p.Value, new BitDateRangePickerValue { StartDate = FixedDate(2024, 3, 10) });
+        });
+
+        var titles = component.FindAll(".bit-dtrp-dwp .bit-dtrp-pkt, .bit-dtrp-dwp .bit-dtrp-ptb");
+
+        Assert.AreEqual(2, titles.Count);
+        Assert.AreEqual(MonthTitle(2024, 3), titles[0].TextContent.Trim());
+        Assert.AreEqual(MonthTitle(2024, 4), titles[1].TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerMonthCountShouldBeCappedAtThreeMonths()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.MonthCount, 7);
+        });
+
+        Assert.AreEqual(3, component.FindAll(".bit-dtrp-dwp").Count);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerMonthCountShouldRenderASingleNavigationOfEachKind()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.MonthCount, 3);
+        });
+
+        Assert.AreEqual(1, component.FindAll(".bit-dtrp-dwp [title='Go to previous month']").Count);
+        Assert.AreEqual(1, component.FindAll(".bit-dtrp-dwp [title='Go to next month']").Count);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerMonthCountNavigationShouldShiftEveryRenderedMonth()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.MonthCount, 2);
+            parameters.Add(p => p.Value, new BitDateRangePickerValue { StartDate = FixedDate(2024, 3, 10) });
+        });
+
+        component.Find(".bit-dtrp-dwp [title='Go to next month']").Click();
+
+        var titles = component.FindAll(".bit-dtrp-dwp .bit-dtrp-pkt, .bit-dtrp-dwp .bit-dtrp-ptb");
+
+        Assert.AreEqual(MonthTitle(2024, 4), titles[0].TextContent.Trim());
+        Assert.AreEqual(MonthTitle(2024, 5), titles[1].TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerMonthCountShouldNotRenderDuplicateOutsideDays()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.MonthCount, 2);
+            parameters.Add(p => p.ShowOutsideDays, true);
+            parameters.Add(p => p.Value, new BitDateRangePickerValue { StartDate = FixedDate(2024, 3, 10) });
+        });
+
+        var ids = component.FindAll(".bit-dtrp-dbt").Select(d => d.GetAttribute("id")).ToList();
+
+        Assert.AreEqual(0, component.FindAll(".bit-dtrp-dbo").Count);
+        Assert.AreEqual(ids.Count, ids.Distinct().Count());
+        // Every day of March and of April, and nothing else.
+        Assert.AreEqual(61, ids.Count);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerMonthCountShouldKeepTheCalendarStillWhenPickingInTheSecondMonth()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var isOpen = true;
+        BitDateRangePickerValue? value = null;
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+            parameters.Add(p => p.AutoClose, false);
+            parameters.Add(p => p.MonthCount, 2);
+            parameters.Add(p => p.Today, FixedDate(2024, 3, 10));
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        // The second grid holds April, so its first day starts the range without moving the months.
+        component.FindAll(".bit-dtrp-dwp")[1].QuerySelectorAll(".bit-dtrp-dbt")[0].Click();
+
+        var titles = component.FindAll(".bit-dtrp-dwp .bit-dtrp-pkt, .bit-dtrp-dwp .bit-dtrp-ptb");
+
+        Assert.AreEqual(4, value!.StartDate!.Value.Month);
+        Assert.AreEqual(MonthTitle(2024, 3), titles[0].TextContent.Trim());
+        Assert.AreEqual(MonthTitle(2024, 4), titles[1].TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerSelectingADayOfTheNextYearShouldNotJumpAYearBack()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var isOpen = true;
+        BitDateRangePickerValue? value = new() { StartDate = FixedDate(2024, 12, 30) };
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+            parameters.Add(p => p.AutoClose, false);
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        // December 2024 starts on a Sunday, so the only outside days of its grid are those of January 2025.
+        component.FindAll(".bit-dtrp-dbo")[0].Click();
+
+        Assert.AreEqual(2025, value!.EndDate!.Value.Year);
+        Assert.AreEqual(MonthTitle(2025, 1), component.Find(".bit-dtrp-pkt, .bit-dtrp-ptb").TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerExcludeDisabledDatesShouldBlockRangesCoveringADisabledDay()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ExcludeDisabledDates, true);
+            parameters.Add(p => p.Today, FixedDate(2024, 3, 1));
+            parameters.Add(p => p.DisabledDates, new[] { FixedDate(2024, 3, 6) });
+            parameters.Add(p => p.Value, new BitDateRangePickerValue { StartDate = FixedDate(2024, 3, 4) });
+        });
+
+        var days = component.FindAll(".bit-dtrp-dbt").Where(d => d.ClassList.Contains("bit-dtrp-dbo") is false).ToList();
+
+        Assert.IsFalse(days[4].HasAttribute("disabled"));  // March 5, its range covers nothing disabled
+        Assert.IsTrue(days[5].HasAttribute("disabled"));   // March 6, disabled on its own
+        Assert.IsTrue(days[6].HasAttribute("disabled"));   // March 7, its range would cover March 6
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerExcludeDisabledDatesShouldNotBlockAnythingWithoutAStartDate()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ExcludeDisabledDates, true);
+            parameters.Add(p => p.Today, FixedDate(2024, 3, 1));
+            parameters.Add(p => p.DisabledDates, new[] { FixedDate(2024, 3, 6) });
+        });
+
+        var disabledCount = component.FindAll(".bit-dtrp-dbt").Count(d => d.HasAttribute("disabled"));
+
+        Assert.AreEqual(1, disabledCount);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerNoDateTextShouldReplaceTheMissingEndDate()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.NoDateText, "n/a");
+            parameters.Add(p => p.DateFormat, "dd/MM/yyyy");
+            parameters.Add(p => p.ValueFormat, "{0} - {1}");
+            parameters.Add(p => p.Value, new BitDateRangePickerValue { StartDate = FixedDate(2024, 3, 4) });
+        });
+
+        Assert.AreEqual("04/03/2024 - n/a", component.Find(".bit-dtrp-inp").GetAttribute("value"));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerNoDateTextShouldBeAcceptedBackAsAnOpenEndedRange()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        BitDateRangePickerValue? value = null;
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.AllowTextInput, true);
+            parameters.Add(p => p.NoDateText, "n/a");
+            parameters.Add(p => p.DateFormat, "dd/MM/yyyy");
+            parameters.Add(p => p.ValueFormat, "{0} - {1}");
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        component.Find(".bit-dtrp-inp").Change("04/03/2024 - n/a");
+
+        Assert.AreEqual(4, value!.StartDate!.Value.Day);
+        Assert.IsFalse(value!.EndDate.HasValue);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerClearButtonShouldBeLabelledAndExposedToScreenReaders()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.ShowClearButton, true);
+            parameters.Add(p => p.ClearButtonTitle, "Clear the dates");
+            parameters.Add(p => p.Value, new BitDateRangePickerValue { StartDate = FixedDate(2024, 3, 4) });
+        });
+
+        var clearButton = component.Find(".bit-dtrp-clr");
+
+        Assert.AreEqual("Clear the dates", clearButton.GetAttribute("title"));
+        Assert.AreEqual("Clear the dates", clearButton.GetAttribute("aria-label"));
+        Assert.IsFalse(clearButton.HasAttribute("aria-hidden"));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerRelativePresetShouldStaySelectedAfterBeingApplied()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var isOpen = true;
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+            parameters.Add(p => p.AutoClose, false);
+            parameters.Add(p => p.Presets, new BitDateRangePickerPreset[]
+            {
+                // A provider is re-evaluated on every call, so its range never matches the stored one exactly.
+                new()
+                {
+                    Text = "Last 7 days",
+                    ValueProvider = () => new()
+                    {
+                        StartDate = DateTimeOffset.Now.AddDays(-7),
+                        EndDate = DateTimeOffset.Now
+                    }
+                },
+            });
+        });
+
+        component.Find(".bit-dtrp-prb").Click();
+
+        Assert.IsTrue(component.Find(".bit-dtrp-prb").ClassList.Contains("bit-dtrp-prs"));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerSelectingADayShouldDropThePresetSelection()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var isOpen = true;
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+            parameters.Add(p => p.AutoClose, false);
+            parameters.Add(p => p.Today, FixedDate(2024, 3, 10));
+            parameters.Add(p => p.Presets, new BitDateRangePickerPreset[]
+            {
+                new()
+                {
+                    Text = "Last 7 days",
+                    ValueProvider = () => new()
+                    {
+                        StartDate = DateTimeOffset.Now.AddDays(-7),
+                        EndDate = DateTimeOffset.Now
+                    }
+                },
+            });
+        });
+
+        component.Find(".bit-dtrp-prb").Click();
+        component.FindAll(".bit-dtrp-dbt").First(d => d.HasAttribute("disabled") is false).Click();
+
+        Assert.IsFalse(component.Find(".bit-dtrp-prb").ClassList.Contains("bit-dtrp-prs"));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerOnPresetSelectTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var isOpen = true;
+        BitDateRangePickerPreset? selected = null;
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+            parameters.Add(p => p.AutoClose, false);
+            parameters.Add(p => p.OnPresetSelect, (BitDateRangePickerPreset preset) => selected = preset);
+            parameters.Add(p => p.Presets, new BitDateRangePickerPreset[]
+            {
+                new()
+                {
+                    Text = "March 2024",
+                    Value = new()
+                    {
+                        StartDate = FixedDate(2024, 3, 1),
+                        EndDate = FixedDate(2024, 3, 31)
+                    }
+                },
+            });
+        });
+
+        component.Find(".bit-dtrp-prb").Click();
+
+        Assert.IsNotNull(selected);
+        Assert.AreEqual("March 2024", selected!.Text);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerWeekDayHeaderClassTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ShowWeekNumbers, true);
+            parameters.Add(p => p.Classes, new BitDateRangePickerClassStyles
+            {
+                WeekDayHeader = "custom-week-day",
+                WeekNumbersHeader = "custom-week-numbers"
+            });
+        });
+
+        Assert.AreEqual(7, component.FindAll(".custom-week-day").Count);
+        Assert.AreEqual(1, component.FindAll(".custom-week-numbers").Count);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerAmPmShouldFollowTheTimePickerWithoutAValue()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.TimeFormat, BitTimeFormat.TwelveHours);
+        });
+
+        // Without a value the time picker still shows 00:00 for the start and 23:59 for the end.
+        Assert.IsTrue(component.Find(".bit-dtrp-sic .bit-dtrp-bam").ClassList.Contains("bit-dtrp-bns"));
+        Assert.IsTrue(component.Find(".bit-dtrp-eic .bit-dtrp-bpm").ClassList.Contains("bit-dtrp-bns"));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerShouldNotMutateTheBoundInstanceWhenTheEndDateIsDroppedByMinDate()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var boundValue = new BitDateRangePickerValue
+        {
+            StartDate = FixedDate(2024, 3, 1),
+            EndDate = FixedDate(2024, 3, 3)
+        };
+
+        RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.MinDate, FixedDate(2024, 3, 10));
+            parameters.Add(p => p.Value, boundValue);
+        });
+
+        Assert.IsTrue(boundValue.EndDate.HasValue);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerMonthCountShouldKeepEveryMonthSixWeeksTall()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.MonthCount, 2);
+            parameters.Add(p => p.FixedWeeks, false);
+            // February 2021 starts on a Monday and fits in exactly four weeks on its own.
+            parameters.Add(p => p.Value, new BitDateRangePickerValue { StartDate = FixedDate(2021, 2, 10) });
+        });
+
+        var months = component.FindAll(".bit-dtrp-dwp");
+
+        Assert.AreEqual(6, months[0].QuerySelectorAll(".bit-dtrp-dgr").Length);
+        Assert.AreEqual(6, months[1].QuerySelectorAll(".bit-dtrp-dgr").Length);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerExcludeDisabledDatesShouldBlockBackwardsToo()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ExcludeDisabledDates, true);
+            parameters.Add(p => p.Today, FixedDate(2024, 3, 1));
+            parameters.Add(p => p.DisabledDates, new[] { FixedDate(2024, 3, 10) });
+            parameters.Add(p => p.Value, new BitDateRangePickerValue { StartDate = FixedDate(2024, 3, 12) });
+        });
+
+        var days = component.FindAll(".bit-dtrp-dbt").Where(d => d.ClassList.Contains("bit-dtrp-dbo") is false).ToList();
+
+        Assert.IsFalse(days[10].HasAttribute("disabled"));  // March 11, still on this side of the blackout
+        Assert.IsTrue(days[9].HasAttribute("disabled"));    // March 10, disabled on its own
+        Assert.IsTrue(days[8].HasAttribute("disabled"));    // March 9, its range would cover March 10
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerClearButtonShouldRestoreTheStartingValueTimes()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        BitDateRangePickerValue? value = new()
+        {
+            StartDate = FixedDate(2024, 3, 1),
+            EndDate = FixedDate(2024, 3, 5)
+        };
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.ShowClearButton, true);
+            parameters.Add(p => p.StartingValue, new BitDateRangePickerValue
+            {
+                StartDate = new DateTimeOffset(2024, 3, 1, 8, 30, 0, TimeSpan.Zero),
+                EndDate = new DateTimeOffset(2024, 3, 1, 17, 45, 0, TimeSpan.Zero)
+            });
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        component.Find(".bit-dtrp-clr").Click();
+
+        Assert.AreEqual("8", component.FindAll(".bit-dtrp-sic .bit-dtrp-tin")[0].GetAttribute("value"));
+        Assert.AreEqual("30", component.FindAll(".bit-dtrp-sic .bit-dtrp-tin")[1].GetAttribute("value"));
+        Assert.AreEqual("17", component.FindAll(".bit-dtrp-eic .bit-dtrp-tin")[0].GetAttribute("value"));
+        Assert.AreEqual("45", component.FindAll(".bit-dtrp-eic .bit-dtrp-tin")[1].GetAttribute("value"));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerStandaloneShouldSelectDatesWithAnUnboundIsOpen()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        BitDateRangePickerValue? value = null;
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.Standalone, true);
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.Today, FixedDate(2024, 3, 10));
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        component.FindAll(".bit-dtrp-dbt").First(d => d.HasAttribute("disabled") is false).Click();
+
+        Assert.IsNotNull(value);
+        Assert.IsTrue(value!.StartDate.HasValue);
+    }
+
+    // Midday keeps a date-only assertion safe from any time zone shifting the instant across midnight.
+    private static DateTimeOffset FixedDate(int year, int month, int day)
+    {
+        var dateTime = new DateTime(year, month, day, 12, 0, 0);
+
+        return new DateTimeOffset(dateTime, TimeZoneInfo.Local.GetUtcOffset(dateTime));
+    }
+
+    private static string MonthTitle(int year, int month)
+    {
+        return $"{System.Globalization.CultureInfo.CurrentUICulture.DateTimeFormat.GetMonthName(month)} {year}";
+    }
 }

From cc40e965b9d9af7fe938e71c2fb8eed280bb4541 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Mon, 10 Aug 2026 12:35:48 +0330
Subject: [PATCH 2/7] resolve review comments

---
 .../DateRangePicker/BitDateRangePicker.razor  |  4 +-
 .../BitDateRangePicker.razor.cs               | 15 ++--
 .../DateRangePicker/BitDateRangePicker.scss   | 23 ++++++-
 .../BitDateRangePickerDemo.razor              |  8 +--
 .../BitDateRangePickerDemo.razor.cs           | 69 +++++++++++--------
 .../BitDateRangePickerDemo.razor.samples.cs   | 13 ++--
 .../BitDateRangePickerTests.cs                | 32 ++++++++-
 7 files changed, 117 insertions(+), 47 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
index e1ceb358cbe..370fc81a4b9 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
@@ -301,7 +301,7 @@
                             <div role="row" style="@Styles?.DaysHeaderRow" class="bit-dtrp-dgh @Classes?.DaysHeaderRow">
                                 @if (ShowWeekNumbers)
                                 {
-                                    <div style="@Styles?.WeekNumbersHeader" class="bit-dtrp-wlb @Classes?.WeekNumbersHeader"></div>
+                                    <div role="columnheader" style="@Styles?.WeekNumbersHeader" class="bit-dtrp-wlb @Classes?.WeekNumbersHeader"></div>
                                 }
 
                                 @for (var index = 0; index < 7; index++)
@@ -313,7 +313,7 @@
                                          aria-label="@dayOfWeekName"
                                          style="@Styles?.WeekDayHeader"
                                          class="bit-dtrp-wlb @Classes?.WeekDayHeader">
-                                        @shortestDayOfWeekName[0]
+                                        @GetFirstTextElement(shortestDayOfWeekName)
                                     </div>
                                 }
                             </div>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
index 818a4435ec7..b9e259f0cee 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
@@ -1655,10 +1655,11 @@ private bool IsPresetSelected(BitDateRangePickerPreset preset)
 
         if (ReferenceEquals(preset, _selectedPreset)) return true;
 
-        var presetValue = preset.ValueProvider is not null ? preset.ValueProvider() : preset.Value;
-        if (presetValue is null) return false;
+        // A ValueProvider is not evaluated here since it can be non-deterministic, so such a preset
+        // only appears selected through _selectedPreset above.
+        if (preset.Value is null) return false;
 
-        return presetValue.StartDate == CurrentValue.StartDate && presetValue.EndDate == CurrentValue.EndDate;
+        return preset.Value.StartDate == CurrentValue.StartDate && preset.Value.EndDate == CurrentValue.EndDate;
     }
 
     private async Task HandleOnInputKeyDown(KeyboardEventArgs e)
@@ -2228,7 +2229,13 @@ private void BuildExcludedBounds()
 
     private DateTime GetToday()
     {
-        return Today.HasValue ? GetDateTime(Today.Value) : DateTime.Now;
+        return GetDateTime(Today ?? DateTimeOffset.Now);
+    }
+
+    // The first character of a shortest day name can be a surrogate pair, which indexing with [0] would split in half.
+    private static string GetFirstTextElement(string value)
+    {
+        return value.Length == 0 ? value : StringInfo.GetNextTextElement(value, 0);
     }
 
     private bool IsInMonth(DateTime date, int monthIndex)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss
index 9daee9c231a..1fa6f3e280a 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss
@@ -403,7 +403,7 @@
 .bit-dtrp-dsb {
     border-radius: 0;
     color: $clr-fg-pri;
-    background-color: $clr-pri-light;
+    background-color: var(--bit-dtrp-clr-body);
 
     @media (hover: hover) {
         &:hover {
@@ -640,6 +640,10 @@
         pointer-events: none;
         background-color: transparent;
     }
+
+    &:focus-visible {
+        outline: $shp-border-width $shp-border-style $clr-brd-pri;
+    }
 }
 
 .bit-dtrp-prs {
@@ -1015,6 +1019,7 @@
     --bit-dtrp-clr-txt: #{$clr-pri-text};
     --bit-dtrp-clr-hover: #{$clr-pri-hover};
     --bit-dtrp-clr-active: #{$clr-pri-active};
+    --bit-dtrp-clr-body: #{$clr-pri-light};
 }
 
 .bit-dtrp-sec {
@@ -1022,6 +1027,7 @@
     --bit-dtrp-clr-txt: #{$clr-sec-text};
     --bit-dtrp-clr-hover: #{$clr-sec-hover};
     --bit-dtrp-clr-active: #{$clr-sec-active};
+    --bit-dtrp-clr-body: #{$clr-sec-light};
 }
 
 .bit-dtrp-ter {
@@ -1029,6 +1035,7 @@
     --bit-dtrp-clr-txt: #{$clr-ter-text};
     --bit-dtrp-clr-hover: #{$clr-ter-hover};
     --bit-dtrp-clr-active: #{$clr-ter-active};
+    --bit-dtrp-clr-body: #{$clr-ter-light};
 }
 
 .bit-dtrp-inf {
@@ -1036,6 +1043,7 @@
     --bit-dtrp-clr-txt: #{$clr-inf-text};
     --bit-dtrp-clr-hover: #{$clr-inf-hover};
     --bit-dtrp-clr-active: #{$clr-inf-active};
+    --bit-dtrp-clr-body: #{$clr-inf-light};
 }
 
 .bit-dtrp-suc {
@@ -1043,6 +1051,7 @@
     --bit-dtrp-clr-txt: #{$clr-suc-text};
     --bit-dtrp-clr-hover: #{$clr-suc-hover};
     --bit-dtrp-clr-active: #{$clr-suc-active};
+    --bit-dtrp-clr-body: #{$clr-suc-light};
 }
 
 .bit-dtrp-wrn {
@@ -1050,6 +1059,7 @@
     --bit-dtrp-clr-txt: #{$clr-wrn-text};
     --bit-dtrp-clr-hover: #{$clr-wrn-hover};
     --bit-dtrp-clr-active: #{$clr-wrn-active};
+    --bit-dtrp-clr-body: #{$clr-wrn-light};
 }
 
 .bit-dtrp-swr {
@@ -1057,6 +1067,7 @@
     --bit-dtrp-clr-txt: #{$clr-swr-text};
     --bit-dtrp-clr-hover: #{$clr-swr-hover};
     --bit-dtrp-clr-active: #{$clr-swr-active};
+    --bit-dtrp-clr-body: #{$clr-swr-light};
 }
 
 .bit-dtrp-err {
@@ -1064,6 +1075,7 @@
     --bit-dtrp-clr-txt: #{$clr-err-text};
     --bit-dtrp-clr-hover: #{$clr-err-hover};
     --bit-dtrp-clr-active: #{$clr-err-active};
+    --bit-dtrp-clr-body: #{$clr-err-light};
 }
 
 .bit-dtrp-pbg {
@@ -1071,6 +1083,7 @@
     --bit-dtrp-clr-txt: #{$clr-fg-pri};
     --bit-dtrp-clr-hover: #{$clr-bg-pri-hover};
     --bit-dtrp-clr-active: #{$clr-bg-pri-active};
+    --bit-dtrp-clr-body: #{$clr-bg-sec};
 }
 
 .bit-dtrp-sbg {
@@ -1078,6 +1091,7 @@
     --bit-dtrp-clr-txt: #{$clr-fg-pri};
     --bit-dtrp-clr-hover: #{$clr-bg-sec-hover};
     --bit-dtrp-clr-active: #{$clr-bg-sec-active};
+    --bit-dtrp-clr-body: #{$clr-bg-ter};
 }
 
 .bit-dtrp-tbg {
@@ -1085,6 +1099,7 @@
     --bit-dtrp-clr-txt: #{$clr-fg-pri};
     --bit-dtrp-clr-hover: #{$clr-bg-ter-hover};
     --bit-dtrp-clr-active: #{$clr-bg-ter-active};
+    --bit-dtrp-clr-body: #{$clr-bg-sec};
 }
 
 .bit-dtrp-pfg {
@@ -1092,6 +1107,7 @@
     --bit-dtrp-clr-txt: #{$clr-bg-pri};
     --bit-dtrp-clr-hover: #{$clr-fg-pri-hover};
     --bit-dtrp-clr-active: #{$clr-fg-pri-active};
+    --bit-dtrp-clr-body: #{$clr-bg-ter};
 }
 
 .bit-dtrp-sfg {
@@ -1099,6 +1115,7 @@
     --bit-dtrp-clr-txt: #{$clr-bg-pri};
     --bit-dtrp-clr-hover: #{$clr-fg-sec-hover};
     --bit-dtrp-clr-active: #{$clr-fg-sec-active};
+    --bit-dtrp-clr-body: #{$clr-bg-ter};
 }
 
 .bit-dtrp-tfg {
@@ -1106,6 +1123,7 @@
     --bit-dtrp-clr-txt: #{$clr-bg-pri};
     --bit-dtrp-clr-hover: #{$clr-fg-ter-hover};
     --bit-dtrp-clr-active: #{$clr-fg-ter-active};
+    --bit-dtrp-clr-body: #{$clr-bg-ter};
 }
 
 .bit-dtrp-pbr {
@@ -1113,6 +1131,7 @@
     --bit-dtrp-clr-txt: #{$clr-fg-pri};
     --bit-dtrp-clr-hover: #{$clr-brd-pri-hover};
     --bit-dtrp-clr-active: #{$clr-brd-pri-active};
+    --bit-dtrp-clr-body: #{$clr-bg-ter};
 }
 
 .bit-dtrp-sbr {
@@ -1120,6 +1139,7 @@
     --bit-dtrp-clr-txt: #{$clr-fg-pri};
     --bit-dtrp-clr-hover: #{$clr-brd-sec-hover};
     --bit-dtrp-clr-active: #{$clr-brd-sec-active};
+    --bit-dtrp-clr-body: #{$clr-bg-ter};
 }
 
 .bit-dtrp-tbr {
@@ -1127,4 +1147,5 @@
     --bit-dtrp-clr-txt: #{$clr-fg-pri};
     --bit-dtrp-clr-hover: #{$clr-brd-ter-hover};
     --bit-dtrp-clr-active: #{$clr-brd-ter-active};
+    --bit-dtrp-clr-body: #{$clr-bg-ter};
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
index 165413855ab..651fc91fc94 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
@@ -311,7 +311,7 @@
                      Target="_blank">more info</BitLink>).
         </div>
         <br />
-        <div>Defalt (local TimeZone):</div><br />
+        <div>Default (local TimeZone):</div><br />
         <div class="example-content">
             <BitDateRangePicker @bind-Value="@timeZoneDateRange1" ShowTimePicker />
         </div>
@@ -454,14 +454,14 @@
                 <br />
                 <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
                 <BitButton ButtonType="BitButtonType.Reset" Variant="BitVariant.Outline"
-                           OnClick="() => { validationModel = new(); SuccessMessage = string.Empty; }">
+                           OnClick="() => { validationModel = new(); successMessage = string.Empty; }">
                     Reset
                 </BitButton>
             </EditForm>
             <br />
-            @if (string.IsNullOrEmpty(SuccessMessage) is false)
+            @if (string.IsNullOrEmpty(successMessage) is false)
             {
-                <BitMessage Color="BitColor.Success">@SuccessMessage</BitMessage>
+                <BitMessage Color="BitColor.Success">@successMessage</BitMessage>
             }
         </div>
     </DemoExample>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs
index f305accda16..186ddf7a419 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs
@@ -132,13 +132,6 @@ public partial class BitDateRangePickerDemo
             Description = "The days of the week that are disabled (not selectable) in the DateRangePicker (e.g. weekends)."
         },
         new()
-        {
-            Name = "ExcludeDisabledDates",
-            Type = "bool",
-            DefaultValue = "false",
-            Description = "Whether the disabled days are excluded from the selected range. By default a range simply spans over the disabled days between its two ends. When enabled, once the start date is picked every day whose range would contain a disabled day becomes unselectable."
-        },
-        new()
         {
             Name = "EndTimeDecreaseHourIcon",
             Type = "BitIconInfo?",
@@ -203,6 +196,13 @@ public partial class BitDateRangePickerDemo
             Description = "The name of the end time-picker's increase-minute button icon from the built-in Fluent UI icon set.",
         },
         new()
+        {
+            Name = "ExcludeDisabledDates",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Whether the disabled days are excluded from the selected range. By default a range simply spans over the disabled days between its two ends. When enabled, once the start date is picked every day whose range would contain a disabled day becomes unselectable."
+        },
+        new()
         {
             Name = "FirstDayOfWeek",
             Type = "DayOfWeek?",
@@ -545,15 +545,21 @@ public partial class BitDateRangePickerDemo
         },
         new()
         {
-            Name = "OnMonthChange",
-            Type = "EventCallback<DateTimeOffset>",
-            Description = "Callback for when the displayed month of the day picker changes. The argument is the first day of the newly displayed month.",
+            Name = "OnFocusIn",
+            Type = "EventCallback",
+            Description = "The callback for when the focus moves into the DateRangePicker's input.",
         },
         new()
         {
-            Name = "OnFocusIn",
+            Name = "OnFocusOut",
             Type = "EventCallback",
-            Description = "The callback for when the focus moves into the DateRangePicker's input.",
+            Description = "The callback for when the focus moves out of the DateRangePicker's input.",
+        },
+        new()
+        {
+            Name = "OnMonthChange",
+            Type = "EventCallback<DateTimeOffset>",
+            Description = "Callback for when the displayed month of the day picker changes. The argument is the first day of the newly displayed month.",
         },
         new()
         {
@@ -564,12 +570,6 @@ public partial class BitDateRangePickerDemo
             LinkType = LinkType.Link
         },
         new()
-        {
-            Name = "OnFocusOut",
-            Type = "EventCallback",
-            Description = "The callback for when the focus moves out of the DateRangePicker's input.",
-        },
-        new()
         {
             Name = "Placeholder",
             Type = "string",
@@ -684,17 +684,17 @@ public partial class BitDateRangePickerDemo
         },
         new()
         {
-            Name = "ShowTimePicker",
+            Name = "ShowOutsideDays",
             Type = "bool",
-            DefaultValue = "false",
-            Description = "Whether or not render the time-picker.",
+            DefaultValue = "true",
+            Description = "Whether the days of the previous and next months, filling the first and last week rows, should be rendered.",
         },
         new()
         {
-            Name = "ShowOutsideDays",
+            Name = "ShowTimePicker",
             Type = "bool",
-            DefaultValue = "true",
-            Description = "Whether the days of the previous and next months, filling the first and last week rows, should be rendered.",
+            DefaultValue = "false",
+            Description = "Whether or not render the time-picker.",
         },
         new()
         {
@@ -1026,6 +1026,20 @@ public partial class BitDateRangePickerDemo
                     Description = "Custom CSS classes/styles for the input of the BitDateRangePicker."
                 },
                 new()
+                {
+                    Name = "ClearButton",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the clear button of the BitDateRangePicker."
+                },
+                new()
+                {
+                    Name = "ClearButtonIcon",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the clear button icon of the BitDateRangePicker."
+                },
+                new()
                 {
                     Name = "Icon",
                     Type = "string?",
@@ -1896,18 +1910,17 @@ public partial class BitDateRangePickerDemo
         DateTimeOffset.Now.AddDays(3),
     ];
 
-    private string SuccessMessage = string.Empty;
+    private string successMessage = string.Empty;
     private FormValidationDateRangePickerModel validationModel = new();
 
     private void HandleValidSubmit()
     {
-        SuccessMessage = "Form Submitted Successfully!";
-        StateHasChanged();
+        successMessage = "Form Submitted Successfully!";
     }
 
     private void HandleInvalidSubmit()
     {
-        SuccessMessage = string.Empty;
+        successMessage = string.Empty;
     }
 
     private BitDateRangePickerValue? selectedDateRange = new()
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs
index 46205379e83..6f20f7ae976 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs
@@ -290,14 +290,14 @@ public partial class BitDateRangePickerDemo
 
     <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
     <BitButton ButtonType=""BitButtonType.Reset"" Variant=""BitVariant.Outline""
-               OnClick=""() => { validationModel = new(); SuccessMessage = string.Empty; }"">
+               OnClick=""() => { validationModel = new(); successMessage = string.Empty; }"">
         Reset
     </BitButton>
 </EditForm>
 
-@if (string.IsNullOrEmpty(SuccessMessage) is false)
+@if (string.IsNullOrEmpty(successMessage) is false)
 {
-    <BitMessage Color=""BitColor.Success"">@SuccessMessage</BitMessage>
+    <BitMessage Color=""BitColor.Success"">@successMessage</BitMessage>
 }";
     private readonly string example18CsharpCode = @"
 public class FormValidationDateRangePickerModel
@@ -318,18 +318,17 @@ public override bool IsValid(object? value)
     }
 }
 
-private string SuccessMessage = string.Empty;
+private string successMessage = string.Empty;
 private FormValidationDateRangePickerModel validationModel = new();
 
 private void HandleValidSubmit()
 {
-    SuccessMessage = ""Form Submitted Successfully!"";
-    StateHasChanged();
+    successMessage = ""Form Submitted Successfully!"";
 }
 
 private void HandleInvalidSubmit()
 {
-    SuccessMessage = string.Empty;
+    successMessage = string.Empty;
 }";
 
     private readonly string example19RazorCode = @"
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs
index 188fdb76942..670a30b46e6 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs
@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.Globalization;
 using System.Linq;
 using System.Threading.Tasks;
 using Microsoft.VisualStudio.TestTools.UnitTesting;
@@ -1268,6 +1269,7 @@ public void BitDateRangePickerIsDateDisabledTest()
         var component = RenderComponent<BitDateRangePicker>(parameters =>
         {
             parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
             parameters.Add(p => p.IsDateDisabled, (DateTimeOffset date) => date.Day % 2 == 0);
         });
 
@@ -1330,6 +1332,7 @@ public void BitDateRangePickerFirstDayOfWeekTest()
         var component = RenderComponent<BitDateRangePicker>(parameters =>
         {
             parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
             parameters.Add(p => p.FirstDayOfWeek, DayOfWeek.Monday);
         });
 
@@ -1488,6 +1491,7 @@ public void BitDateRangePickerFormatValueAsStringTest()
         Context.JSInterop.Mode = JSRuntimeMode.Loose;
         var component = RenderComponent<BitDateRangePicker>(parameters =>
         {
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
             parameters.Add(p => p.DateFormat, "yyyy-MM-dd");
             parameters.Add(p => p.Value, new BitDateRangePickerValue
             {
@@ -1972,7 +1976,7 @@ public void BitDateRangePickerPresetValueProviderShouldTakePrecedence()
     }
 
     [TestMethod]
-    public void BitDateRangePickerDisabledPresetShouldNotBeSelectable()
+    public void BitDateRangePickerReadOnlyShouldNotAllowSelectingAPreset()
     {
         Context.JSInterop.Mode = JSRuntimeMode.Loose;
         var isOpen = true;
@@ -1992,6 +1996,30 @@ public void BitDateRangePickerDisabledPresetShouldNotBeSelectable()
         Assert.IsNull(component.Instance.Value);
     }
 
+    [TestMethod]
+    public void BitDateRangePickerDisabledPresetShouldNotBeSelectable()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var isOpen = true;
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+            parameters.Add(p => p.Presets, new BitDateRangePickerPreset[]
+            {
+                new() { Text = "Today", IsEnabled = false, Value = new() { StartDate = DateTimeOffset.Now.Date } },
+            });
+        });
+
+        var preset = component.Find(".bit-dtrp-prb");
+
+        Assert.IsTrue(preset.HasAttribute("disabled"));
+
+        preset.Click();
+
+        Assert.IsNull(component.Instance.Value);
+    }
+
     [TestMethod]
     public void BitDateRangePickerPresetShouldNavigateTheCalendarToItsStartDate()
     {
@@ -2322,6 +2350,7 @@ public void BitDateRangePickerNoDateTextShouldReplaceTheMissingEndDate()
         Context.JSInterop.Mode = JSRuntimeMode.Loose;
         var component = RenderComponent<BitDateRangePicker>(parameters =>
         {
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
             parameters.Add(p => p.NoDateText, "n/a");
             parameters.Add(p => p.DateFormat, "dd/MM/yyyy");
             parameters.Add(p => p.ValueFormat, "{0} - {1}");
@@ -2340,6 +2369,7 @@ public void BitDateRangePickerNoDateTextShouldBeAcceptedBackAsAnOpenEndedRange()
         var component = RenderComponent<BitDateRangePicker>(parameters =>
         {
             parameters.Add(p => p.AllowTextInput, true);
+            parameters.Add(p => p.Culture, CultureInfo.InvariantCulture);
             parameters.Add(p => p.NoDateText, "n/a");
             parameters.Add(p => p.DateFormat, "dd/MM/yyyy");
             parameters.Add(p => p.ValueFormat, "{0} - {1}");

From 14989c1ac2f30c9776def99220cee59bbd77193a Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Mon, 10 Aug 2026 18:19:32 +0330
Subject: [PATCH 3/7] resolve review comments 2

---
 .../DateRangePicker/BitDateRangePicker.razor  |  2 +-
 .../BitDateRangePicker.razor.cs               | 88 +++++++++----------
 .../DateRangePicker/BitDateRangePicker.scss   | 12 +++
 3 files changed, 55 insertions(+), 47 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
index 370fc81a4b9..34a4431c87d 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
@@ -127,7 +127,7 @@
      dir="@Dir?.ToString().ToLower()">
     <div style="@Styles?.CalloutContainer"
          class="bit-dtrp-cac @Classes?.CalloutContainer"
-         role="dialog"
+         role="@(Standalone ? null : "dialog")"
          @attributes=@CalloutHtmlAttributes
          @onkeydown="HandleOnCalloutKeyDown"
          aria-label="@CalloutAriaLabel">
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
index b9e259f0cee..65ffabfc0ec 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
@@ -989,19 +989,19 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
                 // Prevents the default behavior (scrolling) of the navigation keys handled by the
                 // day buttons' keydown handlers, since Blazor cannot conditionally preventDefault per key.
                 await _js.BitCalendarsSetup(_calloutId);
-            }
-            catch (JSDisconnectedException) { } // we can ignore this exception here
 
-            if (Responsive)
-            {
-                await _js.BitSwipesSetup(
-                    id: _calloutId,
-                    trigger: 0.25m,
-                    position: BitPanelPosition.Top,
-                    isRtl: Dir is BitDir.Rtl,
-                    orientationLock: BitSwipeOrientation.Vertical,
-                    dotnetObj: _dotnetObj);
+                if (Responsive)
+                {
+                    await _js.BitSwipesSetup(
+                        id: _calloutId,
+                        trigger: 0.25m,
+                        position: BitPanelPosition.Top,
+                        isRtl: Dir is BitDir.Rtl,
+                        orientationLock: BitSwipeOrientation.Vertical,
+                        dotnetObj: _dotnetObj);
+                }
             }
+            catch (JSDisconnectedException) { } // we can ignore this exception here
         }
 
         if (_focusAfterRender && _focusedDate.HasValue)
@@ -1092,7 +1092,13 @@ private bool TryParseRange(string value, out BitDateRangePickerValue? result)
         var startText = text[..separatorIndex];
         var endText = text[(separatorIndex + separator.Length)..];
 
-        if (TryParseDate(startText, out var startDate) is false) return false;
+        DateTimeOffset? startDate = null;
+        if (IsEmptyDateToken(startText) is false)
+        {
+            if (TryParseDate(startText, out var parsedStartDate) is false) return false;
+
+            startDate = parsedStartDate;
+        }
 
         DateTimeOffset? endDate = null;
         if (IsEmptyDateToken(endText) is false)
@@ -1102,9 +1108,9 @@ private bool TryParseRange(string value, out BitDateRangePickerValue? result)
             endDate = parsedEndDate;
         }
 
-        if (endDate.HasValue && endDate < startDate)
+        if (startDate.HasValue && endDate.HasValue && endDate < startDate)
         {
-            (startDate, endDate) = (endDate.Value, startDate);
+            (startDate, endDate) = (endDate, startDate);
         }
 
         result = new BitDateRangePickerValue { StartDate = startDate, EndDate = endDate };
@@ -2556,20 +2562,14 @@ private void CheckCurrentCalendarMatchesCurrentValue()
                 klass.Append(' ').Append(Classes?.StartDayButton);
             }
 
-            if (Styles?.StartDayButton is not null)
-            {
-                style.Append(Styles?.StartDayButton);
-            }
+            AppendStyle(style, Styles?.StartDayButton);
 
             if (Classes?.StartAndEndSelectionDays is not null)
             {
                 klass.Append(' ').Append(Classes?.StartAndEndSelectionDays);
             }
 
-            if (Styles?.StartAndEndSelectionDays is not null)
-            {
-                style.Append(Styles?.StartAndEndSelectionDays);
-            }
+            AppendStyle(style, Styles?.StartAndEndSelectionDays);
         }
 
         if (isEndDaySelectedDate)
@@ -2581,20 +2581,14 @@ private void CheckCurrentCalendarMatchesCurrentValue()
                 klass.Append(' ').Append(Classes?.EndDayButton);
             }
 
-            if (Styles?.EndDayButton is not null)
-            {
-                style.Append(Styles?.EndDayButton);
-            }
+            AppendStyle(style, Styles?.EndDayButton);
 
             if (Classes?.StartAndEndSelectionDays is not null)
             {
                 klass.Append(' ').Append(Classes?.StartAndEndSelectionDays);
             }
 
-            if (Styles?.StartAndEndSelectionDays is not null)
-            {
-                style.Append(Styles?.StartAndEndSelectionDays);
-            }
+            AppendStyle(style, Styles?.StartAndEndSelectionDays);
 
             if (IsEqualStartAndEndDaySelectedDate(date))
             {
@@ -2611,10 +2605,7 @@ private void CheckCurrentCalendarMatchesCurrentValue()
                 klass.Append(' ').Append(Classes?.SelectedDayButtons);
             }
 
-            if (Styles?.SelectedDayButtons is not null)
-            {
-                style.Append(Styles?.SelectedDayButtons);
-            }
+            AppendStyle(style, Styles?.SelectedDayButtons);
         }
 
         //Is in the prospective range being hovered
@@ -2627,10 +2618,7 @@ private void CheckCurrentCalendarMatchesCurrentValue()
                 klass.Append(' ').Append(Classes?.HoveredDayButtons);
             }
 
-            if (Styles?.HoveredDayButtons is not null)
-            {
-                style.Append(Styles?.HoveredDayButtons);
-            }
+            AppendStyle(style, Styles?.HoveredDayButtons);
         }
 
         var isInMonth = IsInMonth(date, monthIndex);
@@ -2651,10 +2639,7 @@ private void CheckCurrentCalendarMatchesCurrentValue()
                 klass.Append(' ').Append(Classes?.HighlightedDayButton);
             }
 
-            if (Styles?.HighlightedDayButton is not null)
-            {
-                style.Append(' ').Append(Styles?.HighlightedDayButton);
-            }
+            AppendStyle(style, Styles?.HighlightedDayButton);
         }
 
         //Is today
@@ -2667,10 +2652,7 @@ private void CheckCurrentCalendarMatchesCurrentValue()
                 klass.Append(' ').Append(Classes?.TodayDayButton);
             }
 
-            if (Styles?.TodayDayButton is not null)
-            {
-                style.Append(' ').Append(Styles?.TodayDayButton);
-            }
+            AppendStyle(style, Styles?.TodayDayButton);
         }
 
         var customClass = GetDayClass?.Invoke(GetDateTimeOfDayCell(date));
@@ -2682,6 +2664,20 @@ private void CheckCurrentCalendarMatchesCurrentValue()
         return (style.ToString(), klass.ToString());
     }
 
+    // The style slots of a day button are joined with a semicolon rather than with a space, since a
+    // style that omits its trailing one would otherwise swallow the declaration appended after it.
+    private static void AppendStyle(StringBuilder styles, string? style)
+    {
+        if (style.HasNoValue()) return;
+
+        if (styles.Length > 0 && styles[^1] is not ';')
+        {
+            styles.Append(';');
+        }
+
+        styles.Append(style);
+    }
+
     private string GetMonthCellCssClass(int monthIndex, int todayYear, int todayMonth)
     {
         var className = new StringBuilder();
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss
index 1fa6f3e280a..01129e10622 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss
@@ -379,6 +379,10 @@
             background-color: var(--bit-dtrp-clr-hover);
         }
     }
+
+    &:active {
+        background-color: var(--bit-dtrp-clr-active);
+    }
 }
 
 .bit-dtrp-dse {
@@ -394,6 +398,10 @@
             background-color: var(--bit-dtrp-clr-hover);
         }
     }
+
+    &:active {
+        background-color: var(--bit-dtrp-clr-active);
+    }
 }
 
 .bit-dtrp-dsse {
@@ -410,6 +418,10 @@
             background-color: var(--bit-dtrp-clr-hover);
         }
     }
+
+    &:active {
+        background-color: var(--bit-dtrp-clr-active);
+    }
 }
 
 // The prospective range previewed while the pointer moves over the day cells.

From 6ac6ca82ac755c97d4236cd23857904f4819c8a7 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Mon, 10 Aug 2026 19:30:53 +0330
Subject: [PATCH 4/7] local review improvements

---
 .../DateRangePicker/BitDateRangePicker.razor  |  2 +-
 .../BitDateRangePicker.razor.cs               | 34 +++++++-
 .../BitDateRangePickerClassStyles.cs          | 26 ++----
 .../BitDateRangePickerDemo.razor              | 10 ++-
 .../BitDateRangePickerDemo.razor.cs           | 14 ----
 .../BitDateRangePickerDemo.razor.samples.cs   |  3 +
 .../BitDateRangePickerTests.cs                | 84 +++++++++++++++++++
 7 files changed, 137 insertions(+), 36 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
index 34a4431c87d..ec39edd5a2e 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
@@ -214,7 +214,7 @@
                                     @monthTitle
                                 </div>
                             }
-                            <div class="bit-dtrp-nbc">
+                            <div style="@Styles?.DayPickerNavWrapper" class="bit-dtrp-nbc @Classes?.DayPickerNavWrapper">
                                 @if (isFirstMonth)
                                 {
                                     <button @onclick="() => HandleMonthChange(false)"
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
index 65ffabfc0ec..29b52531655 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
@@ -87,7 +87,6 @@ private int _startTimeHourView
         }
         set
         {
-
             if (value > 23)
             {
                 value = 23;
@@ -97,6 +96,18 @@ private int _startTimeHourView
                 value = 0;
             }
 
+            if (TimeFormat == BitTimeFormat.TwelveHours && value <= 12)
+            {
+                // The input carries the 12-hour face value, so it has to be mapped back into the
+                // 24-hour hour without flipping the currently selected AM/PM period.
+                value %= 12;
+
+                if (IsAm(_startTimeHour) is false)
+                {
+                    value += 12;
+                }
+            }
+
             if (CanChangeTime(startTimeHour: value) is false) return;
 
             _startTimeHour = value;
@@ -150,7 +161,6 @@ private int _endTimeHourView
         }
         set
         {
-
             if (value > 23)
             {
                 value = 23;
@@ -160,6 +170,18 @@ private int _endTimeHourView
                 value = 0;
             }
 
+            if (TimeFormat == BitTimeFormat.TwelveHours && value <= 12)
+            {
+                // The input carries the 12-hour face value, so it has to be mapped back into the
+                // 24-hour hour without flipping the currently selected AM/PM period.
+                value %= 12;
+
+                if (IsAm(_endTimeHour) is false)
+                {
+                    value += 12;
+                }
+            }
+
             if (CanChangeTime(endTimeHour: value) is false) return;
 
             _endTimeHour = value;
@@ -3079,6 +3101,10 @@ private bool CanChangeTime(int? startTimeHour = null, int? startTimeMinute = nul
             return startDate >= minDate && endDate <= maxDate;
         }
 
+        // While the dates of the range are not picked yet, only a sub-day MaxRange can be violated
+        // by the times alone: with a whole day available the times always fit inside it.
+        if (MaxRange.Value.TotalHours >= 24) return true;
+
         var maxRangeTotalMinutes = new TimeSpan(MaxRange.Value.Hours, MaxRange.Value.Minutes, MaxRange.Value.Seconds).TotalMinutes;
 
         return maxRangeTotalMinutes > Math.Abs((startTime - endTime).TotalMinutes);
@@ -3195,6 +3221,10 @@ private bool IsButtonDisabled(int startTimeHour, int startTimeMinute, int endTim
             return startDate < minDate || endDate > maxDate;
         }
 
+        // While the dates of the range are not picked yet, only a sub-day MaxRange can be violated
+        // by the times alone: with a whole day available the times always fit inside it.
+        if (MaxRange.Value.TotalHours >= 24) return false;
+
         var maxRangeTotalMinutes = new TimeSpan(MaxRange.Value.Hours, MaxRange.Value.Minutes, MaxRange.Value.Seconds).TotalMinutes;
         return maxRangeTotalMinutes < Math.Abs((startTime - endTime).TotalMinutes);
     }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePickerClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePickerClassStyles.cs
index 8c0846efba3..74884273aa2 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePickerClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePickerClassStyles.cs
@@ -113,12 +113,12 @@ public class BitDateRangePickerClassStyles
     public string? GoToTodayIcon { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the hide time-picker button of the BitDatePicker.
+    /// Custom CSS classes/styles for the hide time-picker button of the BitDateRangePicker.
     /// </summary>
     public string? HideTimePickerButton { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the hide time-picker icon of the BitDatePicker.
+    /// Custom CSS classes/styles for the hide time-picker icon of the BitDateRangePicker.
     /// </summary>
     public string? HideTimePickerIcon { get; set; }
 
@@ -247,23 +247,13 @@ public class BitDateRangePickerClassStyles
     /// </summary>
     public string? EndTimeMinuteInputContainer { get; set; }
 
-    /// <summary>
-    /// Custom CSS classes/styles for the start time's wrapper of the BitDateRangePicker.
-    /// </summary>
-    public string? StartTimeWrapper { get; set; }
-
-    /// <summary>
-    /// Custom CSS classes/styles for the end time's wrapper of the BitDateRangePicker.
-    /// </summary>
-    public string? EndTimeWrapper { get; set; }
-
     /// <summary>
     /// Custom CSS classes/styles for the time's wrapper of the BitDateRangePicker.
     /// </summary>
     public string? TimePickerWrapper { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the time's header of the BitDatePicker.
+    /// Custom CSS classes/styles for the time's header of the BitDateRangePicker.
     /// </summary>
     public string? TimePickerHeader { get; set; }
 
@@ -428,12 +418,12 @@ public class BitDateRangePickerClassStyles
     public string? YearPickerToggleButton { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the show time-picker button of the BitDatePicker.
+    /// Custom CSS classes/styles for the show time-picker button of the BitDateRangePicker.
     /// </summary>
     public string? ShowTimePickerButton { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the show time-picker icon of the BitDatePicker.
+    /// Custom CSS classes/styles for the show time-picker icon of the BitDateRangePicker.
     /// </summary>
     public string? ShowTimePickerIcon { get; set; }
 
@@ -443,7 +433,7 @@ public class BitDateRangePickerClassStyles
     public string? MonthPickerNavWrapper { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the wrapper of the time-picker's nav buttons of the BitDatePicker.
+    /// Custom CSS classes/styles for the wrapper of the time-picker's nav buttons of the BitDateRangePicker.
     /// </summary>
     public string? TimePickerNavWrapper { get; set; }
 
@@ -533,12 +523,12 @@ public class BitDateRangePickerClassStyles
     public string? YearButton { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the BitDatePicker's clear button.
+    /// Custom CSS classes/styles for the BitDateRangePicker's clear button.
     /// </summary>
     public string? ClearButton { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the BitDatePicker's clear button icon.
+    /// Custom CSS classes/styles for the BitDateRangePicker's clear button icon.
     /// </summary>
     public string? ClearButtonIcon { get; set; }
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
index 651fc91fc94..4f5d2ed5c40 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
@@ -19,6 +19,8 @@
             clicking a second day closes it, and clicking again starts a new range. Beyond the usual input states
             (<b>Label</b>, <b>Placeholder</b>, <b>Required</b>, <b>IsEnabled</b>) the calendar itself can show week numbers,
             highlight the current and selected month, and render a start/end time picker with <b>ShowTimePicker</b>.
+            The input's look is adjustable too: <b>IconName</b>/<b>IconLocation</b> replace and reposition its icon, and
+            <b>Underlined</b> and <b>HasBorder</b> switch between the bordered, underlined and borderless appearances.
             <b>AutoClose</b> keeps the callout open after the second pick, <b>ShowClearButton</b> adds a reset button (labelled
             through <b>ClearButtonTitle</b>) once a range is set, and <b>StartingValue</b> decides which month and which times
             the calendar opens on while no value is selected. Opening the callout moves the keyboard focus onto the day grid,
@@ -41,6 +43,12 @@
             <br /><br />
             <BitDateRangePicker Label="Custom Icon" IconName="@BitIconName.Airplane" />
             <br /><br />
+            <BitDateRangePicker Label="Left icon" IconLocation="BitIconLocation.Left" />
+            <br /><br />
+            <BitDateRangePicker Label="Underlined" Underlined />
+            <br /><br />
+            <BitDateRangePicker Label="Without border" HasBorder="false" />
+            <br /><br />
             <BitDateRangePicker Label="Disabled AutoClose" AutoClose="false" />
             <br /><br />
             <BitDateRangePicker Label="Show clear button when has a value" ShowClearButton ClearButtonTitle="Clear the dates" />
@@ -304,7 +312,7 @@
             <b>TimeZone</b> specifies the time zone used to interpret and display the selected dates and times, so the
             offsets of the produced <b>DateTimeOffset</b> values belong to that zone instead of the local one.
             <br />
-            Remeber using this feature in different runtimes needs more investigations, for example,
+            Remember using this feature in different runtimes needs more investigations, for example,
             there are different data available based on the OS the code is running on or different settings
             enabled for the project (like InvariantTimezone in the project file,
             <BitLink Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/globalization-localization?view=aspnetcore-9.0#timezone-information"
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs
index 186ddf7a419..5848a04aad2 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs
@@ -1572,20 +1572,6 @@ public partial class BitDateRangePickerDemo
                     Description = "Custom CSS classes/styles for the end time's Pm button of the BitDateRangePicker."
                 },
                 new()
-                {
-                    Name = "StartTimeWrapper",
-                    Type = "string?",
-                    DefaultValue = "null",
-                    Description = "Custom CSS classes/styles for the start time's wrapper of the BitDateRangePicker."
-                },
-                new()
-                {
-                    Name = "EndTimeWrapper",
-                    Type = "string?",
-                    DefaultValue = "null",
-                    Description = "Custom CSS classes/styles for the end time's wrapper of the BitDateRangePicker."
-                },
-                new()
                 {
                     Name = "Divider",
                     Type = "string?",
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs
index 6f20f7ae976..1ddf0d1e19b 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs
@@ -11,6 +11,9 @@ public partial class BitDateRangePickerDemo
 <BitDateRangePicker Label=""Highlight months"" HighlightCurrentMonth HighlightSelectedMonth />
 <BitDateRangePicker Label=""TimePicker"" ShowTimePicker />
 <BitDateRangePicker Label=""Custom Icon"" IconName=""@BitIconName.Airplane"" />
+<BitDateRangePicker Label=""Left icon"" IconLocation=""BitIconLocation.Left"" />
+<BitDateRangePicker Label=""Underlined"" Underlined />
+<BitDateRangePicker Label=""Without border"" HasBorder=""false"" />
 <BitDateRangePicker Label=""Disabled AutoClose"" AutoClose=""false"" />
 <BitDateRangePicker Label=""Show clear button when has a value"" ShowClearButton ClearButtonTitle=""Clear the dates"" />
 <BitDateRangePicker Label=""Hidden month picker"" IsMonthPickerVisible=""false"" />
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs
index 670a30b46e6..67780a98573 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs
@@ -2638,6 +2638,90 @@ public void BitDateRangePickerStandaloneShouldSelectDatesWithAnUnboundIsOpen()
         Assert.IsTrue(value!.StartDate.HasValue);
     }
 
+    [TestMethod]
+    public void BitDateRangePickerTypedHourShouldKeepThePmPeriodInTwelveHoursFormat()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        BitDateRangePickerValue? value = new()
+        {
+            StartDate = new DateTimeOffset(2024, 3, 1, 9, 0, 0, TimeSpan.Zero),
+            EndDate = new DateTimeOffset(2024, 3, 5, 14, 0, 0, TimeSpan.Zero)
+        };
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.TimeFormat, BitTimeFormat.TwelveHours);
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        // The end time shows "2" (14:00 is 2 PM); typing "3" must mean 3 PM, not 3 AM.
+        component.FindAll(".bit-dtrp-eic .bit-dtrp-tin")[0].Input("3");
+
+        Assert.AreEqual(15, value!.EndDate!.Value.Hour);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerTypedTwelveShouldMeanMidnightInTheAmPeriod()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        BitDateRangePickerValue? value = new()
+        {
+            StartDate = new DateTimeOffset(2024, 3, 1, 9, 0, 0, TimeSpan.Zero),
+            EndDate = new DateTimeOffset(2024, 3, 5, 14, 0, 0, TimeSpan.Zero)
+        };
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.TimeFormat, BitTimeFormat.TwelveHours);
+            parameters.Bind(p => p.Value, value, v => value = v);
+        });
+
+        // The start time shows "9" (9 AM); typing "12" on a 12-hour face means 12 AM, which is 00:00.
+        component.FindAll(".bit-dtrp-sic .bit-dtrp-tin")[0].Input("12");
+
+        Assert.AreEqual(0, value!.StartDate!.Value.Hour);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerWholeDayMaxRangeShouldNotDisableTheTimeSpinnersWithoutAValue()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ShowTimePicker, true);
+            // A MaxRange of at least a whole day cannot be violated by the times alone, so the
+            // default 00:00 - 23:59 times must not lock the spinners while no date is picked.
+            parameters.Add(p => p.MaxRange, new TimeSpan(2, 4, 30, 0));
+        });
+
+        foreach (var button in component.FindAll(".bit-dtrp-tbt"))
+        {
+            Assert.IsFalse(button.HasAttribute("disabled"));
+        }
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerDayPickerNavWrapperClassTest()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.Classes, new BitDateRangePickerClassStyles { DayPickerNavWrapper = "custom-nav-wrapper" });
+            parameters.Add(p => p.Styles, new BitDateRangePickerClassStyles { DayPickerNavWrapper = "background-color: red;" });
+        });
+
+        var navWrapper = component.Find(".bit-dtrp-dwp .bit-dtrp-nbc");
+
+        Assert.IsTrue(navWrapper.ClassList.Contains("custom-nav-wrapper"));
+        Assert.AreEqual("background-color: red;", navWrapper.GetAttribute("style"));
+    }
+
     // Midday keeps a date-only assertion safe from any time zone shifting the instant across midnight.
     private static DateTimeOffset FixedDate(int year, int month, int day)
     {

From ba29adf822315ceb058917aa51072fe695b116ea Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Mon, 10 Aug 2026 20:26:40 +0330
Subject: [PATCH 5/7] resolve review comments 3

---
 .../DateRangePicker/BitDateRangePicker.razor  |  2 +-
 .../BitDateRangePicker.razor.cs               | 50 +++++++++++++++++--
 .../BitDateRangePickerDemo.razor              |  5 +-
 .../BitDateRangePickerDemo.razor.samples.cs   |  2 +-
 .../BitDateRangePickerDemo.razor.scss         |  2 +-
 .../BitDateRangePickerTests.cs                |  9 ++--
 6 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
index ec39edd5a2e..2eb1722fda1 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
@@ -163,7 +163,7 @@
                                 title="@(preset.Title ?? preset.Text)"
                                 aria-disabled="@presetDisabled"
                                 aria-pressed="@(presetSelected ? "true" : "false")"
-                                style="@Styles?.PresetButton @preset.Style"
+                                style="@($"{Styles?.PresetButton?.Trim(';')};{preset.Style}".Trim(';'))"
                                 class="bit-dtrp-prb @(presetSelected ? $"bit-dtrp-prs {Classes?.SelectedPresetButton}" : null) @Classes?.PresetButton @preset.Class">
                             @preset.Text
                         </button>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
index 29b52531655..a17d777d1fa 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
@@ -1130,6 +1130,10 @@ private bool TryParseRange(string value, out BitDateRangePickerValue? result)
             endDate = parsedEndDate;
         }
 
+        // A text that is nothing but the literal parts of the format holds no date at all, so it is
+        // invalid input rather than an empty range.
+        if (startDate.HasValue is false && endDate.HasValue is false) return false;
+
         if (startDate.HasValue && endDate.HasValue && endDate < startDate)
         {
             (startDate, endDate) = (endDate, startDate);
@@ -1652,13 +1656,46 @@ private async Task SelectPreset(BitDateRangePickerPreset preset)
         var presetValue = preset.ValueProvider is not null ? preset.ValueProvider() : preset.Value;
         if (presetValue is null) return;
 
+        var startDate = presetValue.StartDate;
+        var endDate = presetValue.EndDate;
+
+        // A preset reaching outside the Min/Max bounds is rejected rather than clamped, since a
+        // shifted variant of the advertised range would not be the range its button promised.
+        if (MinDate.HasValue)
+        {
+            var minDate = GetDateTime(MinDate.Value).Date;
+
+            if ((startDate.HasValue && GetDateTime(startDate.Value).Date < minDate) ||
+                (endDate.HasValue && GetDateTime(endDate.Value).Date < minDate)) return;
+        }
+
+        if (MaxDate.HasValue)
+        {
+            var maxDate = GetDateTime(MaxDate.Value).Date;
+
+            if ((startDate.HasValue && GetDateTime(startDate.Value).Date > maxDate) ||
+                (endDate.HasValue && GetDateTime(endDate.Value).Date > maxDate)) return;
+        }
+
+        if (startDate.HasValue && endDate.HasValue && MaxRange.HasValue)
+        {
+            var maxEndDate = new DateTimeOffset(GetMaxEndDate(startDate), endDate.Value.Offset);
+
+            if (maxEndDate < endDate)
+            {
+                _endTimeHour = maxEndDate.Hour;
+                _endTimeMinute = maxEndDate.Minute;
+                endDate = maxEndDate;
+            }
+        }
+
         _hoveredDate = null;
-        _focusedDate = presetValue.StartDate.HasValue ? GetDateTime(presetValue.StartDate.Value).Date : null;
+        _focusedDate = startDate.HasValue ? GetDateTime(startDate.Value).Date : null;
 
         CurrentValue = new BitDateRangePickerValue
         {
-            StartDate = presetValue.StartDate,
-            EndDate = presetValue.EndDate
+            StartDate = startDate,
+            EndDate = endDate
         };
 
         // A ValueProvider is re-evaluated on every call and a relative range therefore never compares
@@ -2683,6 +2720,13 @@ private void CheckCurrentCalendarMatchesCurrentValue()
             klass.Append(' ').Append(customClass);
         }
 
+        // The markup appends Styles?.DayButton after the produced style, so a missing trailing
+        // semicolon would merge the last declaration with the first one of that slot.
+        if (style.Length > 0 && style[^1] is not ';')
+        {
+            style.Append(';');
+        }
+
         return (style.ToString(), klass.ToString());
     }
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
index 4f5d2ed5c40..3d86bbd0911 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
@@ -70,8 +70,9 @@
             Each <b>BitDateRangePickerPreset</b> carries the text of its button and either a fixed <b>Value</b> or a
             <b>ValueProvider</b> function, which is re-evaluated on every click and therefore keeps relative ranges such as
             "Last 7 days" correct however long the page has been open. The applied preset stays highlighted until the range
-            is changed by any other means, <b>OnPresetSelect</b> reports which one was clicked, and selecting one closes the
-            callout just like picking the second date does. A preset can also be disabled, titled and styled individually.
+            is changed by any other means, <b>OnPresetSelect</b> reports which one was clicked, and when <b>AutoClose</b> is on
+            (and the picker is not <b>Standalone</b>), selecting one closes the callout just like picking the second date
+            does. A preset can also be disabled, titled and styled individually.
         </div>
         <div class="example-content">
             <BitDateRangePicker Label="Common ranges" Presets="presets" @bind-Value="presetsValue"
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs
index 1ddf0d1e19b..d7e1e3dde48 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs
@@ -104,7 +104,7 @@ public partial class BitDateRangePickerDemo
 <style>
     .custom-friday {
         color: white;
-        background-color: #8a2be29c;
+        background-color: blueviolet;
     }
 </style>
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.scss
index 1e0b79d41cc..14ca98cd109 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.scss
@@ -36,7 +36,7 @@
 ::deep {
     .custom-friday {
         color: white;
-        background-color: #8a2be29c;
+        background-color: blueviolet;
     }
 
     .custom-hovered-days {
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs
index 67780a98573..004fd5ce752 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs
@@ -1248,12 +1248,13 @@ public void BitDateRangePickerDisabledDaysOfWeekTest()
     public void BitDateRangePickerDisabledDatesTest()
     {
         Context.JSInterop.Mode = JSRuntimeMode.Loose;
-        var today = DateTimeOffset.Now.Date;
-        var disabledDate = new DateTimeOffset(today.AddDays(1), DateTimeOffset.Now.Offset);
+        var today = new DateTimeOffset(2024, 6, 12, 0, 0, 0, TimeSpan.Zero);
+        var disabledDate = today.AddDays(1);
 
         var component = RenderComponent<BitDateRangePicker>(parameters =>
         {
             parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.Today, today);
             parameters.Add(p => p.DisabledDates, new[] { disabledDate });
         });
 
@@ -1299,11 +1300,13 @@ public void BitDateRangePickerDisabledDateShouldNotBeSelectable()
     public void BitDateRangePickerHighlightedDatesTest()
     {
         Context.JSInterop.Mode = JSRuntimeMode.Loose;
-        var highlightedDate = new DateTimeOffset(DateTimeOffset.Now.Date.AddDays(1), DateTimeOffset.Now.Offset);
+        var today = new DateTimeOffset(2024, 6, 12, 0, 0, 0, TimeSpan.Zero);
+        var highlightedDate = today.AddDays(1);
 
         var component = RenderComponent<BitDateRangePicker>(parameters =>
         {
             parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.Today, today);
             parameters.Add(p => p.HighlightedDates, new[] { highlightedDate });
         });
 

From 8031e545afa3fcb6914d8dfe283832819727cf9d Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Mon, 10 Aug 2026 22:21:15 +0330
Subject: [PATCH 6/7] resolve review comments 4

---
 .../DateRangePicker/BitDateRangePicker.razor.cs    | 12 ++++++++----
 .../Inputs/DateRangePicker/BitDateRangePicker.scss | 14 +++++++++++++-
 .../DateRangePicker/BitDateRangePickerDemo.razor   |  6 +++---
 .../DateRangePicker/BitDateRangePickerTests.cs     |  7 +++++--
 4 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
index a17d777d1fa..fc789c7dec0 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
@@ -1026,15 +1026,19 @@ await _js.BitSwipesSetup(
             catch (JSDisconnectedException) { } // we can ignore this exception here
         }
 
-        if (_focusAfterRender && _focusedDate.HasValue)
+        if (_focusAfterRender)
         {
+            // Consumed even without a focused date, so it cannot linger and fire on a later render.
             _focusAfterRender = false;
 
-            try
+            if (_focusedDate.HasValue)
             {
-                await _js.BitCalendarsFocusDay(GetDayButtonId(_focusedDate.Value));
+                try
+                {
+                    await _js.BitCalendarsFocusDay(GetDayButtonId(_focusedDate.Value));
+                }
+                catch (JSDisconnectedException) { } // we can ignore this exception here
             }
-            catch (JSDisconnectedException) { } // we can ignore this exception here
         }
     }
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss
index 01129e10622..8035dc8683a 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss
@@ -984,6 +984,7 @@
         }
 
         .bit-dtrp-grp {
+            flex-wrap: wrap;
             justify-content: center;
         }
 
@@ -1016,12 +1017,23 @@
             display: flex;
         }
 
-        // The presets no longer fit in a side column on a narrow screen, so they wrap into a row.
+        // The presets no longer fit in a side column on a narrow screen, so they take a full row
+        // of the wrapped group beneath the calendar and wrap their buttons there.
         .bit-dtrp-prc {
+            order: 2;
+            width: 100%;
             max-height: unset;
             flex-flow: row wrap;
+            box-sizing: border-box;
             justify-content: center;
         }
+
+        .bit-dtrp-dvd {
+            order: 1;
+            width: 100%;
+            border-right: none;
+            border-top: $shp-border-width $shp-border-style $clr-brd-sec;
+        }
     }
 }
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
index 3d86bbd0911..7aa81162856 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
@@ -389,9 +389,9 @@
     <DemoExample Title="Templates" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
         <div class="example-desc">
             Every cell of the calendar can be rendered by the application. <b>LabelTemplate</b> and <b>IconTemplate</b>
-            replace the label and the input's icon, while <b>DayCellTemplate</b>, <b>MonthCellTemplate</b> and
-            <b>YearCellTemplate</b> receive the date of the cell being rendered and can decorate it with badges, colors
-            or any other markup.
+            replace the label and the input's icon, while <b>DayCellTemplate</b> and <b>MonthCellTemplate</b> receive
+            the date of the cell being rendered and <b>YearCellTemplate</b> receives its year number, so each can
+            decorate the cell with badges, colors or any other markup.
         </div>
         <div class="example-content">
             <BitDateRangePicker>
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs
index 004fd5ce752..93245a7be08 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs
@@ -1233,13 +1233,14 @@ public void BitDateRangePickerDisabledDaysOfWeekTest()
         var component = RenderComponent<BitDateRangePicker>(parameters =>
         {
             parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.FirstDayOfWeek, DayOfWeek.Sunday);
             parameters.Add(p => p.Today, new DateTimeOffset(2024, 6, 12, 0, 0, 0, TimeSpan.Zero));
             parameters.Add(p => p.DisabledDaysOfWeek, new[] { DayOfWeek.Saturday, DayOfWeek.Sunday });
         });
 
         var days = component.FindAll(".bit-dtrp-dbt");
 
-        // June 2024 starts on a Saturday, so the very first rendered cell is a disabled weekend day.
+        // With the week pinned to start on Sunday, the very first rendered cell is a disabled weekend day.
         Assert.IsTrue(days.Count(d => d.HasAttribute("disabled")) > 0);
         Assert.IsTrue(days[0].HasAttribute("disabled"));
     }
@@ -2300,10 +2301,12 @@ public void BitDateRangePickerSelectingADayOfTheNextYearShouldNotJumpAYearBack()
         {
             parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
             parameters.Add(p => p.AutoClose, false);
+            parameters.Add(p => p.FirstDayOfWeek, DayOfWeek.Sunday);
             parameters.Bind(p => p.Value, value, v => value = v);
         });
 
-        // December 2024 starts on a Sunday, so the only outside days of its grid are those of January 2025.
+        // December 2024 starts on a Sunday, so with a Sunday-starting week the only outside days
+        // of its grid are those of January 2025.
         component.FindAll(".bit-dtrp-dbo")[0].Click();
 
         Assert.AreEqual(2025, value!.EndDate!.Value.Year);

From 6b9b6ad6ca2455763932a0bef1eb5a2e93dd8547 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad <msynk@outlook.com>
Date: Tue, 11 Aug 2026 06:41:15 +0330
Subject: [PATCH 7/7] local review improvements

---
 .../DateRangePicker/BitDateRangePicker.razor  |  28 +-
 .../BitDateRangePicker.razor.cs               | 276 +++++++---
 .../BitDateRangePickerDemo.razor              |  27 +-
 .../BitDateRangePickerDemo.razor.cs           |  99 +++-
 .../BitDateRangePickerDemo.razor.samples.cs   |   9 +
 .../BitDateRangePickerTests.cs                | 498 ++++++++++++++++++
 6 files changed, 855 insertions(+), 82 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
index 2eb1722fda1..45c3201d80d 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor
@@ -70,7 +70,7 @@
                        style="@Styles?.Input"
                        class="bit-dtrp-inp@(AllowTextInput ? " bit-dtrp-ein" : null) @Classes?.Input" />
 
-                @if (IsEnabled && ShowClearButton && CurrentValue?.StartDate is not null)
+                @if (IsEnabled && ReadOnly is false && ShowClearButton && (CurrentValue?.StartDate is not null || CurrentValue?.EndDate is not null))
                 {
                     <button @onclick="HandleOnClearButtonClick" @onclick:stopPropagation
                             style="@Styles?.ClearButton"
@@ -127,7 +127,7 @@
      dir="@Dir?.ToString().ToLower()">
     <div style="@Styles?.CalloutContainer"
          class="bit-dtrp-cac @Classes?.CalloutContainer"
-         role="@(Standalone ? null : "dialog")"
+         role="@(Standalone ? "group" : "dialog")"
          @attributes=@CalloutHtmlAttributes
          @onkeydown="HandleOnCalloutKeyDown"
          aria-label="@CalloutAriaLabel">
@@ -221,6 +221,7 @@
                                             type="button"
                                             disabled="@prevDisabled"
                                             title="@GoToPrevMonthTitle"
+                                            aria-label="@GoToPrevMonthTitle"
                                             aria-disabled="@prevDisabled"
                                             style="@Styles?.PrevMonthNavButton"
                                             class="bit-dtrp-nbt @Classes?.PrevMonthNavButton">
@@ -236,6 +237,7 @@
                                     <button @onclick="HandleGoToToday"
                                             type="button"
                                             title="@GoToTodayTitle"
+                                            aria-label="@GoToTodayTitle"
                                             disabled="@goToTodayDisabled"
                                             style="@Styles?.GoToTodayButton"
                                             aria-disabled="@goToTodayDisabled"
@@ -251,6 +253,7 @@
                                             type="button"
                                             disabled="@nextDisabled"
                                             title="@GoToNextMonthTitle"
+                                            aria-label="@GoToNextMonthTitle"
                                             aria-disabled="@nextDisabled"
                                             style="@Styles?.NextMonthNavButton"
                                             class="bit-dtrp-nbt @Classes?.NextMonthNavButton">
@@ -636,6 +639,7 @@
                                 <button @onclick="ToggleTimePickerOverlay"
                                         type="button"
                                         title="@HideTimePickerTitle"
+                                        aria-label="@HideTimePickerTitle"
                                         disabled="@(IsEnabled is false)"
                                         aria-disabled="@(IsEnabled is false)"
                                         style="@Styles?.HideTimePickerButton"
@@ -654,6 +658,8 @@
                                         @onpointerout="HandleOnPointerUpOrOut"
                                         @onpointerdown="() => HandleOnPointerDown(true, true, true)"
                                         type="button"
+                                        title="@StartTimeIncreaseHourTitle"
+                                        aria-label="@StartTimeIncreaseHourTitle"
                                         style="@Styles?.StartTimeIncreaseHourButton"
                                         class="bit-dtrp-tbt @Classes?.StartTimeIncreaseHourButton"
                                         disabled="@startTimeIncreaseHourDisabled"
@@ -673,6 +679,7 @@
                                        readonly="@ReadOnly"
                                        disabled="@(IsEnabled is false)"
                                        style="@Styles?.StartTimeHourInput"
+                                       aria-label="@StartTimeHourInputAriaLabel"
                                        aria-disabled="@(IsEnabled is false)"
                                        class="bit-dtrp-tin @Classes?.StartTimeHourInput"
                                        autocomplete="@BitAutoCompleteValue.NewPassword" />
@@ -680,6 +687,8 @@
                                         @onpointerout="HandleOnPointerUpOrOut"
                                         @onpointerdown="() => HandleOnPointerDown(false, true, true)"
                                         type="button"
+                                        title="@StartTimeDecreaseHourTitle"
+                                        aria-label="@StartTimeDecreaseHourTitle"
                                         style="@Styles?.StartTimeDecreaseHourButton"
                                         class="bit-dtrp-tbt @Classes?.StartTimeDecreaseHourButton"
                                         disabled="@startTimeDecreaseHourDisabled"
@@ -695,6 +704,8 @@
                                         @onpointerout="HandleOnPointerUpOrOut"
                                         @onpointerdown="() => HandleOnPointerDown(true, false, true)"
                                         type="button"
+                                        title="@StartTimeIncreaseMinuteTitle"
+                                        aria-label="@StartTimeIncreaseMinuteTitle"
                                         style="@Styles?.StartTimeIncreaseMinuteButton"
                                         class="bit-dtrp-tbt @Classes?.StartTimeIncreaseMinuteButton"
                                         disabled="@startTimeIncreaseMinuteDisabled"
@@ -713,6 +724,7 @@
                                        inputmode="numeric"
                                        readonly="@ReadOnly"
                                        disabled="@(IsEnabled is false)"
+                                       aria-label="@StartTimeMinuteInputAriaLabel"
                                        aria-disabled="@(IsEnabled is false)"
                                        style="@Styles?.StartTimeMinuteInput"
                                        class="bit-dtrp-tin @Classes?.StartTimeMinuteInput"
@@ -721,6 +733,8 @@
                                         @onpointerout="HandleOnPointerUpOrOut"
                                         @onpointerdown="() => HandleOnPointerDown(false, false, true)"
                                         type="button"
+                                        title="@StartTimeDecreaseMinuteTitle"
+                                        aria-label="@StartTimeDecreaseMinuteTitle"
                                         style="@Styles?.StartTimeDecreaseMinuteButton"
                                         class="bit-dtrp-tbt @Classes?.StartTimeDecreaseMinuteButton"
                                         disabled="@startTimeDecreaseMinuteDisabled"
@@ -765,6 +779,8 @@
                                         @onpointerout="HandleOnPointerUpOrOut"
                                         @onpointerdown="() => HandleOnPointerDown(true, true, false)"
                                         type="button"
+                                        title="@EndTimeIncreaseHourTitle"
+                                        aria-label="@EndTimeIncreaseHourTitle"
                                         style="@Styles?.EndTimeIncreaseHourButton"
                                         class="bit-dtrp-tbt @Classes?.EndTimeIncreaseHourButton"
                                         disabled="@endTimeIncreaseHourDisabled"
@@ -784,6 +800,7 @@
                                        readonly="@ReadOnly"
                                        disabled="@(IsEnabled is false)"
                                        style="@Styles?.EndTimeHourInput"
+                                       aria-label="@EndTimeHourInputAriaLabel"
                                        aria-disabled="@(IsEnabled is false)"
                                        class="bit-dtrp-tin @Classes?.EndTimeHourInput"
                                        autocomplete="@BitAutoCompleteValue.NewPassword" />
@@ -791,6 +808,8 @@
                                         @onpointerout="HandleOnPointerUpOrOut"
                                         @onpointerdown="() => HandleOnPointerDown(false, true, false)"
                                         type="button"
+                                        title="@EndTimeDecreaseHourTitle"
+                                        aria-label="@EndTimeDecreaseHourTitle"
                                         style="@Styles?.EndTimeDecreaseHourButton"
                                         class="bit-dtrp-tbt @Classes?.EndTimeDecreaseHourButton"
                                         disabled="@endTimeDecreaseHourDisabled"
@@ -806,6 +825,8 @@
                                         @onpointerout="HandleOnPointerUpOrOut"
                                         @onpointerdown="() => HandleOnPointerDown(true, false, false)"
                                         type="button"
+                                        title="@EndTimeIncreaseMinuteTitle"
+                                        aria-label="@EndTimeIncreaseMinuteTitle"
                                         style="@Styles?.EndTimeIncreaseMinuteButton"
                                         class="bit-dtrp-tbt @Classes?.EndTimeIncreaseMinuteButton"
                                         disabled="@endTimeIncreaseMinuteDisabled"
@@ -825,6 +846,7 @@
                                        readonly="@ReadOnly"
                                        disabled="@(IsEnabled is false)"
                                        style="@Styles?.EndTimeMinuteInput"
+                                       aria-label="@EndTimeMinuteInputAriaLabel"
                                        aria-disabled="@(IsEnabled is false)"
                                        class="bit-dtrp-tin @Classes?.EndTimeMinuteInput"
                                        autocomplete="@BitAutoCompleteValue.NewPassword" />
@@ -832,6 +854,8 @@
                                         @onpointerout="HandleOnPointerUpOrOut"
                                         @onpointerdown="() => HandleOnPointerDown(false, false, false)"
                                         type="button"
+                                        title="@EndTimeDecreaseMinuteTitle"
+                                        aria-label="@EndTimeDecreaseMinuteTitle"
                                         style="@Styles?.EndTimeDecreaseMinuteButton"
                                         class="bit-dtrp-tbt @Classes?.EndTimeDecreaseMinuteButton"
                                         disabled="@endTimeDecreaseMinuteDisabled"
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
index fc789c7dec0..3d0a666714d 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs
@@ -221,7 +221,9 @@ private int _endTimeMinuteView
 
 
     /// <summary>
-    /// Whether or not the DateRangePicker allows string date inputs.
+    /// Whether or not the DateRangePicker allows string date inputs. A typed range is validated against
+    /// every restriction the calendar enforces (MinDate, MaxDate, MinRange, MaxRange, the disabled days
+    /// and ExcludeDisabledDates), so an out-of-bounds range is rejected as an invalid value.
     /// </summary>
     [Parameter] public bool AllowTextInput { get; set; }
 
@@ -581,6 +583,13 @@ private int _endTimeMinuteView
     /// </summary>
     [Parameter] public EventCallback OnClick { get; set; }
 
+    /// <summary>
+    /// Whether the previous and next navigation buttons move the calendar by all of its rendered months
+    /// instead of one, so consecutive pages of a multi-month calendar never overlap.
+    /// It has no effect when <see cref="MonthCount"/> renders a single month.
+    /// </summary>
+    [Parameter] public bool PagedNavigation { get; set; }
+
     /// <summary>
     /// Callback for when the displayed month of the day picker changes.
     /// The argument is the first day of the newly displayed month.
@@ -718,6 +727,66 @@ private int _endTimeMinuteView
     /// </summary>
     [Parameter] public bool ShowWeekNumbers { get; set; }
 
+    /// <summary>
+    /// The title and the aria-label of the start time-picker's increase-hour button.
+    /// </summary>
+    [Parameter] public string StartTimeIncreaseHourTitle { get; set; } = "Increase start hour";
+
+    /// <summary>
+    /// The title and the aria-label of the start time-picker's decrease-hour button.
+    /// </summary>
+    [Parameter] public string StartTimeDecreaseHourTitle { get; set; } = "Decrease start hour";
+
+    /// <summary>
+    /// The title and the aria-label of the start time-picker's increase-minute button.
+    /// </summary>
+    [Parameter] public string StartTimeIncreaseMinuteTitle { get; set; } = "Increase start minute";
+
+    /// <summary>
+    /// The title and the aria-label of the start time-picker's decrease-minute button.
+    /// </summary>
+    [Parameter] public string StartTimeDecreaseMinuteTitle { get; set; } = "Decrease start minute";
+
+    /// <summary>
+    /// The title and the aria-label of the end time-picker's increase-hour button.
+    /// </summary>
+    [Parameter] public string EndTimeIncreaseHourTitle { get; set; } = "Increase end hour";
+
+    /// <summary>
+    /// The title and the aria-label of the end time-picker's decrease-hour button.
+    /// </summary>
+    [Parameter] public string EndTimeDecreaseHourTitle { get; set; } = "Decrease end hour";
+
+    /// <summary>
+    /// The title and the aria-label of the end time-picker's increase-minute button.
+    /// </summary>
+    [Parameter] public string EndTimeIncreaseMinuteTitle { get; set; } = "Increase end minute";
+
+    /// <summary>
+    /// The title and the aria-label of the end time-picker's decrease-minute button.
+    /// </summary>
+    [Parameter] public string EndTimeDecreaseMinuteTitle { get; set; } = "Decrease end minute";
+
+    /// <summary>
+    /// The aria-label of the start time-picker's hour input.
+    /// </summary>
+    [Parameter] public string StartTimeHourInputAriaLabel { get; set; } = "Start hour";
+
+    /// <summary>
+    /// The aria-label of the start time-picker's minute input.
+    /// </summary>
+    [Parameter] public string StartTimeMinuteInputAriaLabel { get; set; } = "Start minute";
+
+    /// <summary>
+    /// The aria-label of the end time-picker's hour input.
+    /// </summary>
+    [Parameter] public string EndTimeHourInputAriaLabel { get; set; } = "End hour";
+
+    /// <summary>
+    /// The aria-label of the end time-picker's minute input.
+    /// </summary>
+    [Parameter] public string EndTimeMinuteInputAriaLabel { get; set; } = "End minute";
+
     /// <summary>
     /// The icon to display inside the start time-picker's decrease-hour button.
     /// Takes precedence over <see cref="StartTimeDecreaseHourIconName"/> when both are set.
@@ -944,11 +1013,31 @@ public async Task _OnClose()
 
 
 
+    /// <summary>
+    /// Opens the callout of the DateRangePicker, exactly like clicking on its input.
+    /// </summary>
     public Task OpenCallout()
     {
         return HandleOnClick();
     }
 
+    /// <summary>
+    /// Closes the callout of the DateRangePicker.
+    /// </summary>
+    public async Task CloseCallout()
+    {
+        if (Standalone) return;
+        if (IsEnabled is false) return;
+
+        _hoveredDate = null;
+
+        if (await AssignIsOpen(false) is false) return;
+
+        await ToggleCallout();
+
+        StateHasChanged();
+    }
+
 
 
     protected override string RootElementClass => "bit-dtrp";
@@ -1054,7 +1143,7 @@ protected override bool TryParseValueFromString(
             return true;
         }
 
-        if (TryParseRange(value!, out var parsedValue))
+        if (TryParseRange(value!, out var parsedValue) && IsRangeWithinRestrictions(parsedValue!))
         {
             result = parsedValue;
             validationErrorMessage = null;
@@ -1447,9 +1536,11 @@ private void OnSetParameters()
 
         BuildDatesLookups();
 
-        if (CurrentValue is not null)
+        // An open-ended range holding only an end date has no start to precede, so the guard below
+        // only applies once a start date exists.
+        if (CurrentValue?.StartDate is not null)
         {
-            var startDateTime = CurrentValue.StartDate.GetValueOrDefault(DateTimeOffset.Now);
+            var startDateTime = CurrentValue.StartDate.Value;
             if (MinDate.HasValue && MinDate > startDateTime)
             {
                 startDateTime = MinDate.GetValueOrDefault(DateTimeOffset.Now);
@@ -1499,14 +1590,17 @@ private void OnSetParameters()
 
         if (endDateHasValue is false && MaxRange.HasValue && MaxRange.Value.TotalHours < 24)
         {
-            if (_endTimeHour > MaxRange.Value.TotalHours)
-            {
-                _endTimeHour = (int)MaxRange.Value.TotalHours;
-            }
+            // With no end date picked yet, the end time is pulled back just far enough for the
+            // time-only span to fit a sub-day MaxRange, leaving an already fitting time untouched.
+            var maxRangeTotalMinutes = (int)MaxRange.Value.TotalMinutes;
+            var startTotalMinutes = (_startTimeHour * 60) + _startTimeMinute;
+            var endTotalMinutes = (_endTimeHour * 60) + _endTimeMinute;
 
-            if (MaxRange.Value.Minutes < 60 && _endTimeMinute > MaxRange.Value.Minutes)
+            if (Math.Abs(endTotalMinutes - startTotalMinutes) > maxRangeTotalMinutes)
             {
-                _endTimeMinute = MaxRange.Value.Minutes;
+                endTotalMinutes = Math.Min(startTotalMinutes + maxRangeTotalMinutes, (24 * 60) - 1);
+                _endTimeHour = endTotalMinutes / 60;
+                _endTimeMinute = endTotalMinutes % 60;
             }
         }
 
@@ -1663,23 +1757,12 @@ private async Task SelectPreset(BitDateRangePickerPreset preset)
         var startDate = presetValue.StartDate;
         var endDate = presetValue.EndDate;
 
-        // A preset reaching outside the Min/Max bounds is rejected rather than clamped, since a
-        // shifted variant of the advertised range would not be the range its button promised.
-        if (MinDate.HasValue)
-        {
-            var minDate = GetDateTime(MinDate.Value).Date;
-
-            if ((startDate.HasValue && GetDateTime(startDate.Value).Date < minDate) ||
-                (endDate.HasValue && GetDateTime(endDate.Value).Date < minDate)) return;
-        }
-
-        if (MaxDate.HasValue)
-        {
-            var maxDate = GetDateTime(MaxDate.Value).Date;
-
-            if ((startDate.HasValue && GetDateTime(startDate.Value).Date > maxDate) ||
-                (endDate.HasValue && GetDateTime(endDate.Value).Date > maxDate)) return;
-        }
+        // A preset reaching outside the Min/Max bounds (or holding a blocked day as an end) is
+        // rejected rather than clamped, since a shifted variant of the advertised range would not
+        // be the range its button promised. IsDayExcluded compares exactly like the day grid does,
+        // so a preset can never apply a day the grid itself disables.
+        if ((startDate.HasValue && IsDayExcluded(GetDateTime(startDate.Value).Date)) ||
+            (endDate.HasValue && IsDayExcluded(GetDateTime(endDate.Value).Date))) return;
 
         if (startDate.HasValue && endDate.HasValue && MaxRange.HasValue)
         {
@@ -1687,12 +1770,28 @@ private async Task SelectPreset(BitDateRangePickerPreset preset)
 
             if (maxEndDate < endDate)
             {
-                _endTimeHour = maxEndDate.Hour;
-                _endTimeMinute = maxEndDate.Minute;
+                // The four time fields are re-derived from the assigned value right after, so only
+                // the date needs the clamp here.
                 endDate = maxEndDate;
             }
         }
 
+        // The blocked days reject the preset the same way the Min/Max bounds above do: a range whose
+        // ends cannot be picked from the day grid must not be applied by a shortcut either. The check
+        // runs after the MaxRange clamp so it judges the range that would actually be applied.
+        var presetStartDate = startDate.HasValue ? GetDateTime(startDate.Value).Date : (DateTime?)null;
+        var presetEndDate = endDate.HasValue ? GetDateTime(endDate.Value).Date : (DateTime?)null;
+
+        if (presetStartDate.HasValue && IsDayBlocked(presetStartDate.Value)) return;
+        if (presetEndDate.HasValue && IsDayBlocked(presetEndDate.Value)) return;
+
+        if (presetStartDate.HasValue && presetEndDate.HasValue)
+        {
+            if (IsShorterThanMinRange(presetStartDate.Value, presetEndDate.Value)) return;
+
+            if (ExcludeDisabledDates && RangeCoversBlockedDay(presetStartDate.Value, presetEndDate.Value)) return;
+        }
+
         _hoveredDate = null;
         _focusedDate = startDate.HasValue ? GetDateTime(startDate.Value).Date : null;
 
@@ -1808,29 +1907,15 @@ private async Task HandleMonthChange(bool isNext)
         var previousYear = _currentYear;
         var previousMonth = _currentMonth;
 
-        if (isNext)
-        {
-            if (_currentMonth < 12)
-            {
-                _currentMonth++;
-            }
-            else
-            {
-                _currentYear++;
-                _currentMonth = 1;
-            }
-        }
-        else
+        // With PagedNavigation the calendar moves a whole page of months at once, but never past the
+        // point where the single-month navigation would have stopped.
+        var steps = PagedNavigation ? _monthCount : 1;
+
+        for (var i = 0; i < steps; i++)
         {
-            if (_currentMonth > 1)
-            {
-                _currentMonth--;
-            }
-            else
-            {
-                _currentYear--;
-                _currentMonth = 12;
-            }
+            if (i > 0 && CanChangeMonth(isNext) is false) break;
+
+            (_currentYear, _currentMonth) = AddMonths(_currentYear, _currentMonth, isNext ? 1 : -1);
         }
 
         GenerateMonthData(_currentYear, _currentMonth);
@@ -2223,6 +2308,13 @@ private bool IsDayExcluded(DateTime date)
 
         if (MinDate.HasValue && date < GetDateTime(MinDate.Value)) return true;
 
+        return IsDayBlocked(date);
+    }
+
+    // The days blocked by the date-level rules alone (DisabledDaysOfWeek, DisabledDates and
+    // IsDateDisabled), without the Min/Max bounds of the calendar.
+    private bool IsDayBlocked(DateTime date)
+    {
         if (_disabledDaysOfWeek.Contains(date.DayOfWeek)) return true;
 
         if (_disabledDates.Contains(date.Date)) return true;
@@ -2232,6 +2324,57 @@ private bool IsDayExcluded(DateTime date)
         return false;
     }
 
+    // Whether any day strictly between the two ends of the range is blocked, which a range must not
+    // cover when ExcludeDisabledDates is on. The walk is bounded like the excluded-bounds scan.
+    private bool RangeCoversBlockedDay(DateTime startDate, DateTime endDate)
+    {
+        var date = startDate;
+
+        for (var i = 0; i < MAX_EXCLUDED_SCAN_DAYS; i++)
+        {
+            date = date.AddDays(1);
+
+            if (date >= endDate) return false;
+
+            if (IsDayBlocked(date)) return true;
+        }
+
+        return false;
+    }
+
+    // Whether the two ends of the range sit closer to each other than MinRange allows.
+    private bool IsShorterThanMinRange(DateTime startDate, DateTime endDate)
+    {
+        if (MinRange.HasValue is false) return false;
+
+        var minRangeDays = (int)MinRange.Value.TotalDays;
+
+        return minRangeDays > 0 && (endDate - startDate).TotalDays < minRangeDays;
+    }
+
+    // A typed range has to honor every restriction the calendar itself enforces (the Min/Max bounds,
+    // the blocked days as its ends, MinRange, MaxRange and ExcludeDisabledDates), so no range that
+    // could not be picked from the day grid can slip in through the text input.
+    private bool IsRangeWithinRestrictions(BitDateRangePickerValue range)
+    {
+        DateTime? startDate = range.StartDate.HasValue ? GetDateTime(range.StartDate.Value).Date : null;
+        DateTime? endDate = range.EndDate.HasValue ? GetDateTime(range.EndDate.Value).Date : null;
+
+        if (startDate.HasValue && IsDayExcluded(startDate.Value)) return false;
+
+        if (endDate.HasValue && IsDayExcluded(endDate.Value)) return false;
+
+        if (startDate.HasValue is false || endDate.HasValue is false) return true;
+
+        if (IsShorterThanMinRange(startDate.Value, endDate.Value)) return false;
+
+        if (MaxRange.HasValue && range.EndDate!.Value - range.StartDate!.Value > MaxRange.Value) return false;
+
+        if (ExcludeDisabledDates && RangeCoversBlockedDay(startDate.Value, endDate.Value)) return false;
+
+        return true;
+    }
+
     private bool IsDayDisabled(DateTime date)
     {
         if (IsWeekDayOutOfMinAndMaxDate(date)) return true;
@@ -3057,19 +3200,6 @@ private int ChangeMinute(int minute, bool isNext)
         return minute;
     }
 
-    private async Task CloseCallout()
-    {
-        if (IsEnabled is false) return;
-
-        _hoveredDate = null;
-
-        if (await AssignIsOpen(false) is false) return;
-
-        await ToggleCallout();
-
-        StateHasChanged();
-    }
-
     private bool ShowDayPicker()
     {
         if (IsMonthPickerVisible is false)
@@ -3143,10 +3273,11 @@ private bool CanChangeTime(int? startTimeHour = null, int? startTimeMinute = nul
         {
             var startDate = ChangeTimeInDateTimeOffset(CurrentValue!.StartDate!.Value, startTimeHour, startTimeMinute);
             var endDate = ChangeTimeInDateTimeOffset(CurrentValue!.EndDate!.Value, endTimeHour, endTimeMinute);
-            var maxDate = new DateTimeOffset(GetMaxEndDate(), CurrentValue!.StartDate.Value.Offset);
-            var minDate = new DateTimeOffset(GetMinEndDate(), CurrentValue!.StartDate.Value.Offset);
 
-            return startDate >= minDate && endDate <= maxDate;
+            // The span the proposed times would produce is what MaxRange bounds, so it is judged
+            // directly instead of against bounds anchored on the current start date, which a series
+            // of small changes could walk past.
+            return startDate <= endDate && endDate - startDate <= MaxRange.Value;
         }
 
         // While the dates of the range are not picked yet, only a sub-day MaxRange can be violated
@@ -3155,7 +3286,8 @@ private bool CanChangeTime(int? startTimeHour = null, int? startTimeMinute = nul
 
         var maxRangeTotalMinutes = new TimeSpan(MaxRange.Value.Hours, MaxRange.Value.Minutes, MaxRange.Value.Seconds).TotalMinutes;
 
-        return maxRangeTotalMinutes > Math.Abs((startTime - endTime).TotalMinutes);
+        // A span of exactly MaxRange is still within it, matching the boundary the spinner buttons enforce.
+        return maxRangeTotalMinutes >= Math.Abs((startTime - endTime).TotalMinutes);
     }
 
     private DateTimeOffset ChangeTimeInDateTimeOffset(DateTimeOffset dateTime, int? hour, int? minute)
@@ -3263,10 +3395,10 @@ private bool IsButtonDisabled(int startTimeHour, int startTimeMinute, int endTim
                 return true;
             }
 
-            var maxDate = new DateTimeOffset(GetMaxEndDate(), CurrentValue!.StartDate.Value.Offset);
-            var minDate = new DateTimeOffset(GetMinEndDate(), CurrentValue!.StartDate.Value.Offset);
-
-            return startDate < minDate || endDate > maxDate;
+            // The span the proposed times would produce is what MaxRange bounds, so it is judged
+            // directly instead of against bounds anchored on the current start date, which a series
+            // of small changes could walk past.
+            return endDate - startDate > MaxRange.Value;
         }
 
         // While the dates of the range are not picked yet, only a sub-day MaxRange can be violated
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
index 7aa81162856..04ee92fbe01 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor
@@ -72,7 +72,10 @@
             "Last 7 days" correct however long the page has been open. The applied preset stays highlighted until the range
             is changed by any other means, <b>OnPresetSelect</b> reports which one was clicked, and when <b>AutoClose</b> is on
             (and the picker is not <b>Standalone</b>), selecting one closes the callout just like picking the second date
-            does. A preset can also be disabled, titled and styled individually.
+            does. A preset can also be disabled, titled and styled individually. A preset whose range violates the
+            calendar's restrictions (<b>MinDate</b>, <b>MaxDate</b>, <b>MinRange</b>, the disabled days or
+            <b>ExcludeDisabledDates</b>) is rejected when clicked, since a shifted variant of the advertised range would
+            not be the range its button promised.
         </div>
         <div class="example-content">
             <BitDateRangePicker Label="Common ranges" Presets="presets" @bind-Value="presetsValue"
@@ -190,6 +193,8 @@
             button and only the last one the "next month" button, so navigating moves the whole strip. The days
             of the adjacent months are dropped from the grids, since they would otherwise show up twice, and the
             calendar quietly falls back to a single month whenever the viewport is too narrow to fit them all.
+            By default each navigation click moves the strip by a single month; <b>PagedNavigation</b> makes it
+            move by all of the rendered months at once, so consecutive pages never overlap.
         </div>
         <div class="example-content">
             <BitDateRangePicker Label="Two months" MonthCount="2" @bind-Value="monthCountValue" />
@@ -197,6 +202,8 @@
             <BitDateRangePicker Label="Two months with presets" MonthCount="2" Presets="presets" />
             <br /><br />
             <BitDateRangePicker Label="Three months with week numbers" MonthCount="3" ShowWeekNumbers />
+            <br /><br />
+            <BitDateRangePicker Label="Two months with paged navigation" MonthCount="2" PagedNavigation />
         </div>
         <br />
         <div>
@@ -250,7 +257,10 @@
             With <b>AllowTextInput</b> the input becomes editable and the typed text is parsed back into a range. The text
             must follow the <b>ValueFormat</b> template with both dates written in the <b>DateFormat</b> pattern; an
             unparsable value raises the validation error of <b>InvalidErrorMessage</b>. Leaving the end date as <code>---</code>
-            (or empty) keeps the range open-ended, and a reversed pair is swapped automatically.
+            (or empty) keeps the range open-ended, and a reversed pair is swapped automatically. A typed range is also
+            validated against every restriction the calendar enforces (<b>MinDate</b>, <b>MaxDate</b>, <b>MinRange</b>,
+            <b>MaxRange</b>, the disabled days and <b>ExcludeDisabledDates</b>), so no range that could not be picked
+            from the day grid can slip in through the text input.
         </div>
         <div class="example-content">
             <BitDateRangePicker Label="Text input allowed"
@@ -265,6 +275,14 @@
                                 ValueFormat="{0} - {1}"
                                 InvalidErrorMessage="The entered date range is not valid."
                                 Placeholder="dd/MM/yyyy - dd/MM/yyyy" />
+            <br /><br />
+            <div>A typed range longer than the 7-day MaxRange is rejected as invalid:</div>
+            <BitDateRangePicker Label="Text input with MaxRange: 7 days"
+                                AllowTextInput
+                                MaxRange="TimeSpan.FromDays(7)"
+                                DateFormat="dd/MM/yyyy"
+                                ValueFormat="{0} - {1}"
+                                Placeholder="dd/MM/yyyy - dd/MM/yyyy" />
         </div>
     </DemoExample>
 
@@ -370,8 +388,9 @@
     <DemoExample Title="ReadOnly" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
         <div class="example-desc">
             <b>ReadOnly</b> keeps the component fully rendered and navigable — the callout still opens and the months can
-            still be browsed — but blocks every change: days cannot be selected, the time spinners are inert and the typed
-            text is ignored. Unlike <b>IsEnabled="false"</b>, the value is still submitted with the form.
+            still be browsed — but blocks every change: days cannot be selected, the time spinners are inert, the typed
+            text is ignored and the clear button is not rendered. Unlike <b>IsEnabled="false"</b>, the value is still
+            submitted with the form.
         </div>
         <div class="example-content">
             <BitDateRangePicker Label="Basic" ReadOnly @bind-Value="readOnlyDateRange" />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs
index 5848a04aad2..964304db47e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs
@@ -9,7 +9,7 @@ public partial class BitDateRangePickerDemo
             Name = "AllowTextInput",
             Type = "bool",
             DefaultValue = "false",
-            Description = "Whether or not the DateRangePicker allows string date inputs.",
+            Description = "Whether or not the DateRangePicker allows string date inputs. A typed range is validated against every restriction the calendar enforces (MinDate, MaxDate, MinRange, MaxRange, the disabled days and ExcludeDisabledDates), so an out-of-bounds range is rejected as an invalid value.",
         },
         new()
         {
@@ -99,9 +99,9 @@ public partial class BitDateRangePickerDemo
         new()
         {
             Name = "Culture",
-            Type = "CultureInfo",
-            DefaultValue = "CultureInfo.CurrentUICulture",
-            Description = "CultureInfo for the DateRangePicker."
+            Type = "CultureInfo?",
+            DefaultValue = "null",
+            Description = "CultureInfo for the DateRangePicker. If not set, CultureInfo.CurrentUICulture is used."
         },
         new()
         {
@@ -148,6 +148,13 @@ public partial class BitDateRangePickerDemo
             Description = "The name of the end time-picker's decrease-hour button icon from the built-in Fluent UI icon set.",
         },
         new()
+        {
+            Name = "EndTimeDecreaseHourTitle",
+            Type = "string",
+            DefaultValue = "Decrease end hour",
+            Description = "The title and the aria-label of the end time-picker's decrease-hour button.",
+        },
+        new()
         {
             Name = "EndTimeDecreaseMinuteIcon",
             Type = "BitIconInfo?",
@@ -164,6 +171,20 @@ public partial class BitDateRangePickerDemo
             Description = "The name of the end time-picker's decrease-minute button icon from the built-in Fluent UI icon set.",
         },
         new()
+        {
+            Name = "EndTimeDecreaseMinuteTitle",
+            Type = "string",
+            DefaultValue = "Decrease end minute",
+            Description = "The title and the aria-label of the end time-picker's decrease-minute button.",
+        },
+        new()
+        {
+            Name = "EndTimeHourInputAriaLabel",
+            Type = "string",
+            DefaultValue = "End hour",
+            Description = "The aria-label of the end time-picker's hour input.",
+        },
+        new()
         {
             Name = "EndTimeIncreaseHourIcon",
             Type = "BitIconInfo?",
@@ -180,6 +201,13 @@ public partial class BitDateRangePickerDemo
             Description = "The name of the end time-picker's increase-hour button icon from the built-in Fluent UI icon set.",
         },
         new()
+        {
+            Name = "EndTimeIncreaseHourTitle",
+            Type = "string",
+            DefaultValue = "Increase end hour",
+            Description = "The title and the aria-label of the end time-picker's increase-hour button.",
+        },
+        new()
         {
             Name = "EndTimeIncreaseMinuteIcon",
             Type = "BitIconInfo?",
@@ -196,6 +224,20 @@ public partial class BitDateRangePickerDemo
             Description = "The name of the end time-picker's increase-minute button icon from the built-in Fluent UI icon set.",
         },
         new()
+        {
+            Name = "EndTimeIncreaseMinuteTitle",
+            Type = "string",
+            DefaultValue = "Increase end minute",
+            Description = "The title and the aria-label of the end time-picker's increase-minute button.",
+        },
+        new()
+        {
+            Name = "EndTimeMinuteInputAriaLabel",
+            Type = "string",
+            DefaultValue = "End minute",
+            Description = "The aria-label of the end time-picker's minute input.",
+        },
+        new()
         {
             Name = "ExcludeDisabledDates",
             Type = "bool",
@@ -570,6 +612,13 @@ public partial class BitDateRangePickerDemo
             LinkType = LinkType.Link
         },
         new()
+        {
+            Name = "PagedNavigation",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Whether the previous and next navigation buttons move the calendar by all of its rendered months instead of one, so consecutive pages of a multi-month calendar never overlap. It has no effect when MonthCount renders a single month.",
+        },
+        new()
         {
             Name = "Placeholder",
             Type = "string",
@@ -764,6 +813,13 @@ public partial class BitDateRangePickerDemo
             Description = "The name of the start time-picker's decrease-hour button icon from the built-in Fluent UI icon set.",
         },
         new()
+        {
+            Name = "StartTimeDecreaseHourTitle",
+            Type = "string",
+            DefaultValue = "Decrease start hour",
+            Description = "The title and the aria-label of the start time-picker's decrease-hour button.",
+        },
+        new()
         {
             Name = "StartTimeDecreaseMinuteIcon",
             Type = "BitIconInfo?",
@@ -780,6 +836,20 @@ public partial class BitDateRangePickerDemo
             Description = "The name of the start time-picker's decrease-minute button icon from the built-in Fluent UI icon set.",
         },
         new()
+        {
+            Name = "StartTimeDecreaseMinuteTitle",
+            Type = "string",
+            DefaultValue = "Decrease start minute",
+            Description = "The title and the aria-label of the start time-picker's decrease-minute button.",
+        },
+        new()
+        {
+            Name = "StartTimeHourInputAriaLabel",
+            Type = "string",
+            DefaultValue = "Start hour",
+            Description = "The aria-label of the start time-picker's hour input.",
+        },
+        new()
         {
             Name = "StartTimeIncreaseHourIcon",
             Type = "BitIconInfo?",
@@ -796,6 +866,13 @@ public partial class BitDateRangePickerDemo
             Description = "The name of the start time-picker's increase-hour button icon from the built-in Fluent UI icon set.",
         },
         new()
+        {
+            Name = "StartTimeIncreaseHourTitle",
+            Type = "string",
+            DefaultValue = "Increase start hour",
+            Description = "The title and the aria-label of the start time-picker's increase-hour button.",
+        },
+        new()
         {
             Name = "StartTimeIncreaseMinuteIcon",
             Type = "BitIconInfo?",
@@ -812,6 +889,20 @@ public partial class BitDateRangePickerDemo
             Description = "The name of the start time-picker's increase-minute button icon from the built-in Fluent UI icon set.",
         },
         new()
+        {
+            Name = "StartTimeIncreaseMinuteTitle",
+            Type = "string",
+            DefaultValue = "Increase start minute",
+            Description = "The title and the aria-label of the start time-picker's increase-minute button.",
+        },
+        new()
+        {
+            Name = "StartTimeMinuteInputAriaLabel",
+            Type = "string",
+            DefaultValue = "Start minute",
+            Description = "The aria-label of the start time-picker's minute input.",
+        },
+        new()
         {
             Name = "Styles",
             Type = "BitDateRangePickerClassStyles?",
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs
index d7e1e3dde48..82abcd89eed 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.samples.cs
@@ -142,6 +142,8 @@ public partial class BitDateRangePickerDemo
 
 <BitDateRangePicker Label=""Three months with week numbers"" MonthCount=""3"" ShowWeekNumbers />
 
+<BitDateRangePicker Label=""Two months with paged navigation"" MonthCount=""2"" PagedNavigation />
+
 <BitDateRangePicker Label=""Two months in standalone mode"" MonthCount=""2"" Standalone />";
     private readonly string example7CsharpCode = @"
 private BitDateRangePickerValue? monthCountValue;";
@@ -173,6 +175,13 @@ public partial class BitDateRangePickerDemo
                     DateFormat=""dd/MM/yyyy""
                     ValueFormat=""{0} - {1}""
                     InvalidErrorMessage=""The entered date range is not valid.""
+                    Placeholder=""dd/MM/yyyy - dd/MM/yyyy"" />
+
+<BitDateRangePicker Label=""Text input with MaxRange: 7 days""
+                    AllowTextInput
+                    MaxRange=""TimeSpan.FromDays(7)""
+                    DateFormat=""dd/MM/yyyy""
+                    ValueFormat=""{0} - {1}""
                     Placeholder=""dd/MM/yyyy - dd/MM/yyyy"" />";
 
     private readonly string example11RazorCode = @"
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs
index 93245a7be08..0fc07b68f15 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/DateRangePicker/BitDateRangePickerTests.cs
@@ -2728,6 +2728,504 @@ public void BitDateRangePickerDayPickerNavWrapperClassTest()
         Assert.AreEqual("background-color: red;", navWrapper.GetAttribute("style"));
     }
 
+    [TestMethod]
+    public void BitDateRangePickerTypedRangeShouldRespectMaxRange()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.AllowTextInput, true);
+            parameters.Add(p => p.DateFormat, "yyyy-MM-dd");
+            parameters.Add(p => p.ValueFormat, "{0} - {1}");
+            parameters.Add(p => p.MaxRange, TimeSpan.FromDays(7));
+        });
+
+        component.Find(".bit-dtrp-inp").Change("2024-03-01 - 2024-03-10");
+
+        Assert.IsNull(component.Instance.Value);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerTypedRangeAtExactlyMaxRangeShouldBeAccepted()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.AllowTextInput, true);
+            parameters.Add(p => p.DateFormat, "yyyy-MM-dd");
+            parameters.Add(p => p.ValueFormat, "{0} - {1}");
+            parameters.Add(p => p.MaxRange, TimeSpan.FromDays(7));
+        });
+
+        component.Find(".bit-dtrp-inp").Change("2024-03-01 - 2024-03-08");
+
+        Assert.IsNotNull(component.Instance.Value);
+        Assert.AreEqual(new DateTime(2024, 3, 8), component.Instance.Value!.EndDate!.Value.DateTime);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerTypedRangeShouldRespectMinRange()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.AllowTextInput, true);
+            parameters.Add(p => p.DateFormat, "yyyy-MM-dd");
+            parameters.Add(p => p.ValueFormat, "{0} - {1}");
+            parameters.Add(p => p.MinRange, TimeSpan.FromDays(3));
+        });
+
+        component.Find(".bit-dtrp-inp").Change("2024-03-01 - 2024-03-02");
+
+        Assert.IsNull(component.Instance.Value);
+
+        // A range of exactly MinRange is the shortest allowed one, matching the day grid.
+        component.Find(".bit-dtrp-inp").Change("2024-03-01 - 2024-03-04");
+
+        Assert.IsNotNull(component.Instance.Value);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerTypedRangeShouldRespectMinAndMaxDate()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.AllowTextInput, true);
+            parameters.Add(p => p.DateFormat, "yyyy-MM-dd");
+            parameters.Add(p => p.ValueFormat, "{0} - {1}");
+            parameters.Add(p => p.MinDate, FixedDate(2024, 3, 5));
+            parameters.Add(p => p.MaxDate, FixedDate(2024, 3, 20));
+        });
+
+        component.Find(".bit-dtrp-inp").Change("2024-03-01 - 2024-03-10");
+
+        Assert.IsNull(component.Instance.Value);
+
+        component.Find(".bit-dtrp-inp").Change("2024-03-10 - 2024-03-25");
+
+        Assert.IsNull(component.Instance.Value);
+
+        component.Find(".bit-dtrp-inp").Change("2024-03-10 - 2024-03-15");
+
+        Assert.IsNotNull(component.Instance.Value);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerTypedRangeShouldRejectABlockedEndpoint()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.AllowTextInput, true);
+            parameters.Add(p => p.DateFormat, "yyyy-MM-dd");
+            parameters.Add(p => p.ValueFormat, "{0} - {1}");
+            parameters.Add(p => p.DisabledDates, new[] { FixedDate(2024, 3, 5) });
+        });
+
+        component.Find(".bit-dtrp-inp").Change("2024-03-05 - 2024-03-10");
+
+        Assert.IsNull(component.Instance.Value);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerTypedRangeShouldSpanDisabledDaysWithoutExcludeDisabledDates()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.AllowTextInput, true);
+            parameters.Add(p => p.DateFormat, "yyyy-MM-dd");
+            parameters.Add(p => p.ValueFormat, "{0} - {1}");
+            parameters.Add(p => p.DisabledDates, new[] { FixedDate(2024, 3, 3) });
+        });
+
+        // By default a range simply spans over the disabled days between its two ends.
+        component.Find(".bit-dtrp-inp").Change("2024-03-01 - 2024-03-05");
+
+        Assert.IsNotNull(component.Instance.Value);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerTypedRangeShouldRespectExcludeDisabledDates()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.AllowTextInput, true);
+            parameters.Add(p => p.DateFormat, "yyyy-MM-dd");
+            parameters.Add(p => p.ValueFormat, "{0} - {1}");
+            parameters.Add(p => p.ExcludeDisabledDates, true);
+            parameters.Add(p => p.DisabledDates, new[] { FixedDate(2024, 3, 3) });
+        });
+
+        component.Find(".bit-dtrp-inp").Change("2024-03-01 - 2024-03-05");
+
+        Assert.IsNull(component.Instance.Value);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerPresetShorterThanMinRangeShouldNotBeApplied()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.MinRange, TimeSpan.FromDays(5));
+            parameters.Add(p => p.Presets, new BitDateRangePickerPreset[]
+            {
+                new() { Text = "Too short", Value = new() { StartDate = FixedDate(2024, 3, 1), EndDate = FixedDate(2024, 3, 3) } },
+            });
+        });
+
+        component.Find(".bit-dtrp-prb").Click();
+
+        Assert.IsNull(component.Instance.Value);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerPresetWithABlockedEndShouldNotBeApplied()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.DisabledDates, new[] { FixedDate(2024, 3, 5) });
+            parameters.Add(p => p.Presets, new BitDateRangePickerPreset[]
+            {
+                new() { Text = "Blocked end", Value = new() { StartDate = FixedDate(2024, 3, 1), EndDate = FixedDate(2024, 3, 5) } },
+            });
+        });
+
+        component.Find(".bit-dtrp-prb").Click();
+
+        Assert.IsNull(component.Instance.Value);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerPresetCoveringADisabledDayShouldRespectExcludeDisabledDates()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ExcludeDisabledDates, true);
+            parameters.Add(p => p.DisabledDates, new[] { FixedDate(2024, 3, 3) });
+            parameters.Add(p => p.Presets, new BitDateRangePickerPreset[]
+            {
+                new() { Text = "Covers a blocked day", Value = new() { StartDate = FixedDate(2024, 3, 1), EndDate = FixedDate(2024, 3, 5) } },
+            });
+        });
+
+        component.Find(".bit-dtrp-prb").Click();
+
+        Assert.IsNull(component.Instance.Value);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerPresetClampedByMaxRangeOntoABlockedDayShouldNotBeApplied()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.MaxRange, TimeSpan.FromDays(5));
+            // The advertised end (3/10) is fine, but the MaxRange clamp moves the applied end
+            // to 3/6, which is a blocked day — so the preset must be rejected.
+            parameters.Add(p => p.DisabledDates, new[] { FixedDate(2024, 3, 6) });
+            parameters.Add(p => p.Presets, new BitDateRangePickerPreset[]
+            {
+                new() { Text = "Clamped onto a blocked day", Value = new() { StartDate = FixedDate(2024, 3, 1), EndDate = FixedDate(2024, 3, 10) } },
+            });
+        });
+
+        component.Find(".bit-dtrp-prb").Click();
+
+        Assert.IsNull(component.Instance.Value);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerPagedNavigationShouldAdvanceByTheRenderedMonths()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.MonthCount, 2);
+            parameters.Add(p => p.PagedNavigation, true);
+            parameters.Add(p => p.Value, new BitDateRangePickerValue { StartDate = FixedDate(2024, 3, 10) });
+        });
+
+        component.Find(".bit-dtrp-dwp [title='Go to next month']").Click();
+
+        var titles = component.FindAll(".bit-dtrp-dwp .bit-dtrp-pkt, .bit-dtrp-dwp .bit-dtrp-ptb");
+
+        Assert.AreEqual(MonthTitle(2024, 5), titles[0].TextContent.Trim());
+        Assert.AreEqual(MonthTitle(2024, 6), titles[1].TextContent.Trim());
+
+        component.Find(".bit-dtrp-dwp [title='Go to previous month']").Click();
+
+        titles = component.FindAll(".bit-dtrp-dwp .bit-dtrp-pkt, .bit-dtrp-dwp .bit-dtrp-ptb");
+
+        Assert.AreEqual(MonthTitle(2024, 3), titles[0].TextContent.Trim());
+        Assert.AreEqual(MonthTitle(2024, 4), titles[1].TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerPagedNavigationShouldNotStepPastMaxDate()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.MonthCount, 2);
+            parameters.Add(p => p.PagedNavigation, true);
+            parameters.Add(p => p.MaxDate, FixedDate(2024, 4, 15));
+            parameters.Add(p => p.Value, new BitDateRangePickerValue { StartDate = FixedDate(2024, 3, 10) });
+        });
+
+        // The page would reach May, but the single-month navigation stops with April as the first
+        // month, so the paged one must stop there too.
+        component.Find(".bit-dtrp-dwp [title='Go to next month']").Click();
+
+        var titles = component.FindAll(".bit-dtrp-dwp .bit-dtrp-pkt, .bit-dtrp-dwp .bit-dtrp-ptb");
+
+        Assert.AreEqual(MonthTitle(2024, 4), titles[0].TextContent.Trim());
+    }
+
+    [TestMethod]
+    public async Task BitDateRangePickerCloseCalloutShouldCloseTheCallout()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var isOpen = true;
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v);
+        });
+
+        await component.InvokeAsync(() => component.Instance.CloseCallout());
+
+        Assert.IsFalse(isOpen);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerTypedTimeAtExactlyMaxRangeShouldBeAccepted()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.MaxRange, TimeSpan.FromHours(2));
+        });
+
+        // With no value picked the times start at 00:00 and (clamped) 02:00. Typing the end hour
+        // back to the exact MaxRange boundary is as valid as reaching it with the spinner buttons.
+        component.FindAll(".bit-dtrp-eic .bit-dtrp-tin")[0].Input("1");
+        component.FindAll(".bit-dtrp-eic .bit-dtrp-tin")[0].Input("2");
+
+        Assert.AreEqual("2", component.FindAll(".bit-dtrp-eic .bit-dtrp-tin")[0].GetAttribute("value"));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerClearButtonShouldShowForAnOpenStartRange()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.ShowClearButton, true);
+            parameters.Add(p => p.Value, new BitDateRangePickerValue { EndDate = FixedDate(2024, 3, 5) });
+        });
+
+        // A range holding only an end date is still a value, so it must be clearable too.
+        Assert.AreEqual(1, component.FindAll(".bit-dtrp-clr").Count);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerTimeSpinnerButtonsShouldBeLabelled()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ShowTimePicker, true);
+        });
+
+        foreach (var button in component.FindAll(".bit-dtrp-tbt"))
+        {
+            Assert.IsFalse(string.IsNullOrEmpty(button.GetAttribute("aria-label")));
+            Assert.IsFalse(string.IsNullOrEmpty(button.GetAttribute("title")));
+        }
+
+        Assert.AreEqual(1, component.FindAll("[aria-label='Increase start hour']").Count);
+        Assert.AreEqual(1, component.FindAll("[aria-label='Decrease end minute']").Count);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerTimeInputsShouldBeLabelled()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ShowTimePicker, true);
+        });
+
+        Assert.AreEqual(1, component.FindAll(".bit-dtrp-tin[aria-label='Start hour']").Count);
+        Assert.AreEqual(1, component.FindAll(".bit-dtrp-tin[aria-label='Start minute']").Count);
+        Assert.AreEqual(1, component.FindAll(".bit-dtrp-tin[aria-label='End hour']").Count);
+        Assert.AreEqual(1, component.FindAll(".bit-dtrp-tin[aria-label='End minute']").Count);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerTimeSpinnerButtonTitlesShouldBeCustomizable()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.StartTimeIncreaseHourTitle, "More start hours");
+            parameters.Add(p => p.EndTimeDecreaseMinuteTitle, "Fewer end minutes");
+        });
+
+        Assert.AreEqual(1, component.FindAll("[aria-label='More start hours']").Count);
+        Assert.AreEqual(1, component.FindAll("[aria-label='Fewer end minutes']").Count);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerStartTimeShouldNotWalkPastMaxRange()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.MaxRange, TimeSpan.FromDays(2));
+            // Exactly 48 hours, sitting right on the MaxRange boundary.
+            parameters.Add(p => p.Value, new BitDateRangePickerValue
+            {
+                StartDate = new DateTimeOffset(2024, 6, 1, 10, 0, 0, TimeSpan.Zero),
+                EndDate = new DateTimeOffset(2024, 6, 3, 10, 0, 0, TimeSpan.Zero)
+            });
+        });
+
+        // Moving the start one hour back would stretch the range to 49 hours.
+        var startHourButtons = component.FindAll(".bit-dtrp-sic .bit-dtrp-tpr")[0].QuerySelectorAll(".bit-dtrp-tbt");
+        Assert.IsTrue(startHourButtons[1].HasAttribute("disabled"));
+
+        // Typing the same violation is rejected too.
+        component.FindAll(".bit-dtrp-sic .bit-dtrp-tin")[0].Input("9");
+
+        Assert.AreEqual(new DateTimeOffset(2024, 6, 1, 10, 0, 0, TimeSpan.Zero), component.Instance.Value!.StartDate);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerEndOnlyValueInThePastShouldBePreserved()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.Value, new BitDateRangePickerValue { EndDate = FixedDate(2020, 1, 5) });
+        });
+
+        // An open-ended range holding only a (past) end date has no start to precede,
+        // so it must not be dropped.
+        Assert.IsNotNull(component.Instance.Value);
+        Assert.IsNotNull(component.Instance.Value!.EndDate);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerPresetShouldRespectTheTimeOfMinDateLikeTheDayGrid()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            // MinDate carries midday as its time-of-day, which disables its own day in the grid.
+            parameters.Add(p => p.MinDate, FixedDate(2024, 3, 5));
+            parameters.Add(p => p.Presets, new BitDateRangePickerPreset[]
+            {
+                new() { Text = "Starts on the MinDate day", Value = new() { StartDate = FixedDate(2024, 3, 5), EndDate = FixedDate(2024, 3, 8) } },
+            });
+        });
+
+        component.Find(".bit-dtrp-prb").Click();
+
+        Assert.IsNull(component.Instance.Value);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerStartingValueTimesWithinASubDayMaxRangeShouldBePreserved()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var start = new DateTime(2024, 3, 1, 0, 0, 0);
+        var end = new DateTime(2024, 3, 1, 1, 45, 0);
+
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+            parameters.Add(p => p.ShowTimePicker, true);
+            parameters.Add(p => p.MaxRange, TimeSpan.FromHours(2));
+            parameters.Add(p => p.StartingValue, new BitDateRangePickerValue
+            {
+                StartDate = new DateTimeOffset(start, TimeZoneInfo.Local.GetUtcOffset(start)),
+                EndDate = new DateTimeOffset(end, TimeZoneInfo.Local.GetUtcOffset(end))
+            });
+        });
+
+        // 00:00 - 01:45 fits inside the two-hour MaxRange, so the end time must not be clamped.
+        var endInputs = component.FindAll(".bit-dtrp-eic .bit-dtrp-tin");
+
+        Assert.AreEqual("1", endInputs[0].GetAttribute("value"));
+        Assert.AreEqual("45", endInputs[1].GetAttribute("value"));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerReadOnlyShouldHideTheClearButton()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.ReadOnly, true);
+            parameters.Add(p => p.ShowClearButton, true);
+            parameters.Add(p => p.Value, new BitDateRangePickerValue { StartDate = FixedDate(2024, 3, 1), EndDate = FixedDate(2024, 3, 5) });
+        });
+
+        // The clear button would silently do nothing in ReadOnly, so it is not rendered at all.
+        Assert.AreEqual(0, component.FindAll(".bit-dtrp-clr").Count);
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerStandaloneContainerShouldExposeItsAriaLabel()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.Standalone, true);
+        });
+
+        var container = component.Find(".bit-dtrp-cac");
+
+        // An aria-label is only exposed on an element carrying a role.
+        Assert.AreEqual("group", container.GetAttribute("role"));
+        Assert.AreEqual("Calendar", container.GetAttribute("aria-label"));
+    }
+
+    [TestMethod]
+    public void BitDateRangePickerMonthNavigationButtonsShouldBeLabelled()
+    {
+        Context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var component = RenderComponent<BitDateRangePicker>(parameters =>
+        {
+            parameters.Add(p => p.IsOpen, true);
+        });
+
+        Assert.AreEqual(1, component.FindAll(".bit-dtrp-dwp [aria-label='Go to previous month']").Count);
+        Assert.AreEqual(1, component.FindAll(".bit-dtrp-dwp [aria-label='Go to next month']").Count);
+    }
+
     // Midday keeps a date-only assertion safe from any time zone shifting the instant across midnight.
     private static DateTimeOffset FixedDate(int year, int month, int day)
     {