p11 UI
true-perfect-code
Version: 1.1.69

P11DatePicker Component

The P11DatePicker component provides a native HTML-based date input, leveraging the browser's <input type="date"> element. It offers an accessible and straightforward way for users to select dates, with options for min/max date constraints.
Note: The appearance and user experience of the date picker UI are entirely controlled by the user's browser and operating system, which may lead to visual differences across platforms. The <code>min</code> and <code>max</code> attributes primarily influence HTML5 form validation when used within an <code>EditForm</code>, rather than strictly limiting the visual selection options in the native browser picker.

Basic Date Picker with Validation

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

Please enter your date of birth.

Current Date: not set

Implementation

<EditForm Model="@dateModelForBasicExample" OnValidSubmit="@HandleValidSubmitBasicDate">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="bg-light p-4 rounded mb-4">
        <div class="component-description mt-4">
            <h2 class="mb-3">Basic Date Picker with Validation</h2>
            <p>A simple date picker with default settings and form validation. Try submitting with no selection to see validation errors, or click 'Reset Date' to clear the selection.</p>
            <P11DatePicker Label="Date of Birth"
                           Description="Please enter your date of birth."
                           @bind-Value="dateModelForBasicExample.DateOfBirth"
                           ShowDevelopmentErrors="false"
                           ValidationFor="@(() => dateModelForBasicExample.DateOfBirth)" />
            <p>Current Date: @(dateModelForBasicExample.DateOfBirth?.ToShortDateString() ?? "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="ResetBasicDateSelection">Reset Date</button>
</EditForm>
@* You may need the using *@
@* using System.ComponentModel.DataAnnotations *@
@code {
    // Model for the basic form to demonstrate required validation
    public class DatePickerBasicTestModel
    {
        [Required(ErrorMessage = "Date of birth is required.")]
        public DateTime? DateOfBirth { get; set; } = null;
    }

    private DatePickerBasicTestModel dateModelForBasicExample = new DatePickerBasicTestModel();

    /// <summary>
    /// Handles the valid form submission for the basic date picker example.
    /// </summary>
    private void HandleValidSubmitBasicDate()
    {
        Console.WriteLine($"Validation successful for basic date example!");
        Console.WriteLine($"Selected date: {dateModelForBasicExample.DateOfBirth?.ToShortDateString() ?? "null"}");
        // Further logic here
    }

    /// <summary>
    /// Resets the selected date in the basic form example.
    /// </summary>
    private void ResetBasicDateSelection()
    {
        dateModelForBasicExample = new DatePickerBasicTestModel();
        StateHasChanged();
    }
}

Date Picker with Initial Value and Formatted Display

Date picker with a predefined value (Today) and additional formatted display.

06.12.2025

Current Date: 06.12.2025

Implementation

<h2 class="mb-3">Date Picker with Initial Value and Formatted Display</h2>
<p>Date picker with a predefined value (Today) and additional formatted display.</p>
<P11DatePicker Label="Today's Date"
               @bind-Value="currentDate"
               ShowFormattedDate="true" />
<p>Current Date: @(currentDate?.ToShortDateString() ?? "not set")</p>
@code {
    // Properties for other P11DatePicker examples (not in EditForm)
    private DateTime? currentDate = DateTime.Today;
}

Date Picker with Min/Max Dates and Validation

Date picker that only allows dates in July 2025. Note: While you might be able to *type* a date outside this range, the form validation will prevent submission. Try entering a date in August 2025 and submitting.

Select an appointment in July 2025.

Current Appointment: 15.07.2025

Implementation

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

    <div class="bg-light p-4 rounded mb-4">
        <div class="component-description mt-4">
            <h2 class="mb-3">Date Picker with Min/Max Dates and Validation</h2>
            <p>Date picker that only allows dates in July 2025. Note: While you might be able to *type* a date outside this range, the form validation will prevent submission. Try entering a date in August 2025 and submitting.</p>
            <P11DatePicker Label="Appointment in July 2025"
                           Description="Select an appointment in July 2025."
                           MinDate="@(dateModelForMinMax.MinAllowedDate)"
                           MaxDate="@(dateModelForMinMax.MaxAllowedDate)"
                           @bind-Value="dateModelForMinMax.JulyAppointment"
                           ValidationFor="@(() => dateModelForMinMax.JulyAppointment)" />
            <p>Current Appointment: @(dateModelForMinMax.JulyAppointment?.ToShortDateString() ?? "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="ResetMinMaxDateSelection">Reset Date</button>
</EditForm>
@* You may need the using *@
@* using System.ComponentModel.DataAnnotations *@
@code {
    // Model for the Min/Max form to demonstrate validation
    public class DatePickerMinMaxTestModel
    {
        [Required(ErrorMessage = "An appointment date is required.")]
        // Range attribute for DateTime expects string format "yyyy-MM-dd"
        [Range(typeof(DateTime), "2025-07-01", "2025-07-31", ErrorMessage = "Date must be in July 2025.")]
        public DateTime? JulyAppointment { get; set; } = new DateTime(2025, 7, 15);

        // These properties are passed to the P11DatePicker component for HTML min/max attributes
        public DateTime MinAllowedDate { get; set; } = new DateTime(2025, 7, 1);
        public DateTime MaxAllowedDate { get; set; } = new DateTime(2025, 7, 31);
    }

    private DatePickerMinMaxTestModel dateModelForMinMax = new DatePickerMinMaxTestModel();

    /// <summary>
    /// Handles the valid form submission for the Min/Max date picker example.
    /// </summary>
    private void HandleValidSubmitMinMax()
    {
        Console.WriteLine($"Validation successful for Min/Max date example!");
        Console.WriteLine($"Selected date: {dateModelForMinMax.JulyAppointment?.ToShortDateString() ?? "null"}");
        // Further logic here
    }

    /// <summary>
    /// Resets the selected date in the Min/Max form example.
    /// </summary>
    private void ResetMinMaxDateSelection()
    {
        dateModelForMinMax = new DatePickerMinMaxTestModel();
        StateHasChanged();
    }
}

Disabled Date Picker

A disabled date picker.

Current Date: 01.01.2025

Implementation

<h2 class="mb-3">Disabled Date Picker</h2>
<p>A disabled date picker.</p>
<P11DatePicker Label="Disabled Date"
               @bind-Value="disabledDate"
               Disabled="true" />
<p>Current Date: @(disabledDate?.ToShortDateString() ?? "not set")</p>
@code {
    private DateTime? disabledDate = new DateTime(2025, 1, 1);
}

Date Picker with Required Validation

This date picker is required. Clear the field and submit the form to see the validation error.

Current Date: 13.12.2025

Implementation

<EditForm Model="@dateModelForRequired" OnValidSubmit="@HandleValidSubmitRequired">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="bg-light p-4 rounded mb-4">
        <h2 class="mb-3">Date Picker with Required Validation</h2>
        <p>This date picker is required. Clear the field and submit the form to see the validation error.</p>
        <P11DatePicker Label="Required Date"
                       @bind-Value="dateModelForRequired.RequiredDate"
                       ValidationFor="@(() => dateModelForRequired.RequiredDate)" />
        <p>Current Date: @(dateModelForRequired.RequiredDate?.ToShortDateString() ?? "not set")</p>
    </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="ResetRequiredDateSelection">Reset Date</button>
</EditForm>
@* You may need the using *@
@* using System.ComponentModel.DataAnnotations *@
@code {
    // Model for the Required Validation example (now in EditForm)
    public class DatePickerRequiredTestModel
    {
        [Required(ErrorMessage = "A date is required.")]
        public DateTime? RequiredDate { get; set; } = DateTime.Today.AddDays(7);
    }

    private DatePickerRequiredTestModel dateModelForRequired = new DatePickerRequiredTestModel();

    /// <summary>
    /// Handles the valid form submission for the required date picker example.
    /// </summary>
    private void HandleValidSubmitRequired()
    {
        Console.WriteLine($"Validation successful for required date example!");
        Console.WriteLine($"Selected date: {dateModelForRequired.RequiredDate?.ToShortDateString() ?? "null"}");
        // Further logic here
    }

    /// <summary>
    /// Resets the selected date in the required form example.
    /// </summary>
    private void ResetRequiredDateSelection()
    {
        dateModelForRequired = new DatePickerRequiredTestModel();
        StateHasChanged();
    }
}

Date Picker with Additional Attributes

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

Current Date: 25.12.2025

(Note: 'readonly' attribute is set here. The browser's native date picker pop-up should still function.)

Implementation

<h2 class="mb-3">Date Picker with Additional Attributes</h2>
<p>Date picker with custom attributes and CSS class. Check this in the browser inspector.</p>
<P11DatePicker Label="With Extra Attributes"
               @bind-Value="extraDate"
               @attributes='new Dictionary<string, object> { { "data-purpose", "event-date" }, { "readonly", "true" } }'
               CssClass="date-highlight" />
<p>Current Date: @(extraDate?.ToShortDateString() ?? "not set")</p>
<p class="text-muted">(Note: 'readonly' attribute is set here. The browser's native date picker pop-up should still function.)</p>

<style>
    /* Custom styles to demonstrate the P11DatePicker CssClass parameter */
    .date-highlight {
        padding: 15px;
        background-color: #e3f2fd; /* Ein hellblauer Hintergrund */
        border: 1px solid #1e88e5; /* Ein blauer Rand */
        border-left: 5px solid #1e88e5; /* Ein dickerer blauer Rand links, zur Hervorhebung */
        border-radius: 5px; /* Abgerundete Ecken */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ein leichter Schatten */
    }

        /* Optional: styles for the label and description inside the container */
        .date-highlight .form-label {
            font-weight: 600; /* Halbfett */
            color: #0d47a1; /* Dunkelblauer Text für das Label */
        }

        .date-highlight .form-text {
            font-style: italic;
            color: #555; /* Etwas dunklerer Text für die Beschreibung */
        }

</style>
@code {
    private DateTime? extraDate = new DateTime(2025, 12, 25);
}

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

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

Selected Date: not set

Implementation

<h2 class="mb-3">Date 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, without using <code>@@bind-Value</code>. This is useful if you need to perform custom logic before updating the bound property.</p>
<P11DatePicker Value="dateChangedValue"
               ValueChanged="@((DateTime? newDate) => OnDateChanged(newDate))"
               Label="Monitor Date Changes"
               Description="The date below will update, and a console message will be logged when you select a new date." />
<p>Selected Date: <span class="fw-bold">@(dateChangedValue?.ToShortDateString() ?? "not set")</span></p>
@code {
    // For ValueChanged event example
    private DateTime? dateChangedValue = null;

    /// <summary>
    /// Event handler for the ValueChanged event of the P11DatePicker.
    /// Updates the bound value and logs the change to the console.
    /// </summary>
    /// <param name="newDate">The new nullable DateTime value.</param>
    private void OnDateChanged(DateTime? newDate)
    {
        dateChangedValue = newDate;
        Console.WriteLine($"Date changed to: {newDate?.ToShortDateString() ?? "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.
ShowFormattedDate bool false Gets or sets whether to display the formatted date 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.
MinDate DateTime? null Gets or sets the minimum selectable date. Maps to the HTML 'min' attribute. When used within an <code>EditForm</code>, this attribute contributes to the browser's native HTML5 validation.
MaxDate DateTime? null Gets or sets the maximum selectable date. Maps to the HTML 'max' attribute. When used within an <code>EditForm</code>, this attribute contributes to the browser's native HTML5 validation.
Value DateTime? null Gets or sets the current selected date. 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.
An unhandled error has occurred. Reload 🗙