p11 UI
true-perfect-code
Version: 1.1.69

P11TimePicker Component

The P11TimePicker component provides a native HTML-based time input, leveraging the browser's <input type="time"> element. It offers a straightforward and accessible way for users to select a time, with options for min/max time constraints, custom stepping intervals, and seamless integration with Blazor's validation system.
Note: The appearance and user experience of the time picker UI are entirely controlled by the user's browser and operating system, which may lead to visual differences across platforms. The Step parameter accepts a TimeSpan (e.g., TimeSpan.FromMinutes(15)) and maps to the HTML 'step' attribute in seconds.

Basic Time Picker with Validation

A simple time picker with default settings and form validation. Try submitting with no selection to see validation errors, or click 'Reset Time' to clear the selection.

Specify the meeting start time.

Current Time: not set

Implementation

<EditForm Model="@timeModelForBasicExample" OnValidSubmit="@HandleValidSubmitBasicTime">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="bg-light p-4 rounded mb-4">
        <div class="component-description mt-4">
            <h2 class="mb-3">Basic Time Picker with Validation</h2>
            <p>A simple time picker with default settings and form validation. Try submitting with no selection to see validation errors, or click 'Reset Time' to clear the selection.</p>
            <P11TimePicker Label="Meeting Time"
                           Description="Specify the meeting start time."
                           @bind-Value="timeModelForBasicExample.MeetingTime"
                           ShowDevelopmentErrors="false"
                           ValidationFor="@(() => timeModelForBasicExample.MeetingTime)" />
            <p>Current Time: @(timeModelForBasicExample.MeetingTime?.ToString("hh\\:mm") ?? "not set")</p>
        </div>
    </div>

    <button type="submit" class="btn btn-primary mt-4">Submit Form</button>
    <button type="button" class="btn btn-secondary mt-4 ms-2" @onclick="ResetBasicTimeSelection">Reset Time</button>
</EditForm>
@* You may need the using *@
@* @using System.ComponentModel.DataAnnotations *@
@code {
    // Model for the basic form to demonstrate validation
    public class TimePickerBasicTestModel
    {
        [Required(ErrorMessage = "A time is required.")]
        public TimeSpan? MeetingTime { get; set; } = null;
    }

    private TimePickerBasicTestModel timeModelForBasicExample = new TimePickerBasicTestModel();

    /// <summary>
    /// Handles the valid form submission for the basic time picker example.
    /// </summary>
    private void HandleValidSubmitBasicTime()
    {
        Console.WriteLine($"Validation successful for basic example!");
        Console.WriteLine($"Selected time: {timeModelForBasicExample.MeetingTime?.ToString("hh\\:mm") ?? "null"}");
        // Further logic here
    }

    /// <summary>
    /// Resets the selected time in the basic form example.
    /// </summary>
    private void ResetBasicTimeSelection()
    {
        timeModelForBasicExample = new TimePickerBasicTestModel();
        StateHasChanged();
    }
}

Time Picker with Initial Value and Formatted Display

Time picker with a predefined value (e.g., 09:30 AM) and additional formatted display.

Current Time: 09:30

Implementation

<h2 class="mb-3">Time Picker with Initial Value and Formatted Display</h2>
<p>Time picker with a predefined value (e.g., 09:30 AM) and additional formatted display.</p>
<P11TimePicker Label="Default Start Time"
               @bind-Value="defaultStartTime"
               ShowFormattedTime="true" />
<p>Current Time: @(defaultStartTime?.ToString("hh\\:mm") ?? "not set")</p>
@* You may need the using *@
@* @using System.ComponentModel.DataAnnotations *@
@code {
    private TimeSpan? defaultStartTime = new TimeSpan(9, 30, 0);
}

Time Picker with Min/Max Times and Validation

Time picker that only allows times between 09:00 and 17:00. Note: While you might be able to *type* a time outside this range, the form validation will prevent submission. Try entering 08:00 and submitting.

Select a time during office hours (09:00 - 17:00).

Current Time: 12:00

Implementation

<EditForm Model="@timeModelForMinMax" OnValidSubmit="@HandleValidSubmitMinMax">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="bg-light p-4 rounded mb-4">
        <div class="component-description mt-4">
            <h2 class="mb-3">Time Picker with Min/Max Times and Validation</h2>
            <p>Time picker that only allows times between 09:00 and 17:00. Note: While you might be able to *type* a time outside this range, the form validation will prevent submission. Try entering 08:00 and submitting.</p>
            <P11TimePicker Label="Office Hours"
                           Description="Select a time during office hours (09:00 - 17:00)."
                           MinTime="@(timeModelForMinMax.MinAllowedTime)"
                           MaxTime="@(timeModelForMinMax.MaxAllowedTime)"
                           @bind-Value="timeModelForMinMax.OfficeTime"
                           ValidationFor="@(() => timeModelForMinMax.OfficeTime)" />
            <p>Current Time: @(timeModelForMinMax.OfficeTime?.ToString("hh\\:mm") ?? "not set")</p>
        </div>
    </div>

    <button type="submit" class="btn btn-primary mt-4">Submit Form</button>
    <button type="button" class="btn btn-secondary mt-4 ms-2" @onclick="ResetMinMaxTimeSelection">Reset Time</button>
