diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor index 05a37816dd..8aacab1a99 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor @@ -40,7 +40,7 @@ placeholder="@Placeholder" value="@CurrentValueAsString" disabled="@(IsEnabled is false)" - readonly="@(AllowTextInput is false)" + readonly="@(AllowTextInput is false || ReadOnly)" aria-expanded="@(IsOpen ? "true" : "false")" aria-controls="@(IsOpen ? _calloutId : null)" aria-labelledby="@(Label.HasValue() ? _labelId : null)" @@ -98,6 +98,7 @@ max="@(TimeFormat == BitTimeFormat.TwelveHours ? "12" : "23")" type="number" inputmode="numeric" + readonly="@ReadOnly" style="@Styles?.HourInput" class="bit-tpc-tin @Classes?.HourInput" autocomplete="@BitAutoCompleteValue.NewPassword" @@ -131,6 +132,7 @@ max="59" type="number" inputmode="numeric" + readonly="@ReadOnly" style="@Styles?.MinuteInput" class="bit-tpc-tin @Classes?.MinuteInput" autocomplete="@BitAutoCompleteValue.NewPassword" diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs index 572c9fc268..e00d6e500e 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs @@ -480,6 +480,7 @@ private async Task UpdateCurrentValue() private async Task HandleOnAmClick() { + if (ReadOnly) return; if (IsEnabled is false) return; _hour %= 12; // "12:-- am" is "00:--" in 24h @@ -488,6 +489,7 @@ private async Task HandleOnAmClick() private async Task HandleOnPmClick() { + if (ReadOnly) return; if (IsEnabled is false) return; if (_hour <= 12) // "12:-- pm" is "12:--" in 24h @@ -582,6 +584,7 @@ private async Task ChangeMinute(bool isNext) private async Task HandleOnPointerDown(bool isNext, bool isHour) { + if (ReadOnly) return; if (IsEnabled is false) return; await ChangeTime(isNext, isHour); diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor index ceb1429197..b91c42d073 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor @@ -79,7 +79,41 @@ - + +
Use the BitTimePicker as a standalone component, including options for time format and disabled state.
+
+
+ +
+ +
+ +
+ + + +
The ReadOnly parameter makes the time picker input non-editable, preventing users from manually changing the time value.
+
+
+ +

+ +
+

+
+ +

+ +
+ + +
Validation will happen when the Submit button is clicked. This example demonstrates how to use the BitTimePicker within a form to validate the selected time. @@ -112,7 +146,7 @@ } - +
Enable responsive design for the BitTimePicker, allowing it to adjust its layout and appearance based on the screen size.

@@ -122,7 +156,7 @@
- +
Customize the BitTimePicker using templates, including a custom label template with an action button and a custom icon template.

@@ -140,7 +174,7 @@
- +
Customize the hour and minute steps in the BitTimePicker, allowing users to increment time by a specified interval.

@@ -154,25 +188,7 @@
- -
Use the BitTimePicker as a standalone component, including options for time format and disabled state.
-
-
- -
- -
- -
- - - +
Explore styling and class customization for BitTimePicker, including component styles, custom classes, and detailed styles.


Component's Style & Class:
@@ -210,7 +226,7 @@
- +
Use BitTimePicker in right-to-left (RTL).

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.cs index 1b4e03933f..887f48e877 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.cs @@ -559,7 +559,8 @@ public partial class BitTimePickerDemo - private TimeSpan? selectedTime = new TimeSpan(5, 12, 15); + private TimeSpan? readOnlyTime = new(2, 50, 0); + private TimeSpan? selectedTime = new(5, 12, 15); private FormValidationTimePickerModel formValidationTimePickerModel = new(); private string successMessage = string.Empty; private BitTimePicker timePicker = default!; @@ -583,246 +584,4 @@ private void HandleInvalidSubmit() } private TimeSpan? classesValue; - - - - private readonly string example1RazorCode = @" - - - -"; - - private readonly string example2RazorCode = @" - - -"; - - private readonly string example3RazorCode = @" -"; - - private readonly string example4RazorCode = @" - - -"; - - private readonly string example5RazorCode = @" -"; - - private readonly string example6RazorCode = @" - -
Selected time: @selectedTime.ToString()
"; - private readonly string example6CsharpCode = @" -private TimeSpan? selectedTime = new TimeSpan(5, 12, 15);"; - - private readonly string example7RazorCode = @" - - -
- -
-
- - formValidationTimePickerModel.Time)"" /> -
-
- - Submit - -"; - private readonly string example7CsharpCode = @" -public class FormValidationTimePickerModel -{ - [Required] - public DateTimeOffset? Date { get; set; } -} - -private FormValidationCircularTimePickerModel formValidationTimePickerModel = new(); - -private async Task HandleValidSubmit() -{ - await Task.Delay(3000); - - formValidationTimePickerModel = new(); - - StateHasChanged(); -}"; - - private readonly string example8RazorCode = @" -"; - - private readonly string example9RazorCode = @" - - - Custom label - - - - - - - -"; - private readonly string example9CsharpCode = @" -private BitTimePicker timePicker; - -private async Task OpenCallout() -{ - await timePicker.OpenCallout(); -}"; - - private readonly string example10RazorCode = @" - - -"; - - private readonly string example11RazorCode = @" - - - - -"; - - private readonly string example12RazorCode = @" - - - - - - - - - - -"; - private readonly string example12CsharpCode = @" -private TimeSpan? classesValue;"; - - private readonly string example13RazorCode = @" - - -"; } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.samples.cs new file mode 100644 index 0000000000..5846332dd5 --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor.samples.cs @@ -0,0 +1,252 @@ +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.TimePicker; + +public partial class BitTimePickerDemo +{ + private readonly string example1RazorCode = @" + + + +"; + + private readonly string example2RazorCode = @" + + +"; + + private readonly string example3RazorCode = @" +"; + + private readonly string example4RazorCode = @" + + +"; + + private readonly string example5RazorCode = @" +"; + + private readonly string example6RazorCode = @" + +
Selected time: @selectedTime.ToString()
"; + private readonly string example6CsharpCode = @" +private TimeSpan? selectedTime = new(5, 12, 15);"; + + private readonly string example7RazorCode = @" + + + + +"; + + private readonly string example8RazorCode = @" + + + +"; + private readonly string example8CsharpCode = @" +private TimeSpan? readOnlyTime = new(2, 50, 0);"; + + private readonly string example9RazorCode = @" + + +
+ +
+
+ + formValidationTimePickerModel.Time)"" /> +
+
+ + Submit + +"; + private readonly string example9CsharpCode = @" +public class FormValidationTimePickerModel +{ + [Required] + public DateTimeOffset? Date { get; set; } +} + +private FormValidationCircularTimePickerModel formValidationTimePickerModel = new(); + +private async Task HandleValidSubmit() +{ + await Task.Delay(3000); + + formValidationTimePickerModel = new(); + + StateHasChanged(); +}"; + + private readonly string example10RazorCode = @" +"; + + private readonly string example11RazorCode = @" + + + Custom label + + + + + + + +"; + private readonly string example11CsharpCode = @" +private BitTimePicker timePicker; + +private async Task OpenCallout() +{ + await timePicker.OpenCallout(); +}"; + + private readonly string example12RazorCode = @" + + +"; + + private readonly string example13RazorCode = @" + + + + + + + + + + +"; + private readonly string example13CsharpCode = @" +private TimeSpan? classesValue;"; + + private readonly string example14RazorCode = @" + + +"; +}