P11 Blazor UI Library – Bootstrap 5.3 Components

P11DateTimePicker Component

The P11DateTimePicker component provides a native HTML-based date and time input, leveraging the browser's <input type="datetime-local"> element. It offers an accessible and straightforward way for users to select both a date and a time, with options for min/max date/time constraints and custom stepping intervals.

Note: The appearance and user experience of the date/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. The min, max, and step attributes primarily influence HTML5 form validation when used within an EditForm, rather than strictly limiting the visual selection options in the native browser picker.

Implementation

<EditForm Model="@dateTimeModelForBasicExample" OnValidSubmit="@HandleValidSubmitBasicDateTime">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="bg-light p-4 rounded mb-4">
        <div class="component-description mt-4">
            <h2 class="mb-3">Basic Date/Time Picker with Validation</h2>
            <p>A simple date/time picker with default settings and form validation. Try submitting with no selection to see validation errors, or click 'Reset Date/Time' to clear the selection.</p>
            <P11DateTimePicker Label="Event Date and Time"
                               Description="Please select the date and time for your event."
                               @bind-Value="dateTimeModelForBasicExample.EventDateTime"
                               ShowDevelopmentErrors="false"
                               ValidationFor="@(() => dateTimeModelForBasicExample.EventDateTime)" />
            <p>Current Date/Time: @(dateTimeModelForBasicExample.EventDateTime?.ToString("dd.MM.yyyy 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="ResetBasicDateTimeSelection">Reset Date/Time</button>
</EditForm>

@* You may need the using *@
@* @using System.ComponentModel.DataAnnotations *@
@code {
    // Model for the basic form to demonstrate required validation
    public class DateTimePickerBasicTestModel
    {
        [Required(ErrorMessage = "Event date and time is required.")]
        public DateTime? EventDateTime { get; set; } = null;
    }

    private DateTimePickerBasicTestModel dateTimeModelForBasicExample = new DateTimePickerBasicTestModel();

    /// <summary>
    /// Handles the valid form submission for the basic date/time picker example.
    /// </summary>
    private void HandleValidSubmitBasicDateTime()
    {
        Console.WriteLine($"Validation successful for basic date/time example!");
        Console.WriteLine($"Selected date/time: {dateTimeModelForBasicExample.EventDateTime?.ToString("dd.MM.yyyy HH\\:mm") ?? "null"}");
        // Further logic here
    }

    /// <summary>
    /// Resets the selected date/time in the basic form example.
    /// </summary>
    private void ResetBasicDateTimeSelection()
    {
        dateTimeModelForBasicExample = new DateTimePickerBasicTestModel();
        StateHasChanged();
    }
}

Date/Time Picker with Initial Value and Formatted Display

Date/time picker with a predefined value (Now) and additional formatted display.

Current Date and Time

06.12.2025 09:28

Current Date/Time: 06.12.2025 09:28

Implementation

<h2 class="mb-3">Date/Time Picker with Initial Value and Formatted Display</h2>
<p>Date/time picker with a predefined value (Now) and additional formatted display.</p>
<P11DateTimePicker Label="Current Date and Time"
                   @bind-Value="currentDateTime"
                   ShowFormattedDateTime="true" />
<p>Current Date/Time: @(currentDateTime?.ToString("dd.MM.yyyy HH\\:mm") ?? "not set")</p>

@* You may need the using *@
@* @using System.ComponentModel.DataAnnotations *@
@code {
    // Properties for other P11DateTimePicker examples (not in EditForm)
    private DateTime? currentDateTime = DateTime.Now;
}

Implementation

<EditForm Model="@dateTimeModelForMinMax" OnValidSubmit="@HandleValidSubmitMinMax">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="bg-light p-4 rounded mb-4">
        <div class="component-description mt-4">
            <h2 class="mb-3">Date/Time Picker with Min/Max DateTimes and Validation</h2>
            <p>Date/time picker that only allows appointments in August 2025 (between 08:00 and 18:00). Note: While you might be able to *type* a date/time outside this range, the form validation will prevent submission. Try entering a date/time outside the specified range and submitting.</p>
            <P11DateTimePicker Label="Appointment in August 2025"
                               Description="Select an appointment in August 2025 (08:00 - 18:00)."
                               MinDateTime="@(dateTimeModelForMinMax.MinAllowedDateTime)"
                               MaxDateTime="@(dateTimeModelForMinMax.MaxAllowedDateTime)"
                               @bind-Value="dateTimeModelForMinMax.AugustAppointment"
                               ValidationFor="@(() => dateTimeModelForMinMax.AugustAppointment)" />
            <p>Current Date/Time: @(dateTimeModelForMinMax.AugustAppointment?.ToString("dd.MM.yyyy 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="ResetMinMaxDateTimeSelection">Reset Date/Time</button>
</EditForm>

@* You may need the using *@
@* @using System.ComponentModel.DataAnnotations *@
@code {
    // Model for the Min/Max form to demonstrate validation
    public class DateTimePickerMinMaxTestModel
    {
        [Required(ErrorMessage = "An appointment date/time is required.")]
        // Range attribute for DateTime expects string format "yyyy-MM-dd HH:mm:ss"
        [Range(typeof(DateTime), "2025-08-01 08:00:00", "2025-08-31 18:00:00", ErrorMessage = "Date/time must be in August 2025 between 08:00 and 18:00.")]
        public DateTime? AugustAppointment { get; set; } = new DateTime(2025, 8, 15, 14, 30, 0);

        // These properties are passed to the P11DateTimePicker component for HTML min/max attributes
        public DateTime MinAllowedDateTime { get; set; } = new DateTime(2025, 8, 1, 8, 0, 0);
        public DateTime MaxAllowedDateTime { get; set; } = new DateTime(2025, 8, 31, 18, 0, 0);
    }

    private DateTimePickerMinMaxTestModel dateTimeModelForMinMax = new DateTimePickerMinMaxTestModel();

    /// <summary>
    /// Handles the valid form submission for the Min/Max date/time picker example.
    /// </summary>
    private void HandleValidSubmitMinMax()
    {
        Console.WriteLine($"Validation successful for Min/Max date/time example!");
        Console.WriteLine($"Selected date/time: {dateTimeModelForMinMax.AugustAppointment?.ToString("dd.MM.yyyy HH\\:mm") ?? "null"}");
        // Further logic here
    }

    /// <summary>
    /// Resets the selected date/time in the Min/Max form example.
    /// </summary>
    private void ResetMinMaxDateTimeSelection()
    {
        dateTimeModelForMinMax = new DateTimePickerMinMaxTestModel();
        StateHasChanged();
    }
}

Implementation

<EditForm Model="@dateTimeModelForStep" OnValidSubmit="@HandleValidSubmitStep">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="bg-light p-4 rounded mb-4">
        <div class="component-description mt-4">
            <h2 class="mb-3">Date/Time Picker with Step Validation</h2>
            <p>This date/time picker allows only 30-minute intervals. The <code>step</code> attribute enables the browser's native HTML5 validation to check if the entered date/time is a valid multiple of the step (from 00:00 on 01.01.2000). If you enter a time that is not a multiple of 30 minutes (e.g., 10:07), the form will show a validation error upon submission.</p>
            <P11DateTimePicker Label="Interval Appointment"
                               Description="Select an appointment in 30-minute intervals."
                               Step="@TimeSpan.FromMinutes(30)"
                               @bind-Value="dateTimeModelForStep.IntervalDateTime"
                               ValidationFor="@(() => dateTimeModelForStep.IntervalDateTime)" />
            <p>Current Date/Time: @(dateTimeModelForStep.IntervalDateTime?.ToString("dd.MM.yyyy 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="ResetStepDateTimeSelection">Reset Date/Time</button>
</EditForm>

@* You may need the using *@
@* @using System.ComponentModel.DataAnnotations *@
@code {
    // Model for the Step form to demonstrate validation
    public class DateTimePickerStepTestModel
    {
        [Required(ErrorMessage = "An appointment date/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 DateTime? IntervalDateTime { get; set; } = new DateTime(2025, 8, 15, 10, 30, 0); // Example initial value
    }

    private DateTimePickerStepTestModel dateTimeModelForStep = new DateTimePickerStepTestModel();

    /// <summary>
    /// Handles the valid form submission for the Step date/time picker example.
    /// </summary>
    private void HandleValidSubmitStep()
    {
        Console.WriteLine($"Validation successful for Step date/time example!");
        Console.WriteLine($"Selected date/time: {dateTimeModelForStep.IntervalDateTime?.ToString("dd.MM.yyyy HH\\:mm") ?? "null"}");
        // Further logic here
    }

    /// <summary>
    /// Resets the selected date/time in the Step form example.
    /// </summary>
    private void ResetStepDateTimeSelection()
    {
        dateTimeModelForStep = new DateTimePickerStepTestModel();
        StateHasChanged();
    }
}

Disabled Date/Time Picker

A disabled date/time picker.

Disabled Date/Time

Current Date/Time: 01.01.2025 10:00

Implementation

<h2 class="mb-3">Disabled Date/Time Picker</h2>
<p>A disabled date/time picker.</p>
<P11DateTimePicker Label="Disabled Date/Time"
                   @bind-Value="disabledDateTime"
                   Disabled="true" />
<p>Current Date/Time: @(disabledDateTime?.ToString("dd.MM.yyyy HH\\:mm") ?? "not set")</p>

@* You may need the using *@
@* @using System.ComponentModel.DataAnnotations *@
@code {
    private DateTime? disabledDateTime = new DateTime(2025, 1, 1, 10, 0, 0);
}

Date/Time Picker with Additional Attributes

Date/time picker with custom attributes and CSS class. Check this in the browser inspector.

With Extra Attributes

Current Date/Time: 25.12.2025 16:45

Implementation

<h2 class="mb-3">Date/Time Picker with Additional Attributes</h2>
<p>Date/time picker with custom attributes and CSS class. Check this in the browser inspector.</p>
<P11DateTimePicker Label="With Extra Attributes"
                   @bind-Value="extraDateTime"
                   @attributes='new Dictionary<string, object> { { "data-purpose", "log-entry" }, { "tabindex", "15" } }'
                   CssClass="datetime-highlight" />
<p>Current Date/Time: @(extraDateTime?.ToString("dd.MM.yyyy HH\\:mm") ?? "not set")</p>

<style>
    /* CSS-Klasse für die P11DateTimePicker-Komponente */
    .datetime-highlight .form-control {
        border-color: #6f42c1; /* Ein dezentes Violett */
        box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, .25);
        background-color: #f7f2ff;
    }

    .datetime-highlight .form-control:focus {
        border-color: #5d35a5;
        box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, .5);
    }
</style>

@* You may need the using *@
@* @using System.ComponentModel.DataAnnotations *@
@code {
    private DateTime? extraDateTime = new DateTime(2025, 12, 25, 16, 45, 0);
}

Date/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 date/time, without using @bind-Value. This is useful if you need to perform custom logic before updating the bound property.

Monitor Date/Time Changes

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

Selected Date/Time: not set

Implementation

<h2 class="mb-3">Date/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 date/time, without using <code>@@bind-Value</code>. This is useful if you need to perform custom logic before updating the bound property.</p>
<P11DateTimePicker Value="dateTimeChangedValue"
                   ValueChanged="@((DateTime? newDateTime) => OnDateTimeChanged(newDateTime))"
                   Label="Monitor Date/Time Changes"
                   Description="The date/time below will update, and a console message will be logged when you select a new date/time." />
<p>Selected Date/Time: <span class="fw-bold">@(dateTimeChangedValue?.ToString("dd.MM.yyyy HH\\:mm") ?? "not set")</span></p>

@* You may need the using *@
@* @using System.ComponentModel.DataAnnotations *@
@code {
    // For ValueChanged event example
    private DateTime? dateTimeChangedValue = null;

    /// <summary>
    /// Event handler for the ValueChanged event of the P11DateTimePicker.
    /// Updates the bound value and logs the change to the console.
    /// </summary>
    /// <param name="newDateTime">The new nullable DateTime value.</param>
    private void OnDateTimeChanged(DateTime? newDateTime)
    {
        dateTimeChangedValue = newDateTime;
        Console.WriteLine($"Date/Time changed to: {newDateTime?.ToString("dd.MM.yyyy 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.
`ShowFormattedDateTime`	`bool`	`false`	Gets or sets whether to display the formatted date/time value next to the picker. Defaults to `false` as the browser typically shows it within the input field.
`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.
`MinDateTime`	`DateTime?`	`null`	Gets or sets the minimum selectable date and time. Maps to the HTML 'min' attribute. When used within an <code>EditForm</code>, this attribute contributes to the browser's native HTML5 validation.
`MaxDateTime`	`DateTime?`	`null`	Gets or sets the maximum selectable date and time. Maps to the HTML 'max' attribute. When used within an <code>EditForm</code>, this attribute contributes to the browser's native HTML5 validation.
`Step`	`TimeSpan?`	`null` (browser default)	Gets or sets the stepping interval in seconds for the date/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 on 01.01.2000), 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`	`DateTime?`	`null`	Gets or sets the current selected date and time. Uses two-way binding.
`ValidationFor`	`Expression<Func<DateTime?>>?`	`null`	Gets or sets an expression that identifies the field for validation. This is crucial for integrating with Blazor's validation system.
`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<DateTime?>`	-	Event callback for when the `Value` changes. Used for two-way binding.