</EditForm>
@* You may need the using *@
@* @using System.ComponentModel.DataAnnotations *@
@code {            
    // Model for the Min/Max form to demonstrate validation
    public class TimePickerMinMaxTestModel
    {
        [Required(ErrorMessage = "A time is required.")]
        // Note: The Range attribute uses string format for TimeSpan, HH:mm:ss
        [Range(typeof(TimeSpan), "09:00:00", "17:00:00", ErrorMessage = "Time must be between 09:00 and 17:00.")]
        public TimeSpan? OfficeTime { get; set; } = new TimeSpan(12, 0, 0);

        // These properties are used by the P11TimePicker component itself for HTML min/max attributes
        public TimeSpan MinAllowedTime { get; set; } = new TimeSpan(9, 0, 0);
        public TimeSpan MaxAllowedTime { get; set; } = new TimeSpan(17, 0, 0);
    }

    private TimePickerMinMaxTestModel timeModelForMinMax = new TimePickerMinMaxTestModel();

    /// <summary>
    /// Handles the valid form submission for the Min/Max time picker example.
    /// </summary>
    private void HandleValidSubmitMinMax()
    {
        Console.WriteLine($"Validation successful for Min/Max example!");
        Console.WriteLine($"Selected time: {timeModelForMinMax.OfficeTime?.ToString("hh\\:mm") ?? "null"}");
        // Further logic here
    }

    /// <summary>
    /// Resets the selected time in the Min/Max form example.
    /// </summary>
    private void ResetMinMaxTimeSelection()
    {
        timeModelForMinMax = new TimePickerMinMaxTestModel();
        StateHasChanged();
    }
}

Time Picker with Step Validation

This time picker allows only 15-minute intervals. The step attribute enables the browser's native HTML5 validation to check if the entered time is a valid multiple of the step (from 00:00). If you enter a time that is not a multiple of 15 minutes (e.g., 10:07), the form will show a validation error upon submission.

Select a time in 15-minute intervals.

Current Time: 10:15

Implementation

<EditForm Model="@timeModelForStep" OnValidSubmit="@HandleValidSubmitStep">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="bg-light p-4 rounded mb-4">
        <div class="component-description mt-4">
            <h2 class="mb-3">Time Picker with Step Validation</h2>
            <p>This time picker allows only 15-minute intervals. The <code>step</code> attribute enables the browser's native HTML5 validation to check if the entered time is a valid multiple of the step (from 00:00). If you enter a time that is not a multiple of 15 minutes (e.g., 10:07), the form will show a validation error upon submission.</p>
            <P11TimePicker Label="Intervals"
                           Description="Select a time in 15-minute intervals."
                           Step="@TimeSpan.FromMinutes(15)"
                           @bind-Value="timeModelForStep.IntervalTime"
                           ValidationFor="@(() => timeModelForStep.IntervalTime)" />
            <p>Current Time: @(timeModelForStep.IntervalTime?.ToString("hh\\:mm") ?? "not set")</p>
        </div>
    </div>

    <button type="submit" class="btn btn-primary mt-4">Submit Form</button>
    <button type="button" class="btn btn-secondary mt-4 ms-2" @onclick="ResetStepTimeSelection">Reset Time</button>
</EditForm>
@* You may need the using *@
@* @using System.ComponentModel.DataAnnotations *@
@code {
    // Model for the Step form to demonstrate validation
    public class TimePickerStepTestModel
    {
        [Required(ErrorMessage = "A time is required.")]
        // Note: HTML5 step validation is handled natively by the browser.
        // For server-side validation of steps, a custom validation attribute would be needed.
        public TimeSpan? IntervalTime { get; set; } = new TimeSpan(10, 15, 0);
    }

    private TimePickerStepTestModel timeModelForStep = new TimePickerStepTestModel();

    /// <summary>
    /// Handles the valid form submission for the Step time picker example.
    /// </summary>
    private void HandleValidSubmitStep()
    {
        Console.WriteLine($"Validation successful for Step example!");
        Console.WriteLine($"Selected time: {timeModelForStep.IntervalTime?.ToString("hh\\:mm") ?? "null"}");
        // Further logic here
    }

    /// <summary>
    /// Resets the selected time in the Step form example.
    /// </summary>
    private void ResetStepTimeSelection()
    {
        timeModelForStep = new TimePickerStepTestModel();
        StateHasChanged();
    }
}

Disabled Time Picker

A disabled time picker.

Current Time: 14:00

Implementation

<h2 class="mb-3">Disabled Time Picker</h2>
<p>A disabled time picker.</p>
<P11TimePicker Label="Disabled Time"
               @bind-Value="disabledTime"
               Disabled="true" />
