p11 UI
About

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 />

    <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>

    <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>


using System.ComponentModel.DataAnnotations;

public class DatePickerBasicTestModel
{
    [Required(ErrorMessage = "Date of birth is required.")]
    public DateTime? DateOfBirth { get; set; } = null;
}

private DatePickerBasicTestModel dateModelForBasicExample = new DatePickerBasicTestModel();

private void HandleValidSubmitBasicDate()
{
    Console.WriteLine($"Validation successful for basic date example!");
    Console.WriteLine($"Selected date: {dateModelForBasicExample.DateOfBirth?.ToShortDateString() ?? "null"}");
    // Further logic here
}

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.

08.12.2025

Current Date: 08.12.2025

Implementation


<P11DatePicker Label="Today's Date"
               @bind-Value="currentDate"
               ShowFormattedDate="true" />
<p>Current Date: @(currentDate?.ToShortDateString() ?? "not set")</p>


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 />

    <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>

    <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>


using System.ComponentModel.DataAnnotations;

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();

private void HandleValidSubmitMinMax()
{
    Console.WriteLine($"Validation successful for Min/Max date example!");
    Console.WriteLine($"Selected date: {dateModelForMinMax.JulyAppointment?.ToShortDateString() ?? "null"}");
    // Further logic here
}

private void ResetMinMaxDateSelection()
{
    dateModelForMinMax = new DatePickerMinMaxTestModel();
    StateHasChanged();
}

Disabled Date Picker

A disabled date picker.

Current Date: 01.01.2025

Implementation


<P11DatePicker Label="Disabled Date"
               @bind-Value="disabledDate"
               Disabled="true" />
<p>Current Date: @(disabledDate?.ToShortDateString() ?? "not set")</p>


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: 15.12.2025

Implementation


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

    <P11DatePicker Label="Required Date"
                   @bind-Value="dateModelForRequired.RequiredDate"
                   ValidationFor="@(() => dateModelForRequired.RequiredDate)" />
    <p>Current Date: @(dateModelForRequired.RequiredDate?.ToShortDateString() ?? "not set")</p>

    <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>


using System.ComponentModel.DataAnnotations;

public class DatePickerRequiredTestModel
{
    [Required(ErrorMessage = "A date is required.")]
    public DateTime? RequiredDate { get; set; } = DateTime.Today.AddDays(7);
}

private DatePickerRequiredTestModel dateModelForRequired = new DatePickerRequiredTestModel();

private void HandleValidSubmitRequired()
{
    Console.WriteLine($"Validation successful for required date example!");
    Console.WriteLine($"Selected date: {dateModelForRequired.RequiredDate?.ToShortDateString() ?? "null"}");
    // Further logic here
}

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


<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">@AppState!.T("(Note: 'readonly' attribute is set here. The browser's native date picker pop-up should still function.)")</p>


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


<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>


private DateTime? dateChangedValue = null;
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 🗙