From 279b4473bf4f5328aa96cd14abb46b61cb5b3d7b Mon Sep 17 00:00:00 2001 From: Mohammad Aminsafaei Date: Tue, 25 Mar 2025 14:01:59 +0330 Subject: [PATCH] Add TimeZone parameter to BitDateRangePicker (#10293) --- .../BitDateRangePicker.razor.cs | 21 ++++++-- .../BitDateRangePickerDemo.razor | 50 ++++++++++++++++--- .../BitDateRangePickerDemo.razor.cs | 10 ++++ .../BitDateRangePickerDemo.razor.samples.cs | 38 +++++++++++--- 4 files changed, 100 insertions(+), 19 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 19cb51c15e..954aef0f3b 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs @@ -26,6 +26,7 @@ public partial class BitDateRangePicker : BitInputBase private string _monthTitle = string.Empty; private bool _showTimePickerAsOverlayInternal; private bool _showMonthPickerAsOverlayInternal; + private TimeZoneInfo _timeZone = TimeZoneInfo.Local; private CultureInfo _culture = CultureInfo.CurrentUICulture; private CancellationTokenSource _cancellationTokenSource = new(); private DotNetObjectReference _dotnetObj = default!; @@ -423,6 +424,13 @@ private int _endTimeMinuteView /// [Parameter] public BitTimeFormat TimeFormat { get; set; } + /// + /// TimeZone for the DateRangePicker. + /// + [Parameter] + [CallOnSet(nameof(OnSetParameters))] + public TimeZoneInfo? TimeZone { get; set; } + /// /// Whether or not the Text field of the DateRangePicker is underlined. /// @@ -607,7 +615,7 @@ protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(fa //if (DateTime.TryParseExact(value, DateFormat ?? Culture.DateTimeFormat.ShortDatePattern, Culture, DateTimeStyles.None, out DateTime parsedValue)) //{ - // result = new DateTimeOffset(parsedValue, DateTimeOffset.Now.Offset); + // result = new DateTimeOffset(parsedValue, _timeZone.GetUtcOffset(parsedValue)); // validationErrorMessage = null; // return true; //} @@ -740,6 +748,7 @@ private void HandleOnValueChanged(object? sender, EventArgs args) private void OnSetParameters() { + _timeZone = TimeZone ?? TimeZoneInfo.Local; _culture = Culture ?? CultureInfo.CurrentUICulture; if (CurrentValue is not null) @@ -835,7 +844,7 @@ private async Task SelectDate(DateTime selectedDate) selectedDate = selectedDate.AddHours(hour); selectedDate = selectedDate.AddMinutes(minute); - var selectedDateTimeOffset = new DateTimeOffset(selectedDate, DateTimeOffset.Now.Offset); + var selectedDateTimeOffset = new DateTimeOffset(selectedDate, _timeZone.GetUtcOffset(selectedDate)); if (curValue.StartDate.HasValue is false) { curValue.StartDate = selectedDateTimeOffset; @@ -1423,12 +1432,13 @@ private string GetMonthCellCssClass(int monthIndex, int todayYear, int todayMont private DateTimeOffset GetDateTimeOfDayCell(DateTime date) { - return new(date, DateTimeOffset.Now.Offset); + return new(date, _timeZone.GetUtcOffset(date)); } private DateTimeOffset GetDateTimeOfMonthCell(int monthIndex) { - return new(_culture.Calendar.ToDateTime(_currentYear, monthIndex, 1, 0, 0, 0, 0), DateTimeOffset.Now.Offset); + var date = _culture.Calendar.ToDateTime(_currentYear, monthIndex, 1, 0, 0, 0, 0); + return new(date, _timeZone.GetUtcOffset(date)); } private bool IsBetweenTwoSelectedDate(DateTime date) @@ -1495,7 +1505,8 @@ private void UpdateTime() var month = _culture.Calendar.GetMonth(date.Value.LocalDateTime); var day = _culture.Calendar.GetDayOfMonth(date.Value.LocalDateTime); - return new DateTimeOffset(_culture.Calendar.ToDateTime(year, month, day, hour, minute, 0, 0), DateTimeOffset.Now.Offset); + var resultDate = _culture.Calendar.ToDateTime(year, month, day, hour, minute, 0, 0); + return new(resultDate, _timeZone.GetUtcOffset(resultDate)); } private async Task HandleOnHourInputFocus(bool isStartTime) 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 c5912f5a43..88b8d39e10 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 @@ -128,7 +128,45 @@ - + +
+ Specifies the timezone used to interpret and display the selected date/time. +
+ 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 + enabled for the project (like InvariantTimezone in the project file, + more info). +
+

+
Defalt (local TimeZone):

+
+ +
+
+
Selected date range: from @(timeZoneDateRange1?.StartDate?.ToString() ?? "-") to @(timeZoneDateRange1?.EndDate?.ToString() ?? "-")
+ + @{ + TimeZoneInfo? timeZoneInfo = null; + var allTimeZones = TimeZoneInfo.GetSystemTimeZones(); + if (allTimeZones.Count > 0) + { + timeZoneInfo = allTimeZones[0]; + } + } + + @if (timeZoneInfo is not null) { +



+
"@timeZoneInfo.Id" TimeZone:

+
+ +
+
+
Selected date range: from @(timeZoneDateRange2?.StartDate?.ToString() ?? "-") to @(timeZoneDateRange2?.EndDate?.ToString() ?? "-")
+ } + + +
Use the BitDateRangePicker in a standalone mode, allowing it to function independently without a surrounding form or container.

@@ -144,7 +182,7 @@
- +
The ReadOnly parameter makes the date range picker input non-editable, preventing users from manually changing the time value.

@@ -160,7 +198,7 @@
- +
Utilize various templates within the BitDateRangePicker, such as custom label templates, day cell templates, and year cell templates.

@@ -202,7 +240,7 @@
- +
Enable responsive design for the BitDateRangePicker, allowing it to adjust its layout and appearance based on the screen size.

@@ -213,7 +251,7 @@
- +
Explore styling and class customization for BitDateRangePicker, including component styles, custom classes, and detailed styles.


Component's Style & Class:
@@ -270,7 +308,7 @@ - +
Use BitDateRangePicker in right-to-left (RTL).

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 f9391e588b..8ac996f6a9 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 @@ -373,6 +373,13 @@ public partial class BitDateRangePickerDemo Href = "#time-format-enum", }, new() + { + Name = "TimeZone", + Type = "TimeZoneInfo?", + DefaultValue = "null", + Description = "TimeZone for the DateRangePicker." + }, + new() { Name = "Underlined", Type = "bool", @@ -1009,4 +1016,7 @@ public partial class BitDateRangePickerDemo 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 BitDateRangePickerValue? timeZoneDateRange1 = new(); + private BitDateRangePickerValue? timeZoneDateRange2 = 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 8830ed9e28..0d2d3f462c 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 @@ -63,25 +63,47 @@ public partial class BitDateRangePickerDemo Culture=""CultureInfoHelper.GetFaIrCultureWithFingilishNames()"" />"; private readonly string example7RazorCode = @" + +
Selected date range: from @(timeZoneDateRange1?.StartDate?.ToString() ?? ""-"") to @(timeZoneDateRange1?.EndDate?.ToString() ?? ""-"")
+ +@{ + TimeZoneInfo? timeZoneInfo = null; + var allTimeZones = TimeZoneInfo.GetSystemTimeZones(); + if (allTimeZones.Count > 0) + { + timeZoneInfo = allTimeZones[0]; + } +} + +@if (timeZoneInfo is not null) { +
""@timeZoneInfo.Id"" TimeZone:

+ +
Selected date range: from @(timeZoneDateRange2?.StartDate?.ToString() ?? ""-"") to @(timeZoneDateRange2?.EndDate?.ToString() ?? ""-"")
+}"; + private readonly string example7CsharpCode = @" +private BitDateRangePickerValue? timeZoneDateRange1 = new(); +private BitDateRangePickerValue? timeZoneDateRange2 = new();"; + + private readonly string example8RazorCode = @" "; - private readonly string example8RazorCode = @" + private readonly string example9RazorCode = @" "; - private readonly string example8CsharpCode = @" + private readonly string example9CsharpCode = @" 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 example9RazorCode = @" + private readonly string example10RazorCode = @" Custom label @@ -117,16 +139,16 @@ public partial class BitDateRangePickerDemo "; - private readonly string example9CsharpCode = @" + private readonly string example10CsharpCode = @" private CultureInfo culture = CultureInfo.CurrentUICulture;"; - private readonly string example10RazorCode = @" + private readonly string example11RazorCode = @" "; - private readonly string example11RazorCode = @" + private readonly string example12RazorCode = @"