<p>Current Time: @(disabledTime?.ToString("hh\\:mm") ?? "not set")</p>
@* You may need the using *@
@* @using System.ComponentModel.DataAnnotations *@
@code {
    private TimeSpan? disabledTime = new TimeSpan(14, 0, 0);
}

Time Picker with Additional Attributes

Time picker with custom attributes and CSS class. Check this in the browser inspector.

Current Time: 07:45

Implementation

<h2 class="mb-3">Time Picker with Additional Attributes</h2>
<p>Time picker with custom attributes and CSS class. Check this in the browser inspector.</p>
<P11TimePicker Label="With Extra Attributes"
               @bind-Value="extraTime"
               @attributes='new Dictionary<string, object> { { "data-event-slot", "true" }, { "tabindex", "10" } }'
               CssClass="time-highlight" />
<p>Current Time: @(extraTime?.ToString("hh\\:mm") ?? "not set")</p>

<style>
    .time-highlight .form-control {
        border-color: #007bff;
        box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, .25);
        background-color: #e9f5ff;
    }

    .time-highlight .form-control:focus {
        border-color: #0056b3;
        box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, .5);
    }
</style>
@* You may need the using *@
@* @using System.ComponentModel.DataAnnotations *@
@code {
    private TimeSpan? extraTime = new TimeSpan(7, 45, 0);
}

Time Picker with ValueChanged Event and Separate Value

Demonstrates how to use the Value parameter for initial display and the ValueChanged event to react to changes in the selected time, without using @bind-Value. This is useful if you need to perform custom logic before updating the bound property.

The time below will update, and a console message will be logged when you select a new time.

Selected Time: not set

Implementation

<h2 class="mb-3">Time Picker with ValueChanged Event and Separate Value</h2>
<p>Demonstrates how to use the <code>Value</code> parameter for initial display and the <code>ValueChanged</code> event to react to changes in the selected time, without using <code>@@bind-Value</code>. This is useful if you need to perform custom logic before updating the bound property.</p>
<P11TimePicker Value="timeChangedValue"
               ValueChanged="@((TimeSpan? newTime) => OnTimeChanged(newTime))"
               Label="Monitor Time Changes"
               Description="The time below will update, and a console message will be logged when you select a new time." />
<p>Selected Time: <span class="fw-bold">@(timeChangedValue?.ToString("hh\\:mm") ?? "not set")</span></p>
@* You may need the using *@
@* @using System.ComponentModel.DataAnnotations *@
@code {
    // For ValueChanged event example
    private TimeSpan? timeChangedValue = null;

    /// <summary>
    /// Event handler for the ValueChanged event of the P11TimePicker.
    /// Updates the bound value and logs the change to the console.
    /// </summary>
    /// <param name="newTime">The new nullable TimeSpan value.</param>
    private void OnTimeChanged(TimeSpan? newTime)
    {
        timeChangedValue = newTime;
        Console.WriteLine($"Time changed to: {newTime?.ToString("hh\\:mm") ?? "null"}");
    }
}

Component API

Parameter Type Default Description
Label string? null Gets or sets the label text displayed next to the input field.
Description string? null Gets or sets a descriptive text displayed below the input field.
Disabled bool false Gets or sets a value indicating whether the input field is disabled.
CssClass string? null Gets or sets custom CSS classes to be applied to the component's container div.
ShowFormattedTime bool false Gets or sets whether to display the formatted time value next to the picker.
ShowDevelopmentErrors bool true Gets or sets a value indicating whether development-time configuration errors should be displayed. Defaults to true. Set to false for production environments.
MinTime TimeSpan? null Gets or sets the minimum selectable time. Maps to the HTML 'min' attribute.
MaxTime TimeSpan? null Gets or sets the maximum selectable time. Maps to the HTML 'max' attribute.
Step TimeSpan? null (browser default) Gets or sets the stepping interval in seconds for the time picker. Maps to the HTML 'step' attribute. This parameter primarily controls the increments when using the input's up/down arrows and influences the validity of manually entered values. If a value is entered that is not a multiple of the step (from 00:00), the browser's native HTML5 validation will mark the input as invalid upon form submission. This behavior is browser-specific. E.g., for 15 minutes, use TimeSpan.FromMinutes(15). For 1 second, use TimeSpan.FromSeconds(1). Null means browser default (usually 60 seconds / 1 minute).
Value TimeSpan? null Gets or sets the current selected time. Uses two-way binding.
ValidationFor Expression<Func<TimeSpan?>>? null Gets or sets an expression that identifies the field for validation. Supports nullable TimeSpan in the Model.
AdditionalAttributes Dictionary<string, object>? null Captures all unmatched attributes that are not explicitly defined as component parameters. These attributes are applied to the component's container div.
Events
ValueChanged EventCallback<TimeSpan?> - Event callback for when the Value changes. Used for two-way binding.
An unhandled error has occurred. Reload 🗙