Skip to content

Add ReadOnly parameter implementation to BitTimePicker (#9977) #10071

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
msynk merged 1 commit into from
Feb 27, 2025
Merged

Add ReadOnly parameter implementation to BitTimePicker (#9977) #10071

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -131,6 +132,7 @@
max="59"
type="number"
inputmode="numeric"
readonly="@ReadOnly"
style="@Styles?.MinuteInput"
class="bit-tpc-tin @Classes?.MinuteInput"
autocomplete="@BitAutoCompleteValue.NewPassword"
Expand Down
3 changes: 3 additions & 0 deletions src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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);
Expand Down
64 changes: 40 additions & 24 deletions .../Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TimePicker/BitTimePickerDemo.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,41 @@
</div>
</DemoSection>

<DemoSection Title="Validation" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
<DemoSection Title="Standalone" RazorCode="@example7RazorCode" Id="example7">
<div>Use the BitTimePicker as a standalone component, including options for time format and disabled state.</div>
<br />
<div class="example-content">
<BitTimePicker Standalone Label="Standalone picker" />
<br />
<BitTimePicker Standalone
Label="Picker (AM/PM)"
TimeFormat="BitTimeFormat.TwelveHours" />
<br />
<BitTimePicker Standalone
Label="Disabled"
IsEnabled="false"
Value="new(10, 24, 0)"
TimeFormat="BitTimeFormat.TwelveHours" />
</div>
</DemoSection>

<DemoSection Title="ReadOnly" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
<div>The ReadOnly parameter makes the time picker input non-editable, preventing users from manually changing the time value.</div>
<br />
<div class="example-content">
<BitTimePicker Label="Basic" ReadOnly @bind-Value="@readOnlyTime" />
<br /><br />
<BitTimePicker Label="Text input allowed" ReadOnly AllowTextInput @bind-Value="@readOnlyTime" />
</div>
<br /><br />
<div class="example-content-standalone">
<BitTimePicker Label="Standalone" Standalone ReadOnly @bind-Value="@readOnlyTime" />
<br /><br />
<BitTimePicker Label="Standalone TimeFormat (AM/PM)" Standalone ReadOnly TimeFormat="BitTimeFormat.TwelveHours" @bind-Value="@readOnlyTime" />
</div>
</DemoSection>

<DemoSection Title="Validation" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
<div>
Validation will happen when the <code>Submit</code> button is clicked.
This example demonstrates how to use the BitTimePicker within a form to validate the selected time.
Expand Down Expand Up @@ -112,7 +146,7 @@
}
</DemoSection>

<DemoSection Title="Responsive" RazorCode="@example8RazorCode" Id="example8">
<DemoSection Title="Responsive" RazorCode="@example10RazorCode" Id="example10">
<div>Enable responsive design for the BitTimePicker, allowing it to adjust its layout and appearance based on the screen size.</div>
<br />
<div class="example-content">
Expand All @@ -122,7 +156,7 @@
</div>
</DemoSection>

<DemoSection Title="Templates" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
<DemoSection Title="Templates" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
<div>Customize the BitTimePicker using templates, including a custom label template with an action button and a custom icon template.</div>
<br />
<div class="example-content">
Expand All @@ -140,7 +174,7 @@
</div>
</DemoSection>

<DemoSection Title="Hour/minute step" RazorCode="@example10RazorCode" Id="example10">
<DemoSection Title="Hour/minute step" RazorCode="@example12RazorCode" Id="example12">
<div>Customize the hour and minute steps in the BitTimePicker, allowing users to increment time by a specified interval.</div>
<br />
<div class="example-content">
Expand All @@ -154,25 +188,7 @@
</div>
</DemoSection>

<DemoSection Title="Standalone" RazorCode="@example11RazorCode" Id="example11">
<div>Use the BitTimePicker as a standalone component, including options for time format and disabled state.</div>
<br />
<div class="example-content">
<BitTimePicker Standalone Label="Standalone picker" />
<br />
<BitTimePicker Standalone
Label="Picker (AM/PM)"
TimeFormat="BitTimeFormat.TwelveHours" />
<br />
<BitTimePicker Standalone
Label="Disabled"
IsEnabled="false"
Value="new(10, 24, 0)"
TimeFormat="BitTimeFormat.TwelveHours" />
</div>
</DemoSection>

<DemoSection Title="Style & Class" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
<DemoSection Title="Style & Class" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
<div>Explore styling and class customization for BitTimePicker, including component styles, custom classes, and detailed styles.</div>
<br /><br />
<div>Component's Style & Class:</div>
Expand Down Expand Up @@ -210,7 +226,7 @@
</div>
</DemoSection>

<DemoSection Title="RTL" RazorCode="@example13RazorCode" Id="example13">
<DemoSection Title="RTL" RazorCode="@example14RazorCode" Id="example14">
<div>Use BitTimePicker in right-to-left (RTL).</div>
<br />
<div dir="rtl">
Expand Down
Loading
Loading