diff --git a/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/DateRangePicker/display-buttons-auto-apply.txt b/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/DateRangePicker/display-buttons-auto-apply.txt new file mode 100644 index 00000000..b0af8bdc --- /dev/null +++ b/demos/BlazorBlueprint.Demo.Shared/CodeExamples/Components/DateRangePicker/display-buttons-auto-apply.txt @@ -0,0 +1 @@ + diff --git a/demos/BlazorBlueprint.Demo.Shared/Pages/Components/DateRangePickerDemo.razor b/demos/BlazorBlueprint.Demo.Shared/Pages/Components/DateRangePickerDemo.razor index 20901ff8..66055ea2 100644 --- a/demos/BlazorBlueprint.Demo.Shared/Pages/Components/DateRangePickerDemo.razor +++ b/demos/BlazorBlueprint.Demo.Shared/Pages/Components/DateRangePickerDemo.razor @@ -213,6 +213,25 @@ + +
+
+

Buttons reset and apply hidden and auto apply

+

+ The user doesn't have to click on Apply to validate the selection. +

+
+ +

+ @if (_autoApply != null) + { + @($"Selected: {_autoApply.Start} - {_autoApply.End}") + } +

+ +
+ +
@@ -439,4 +458,7 @@ return new DateRange(quarterStart, quarterStart.AddMonths(3).AddDays(-1)); }), }; + + + private DateRange? _autoApply; } diff --git a/src/BlazorBlueprint.Components/Components/DateRangePicker/BbDateRangePicker.razor b/src/BlazorBlueprint.Components/Components/DateRangePicker/BbDateRangePicker.razor index dba122f2..dbc75726 100644 --- a/src/BlazorBlueprint.Components/Components/DateRangePicker/BbDateRangePicker.razor +++ b/src/BlazorBlueprint.Components/Components/DateRangePicker/BbDateRangePicker.razor @@ -4,9 +4,9 @@ - + Class="@ButtonCssClass" + Disabled="@Disabled"> + @if (Value != null) { @FormatRange(Value) @@ -38,7 +38,8 @@
@* Desktop: button sidebar *@ @code { + private RenderFragment RenderMonthGridInline(DateTime monthDate) => __builder => { var weeks = monthDate == _displayMonth1 ? GetWeeksInMonth1() : GetWeeksInMonth2(); - - @foreach (var dayName in DayNames) - { - - } - + + @foreach (var dayName in DayNames) + { + + } + - @foreach (var week in weeks) - { - - @foreach (var day in week) + @foreach (var week in weeks) + { + + @foreach (var day in week) + { + @if (day.HasValue) { - @if (day.HasValue) - { - var dateValue = day.Value; - var isDisabled = IsDateDisabled(dateValue) || dateValue.Month != monthDate.Month; - var isInRange = !isDisabled && IsInRange(dateValue); - var isRangeStart = !isDisabled && IsRangeStart(dateValue); - var isRangeEnd = !isDisabled && IsRangeEnd(dateValue); - var isToday = dateValue.Date == DateTime.Today; + var dateValue = day.Value; + var isDisabled = IsDateDisabled(dateValue) || dateValue.Month != monthDate.Month; + var isInRange = !isDisabled && IsInRange(dateValue); + var isRangeStart = !isDisabled && IsRangeStart(dateValue); + var isRangeEnd = !isDisabled && IsRangeEnd(dateValue); + var isToday = dateValue.Date == DateTime.Today; - - } - else - { - - } + } - - } + else + { + + } + } + + }
@dayName
@dayName
- - + +
}; - private void HandleDateClick(DateTime date) + private async Task HandleDateClick(DateTime date) { - SelectDate(date); + await SelectDate(date); } + } diff --git a/src/BlazorBlueprint.Components/Components/DateRangePicker/BbDateRangePicker.razor.cs b/src/BlazorBlueprint.Components/Components/DateRangePicker/BbDateRangePicker.razor.cs index b0c960c3..2e52f44f 100644 --- a/src/BlazorBlueprint.Components/Components/DateRangePicker/BbDateRangePicker.razor.cs +++ b/src/BlazorBlueprint.Components/Components/DateRangePicker/BbDateRangePicker.razor.cs @@ -161,6 +161,11 @@ public partial class BbDateRangePicker : ComponentBase [Parameter] public string? Class { get; set; } + + [Parameter] public bool DisplayButtons { get; set; } = true; + + [Parameter] public bool AutoApply { get; set; } = false; + private string[] DayNames => _cachedDayNames ??= BuildDayNames(); private string[] BuildDayNames() @@ -173,6 +178,7 @@ private string[] BuildDayNames() { result[i] = CustomDayNames[(start + i) % 7]; } + return result; } @@ -183,6 +189,7 @@ private string[] BuildDayNames() { cultureDays[i] = cultureNames[(startIdx + i) % 7]; } + return cultureDays; } @@ -193,10 +200,15 @@ private string[] BuildDayNames() private const string CellRangeStart = "h-9 w-9 flex-1 text-center text-sm p-0 relative rounded-l-md bg-accent"; private const string CellRangeEnd = "h-9 w-9 flex-1 text-center text-sm p-0 relative rounded-r-md bg-accent"; - private const string DayBase = "inline-flex h-9 w-full items-center justify-center rounded-md text-sm font-normal ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"; + private const string DayBase = + "inline-flex h-9 w-full items-center justify-center rounded-md text-sm font-normal ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"; + private const string DayDefault = DayBase + " hover:bg-accent hover:text-accent-foreground"; private const string DayDisabled = DayBase + " text-muted-foreground opacity-50"; - private const string DayRangeEndpoint = DayBase + " bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground"; + + private const string DayRangeEndpoint = + DayBase + " bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground"; + private const string DayInRange = DayBase + " bg-accent text-accent-foreground"; private const string DayToday = DayBase + " bg-accent text-accent-foreground"; @@ -211,6 +223,7 @@ protected override void OnInitialized() _selectionStart = Value.Start; _selectionEnd = Value.End; } + _previousValue = Value; } @@ -259,6 +272,7 @@ private void InitializeDisplayMonths() { _displayMonth1 = new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1); } + _displayMonth2 = _displayMonth1.AddMonths(1); } @@ -281,7 +295,7 @@ private void NextMonth() _cachedWeeksMonth2 = null; } - private void SelectDate(DateTime date) + private async Task SelectDate(DateTime date) { if (IsDateDisabled(date)) { @@ -314,6 +328,7 @@ private void SelectDate(DateTime date) _selectionEnd = null; return; } + if (MaxDays.HasValue && days > MaxDays.Value) { // Reset selection @@ -321,17 +336,27 @@ private void SelectDate(DateTime date) _selectionEnd = null; return; } + + + if (AutoApply) + { + await Apply(autoClose: false); + } } } - private async Task Apply() + private async Task Apply(bool autoClose = true) { if (_selectionStart.HasValue && _selectionEnd.HasValue) { var range = DateRange.Create(_selectionStart.Value, _selectionEnd.Value); Value = range; await ValueChanged.InvokeAsync(range); - _isOpen = false; + + if (autoClose) + { + _isOpen = false; + } } } @@ -388,11 +413,11 @@ private string ResolveLabel(DateRangeQuickPick quickPick) => DateRangePreset.Last7Days => new DateRange(today.AddDays(-6), today), DateRangePreset.Last30Days => new DateRange(today.AddDays(-29), today), DateRangePreset.ThisMonth => new DateRange(new DateTime(today.Year, today.Month, 1), - new DateTime(today.Year, today.Month, 1).AddMonths(1).AddDays(-1)), + new DateTime(today.Year, today.Month, 1).AddMonths(1).AddDays(-1)), DateRangePreset.LastMonth => new DateRange(new DateTime(today.Year, today.Month, 1).AddMonths(-1), - new DateTime(today.Year, today.Month, 1).AddDays(-1)), + new DateTime(today.Year, today.Month, 1).AddDays(-1)), DateRangePreset.ThisYear => new DateRange(new DateTime(today.Year, 1, 1), - new DateTime(today.Year, 12, 31)), + new DateTime(today.Year, 12, 31)), _ => null }; } @@ -448,8 +473,10 @@ private int CountSelectedDays(DateTime start, DateTime end) { count++; } + current = current.AddDays(1); } + return count; } @@ -529,8 +556,10 @@ private bool IsRangeEnd(DateTime date) { week.Add(null); } + currentDate = currentDate.AddDays(1); } + weeks.Add(week); if (currentDate.Month != monthDate.Month && weeks.Count >= 5) @@ -591,7 +620,8 @@ private static string GetCellClass(DateTime? day, bool isInRange, bool isRangeSt return CellDefault; } - private static string GetDayClass(DateTime date, bool isDisabled, bool isInRange, bool isRangeStart, bool isRangeEnd, bool isToday) + private static string GetDayClass(DateTime date, bool isDisabled, bool isInRange, bool isRangeStart, + bool isRangeEnd, bool isToday) { if (isDisabled) { @@ -641,17 +671,17 @@ protected override bool ShouldRender() } var changed = _lastIsOpen != _isOpen - || _lastDisplayMonth1 != _displayMonth1 - || _lastDisplayMonth2 != _displayMonth2 - || _lastSelectionStart != _selectionStart - || _lastSelectionEnd != _selectionEnd - || _lastValue != Value - || _lastMinDate != MinDate - || _lastMaxDate != MaxDate - || _lastShowTwoMonths != ShowTwoMonths - || _lastShowPresets != ShowPresets - || _lastDisabled != Disabled - || !ReferenceEquals(_lastPresets, Presets); + || _lastDisplayMonth1 != _displayMonth1 + || _lastDisplayMonth2 != _displayMonth2 + || _lastSelectionStart != _selectionStart + || _lastSelectionEnd != _selectionEnd + || _lastValue != Value + || _lastMinDate != MinDate + || _lastMaxDate != MaxDate + || _lastShowTwoMonths != ShowTwoMonths + || _lastShowPresets != ShowPresets + || _lastDisabled != Disabled + || !ReferenceEquals(_lastPresets, Presets); if (changed) {