About

P11WeekPicker Component

The P11WeekPicker component provides a native HTML-based week input, leveraging the browser's <input type="week"> element. It offers an accessible way for users to select a specific week (year and week number), with options for min/max week constraints and seamless integration with Blazor's validation system. It automatically adapts to the application's current culture settings for week calculation.
Note: The appearance and user experience of the week picker UI are entirely controlled by the user's browser and operating system, which may lead to visual differences across platforms. The component internally handles the conversion of the selected week to a DateTime representing the first day of that week, based on CultureInfo.CurrentCulture settings.


Basic Week Picker with Validation

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

(No week selected)
The display adapts to your local language settings.

Currently selected week: No selection

Implementation


<EditForm Model="@weekModel" OnValidSubmit="@HandleValidSubmitWeek">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <P11WeekPicker Label="Select Week"
                   Description="The display adapts to your local language settings."
                   @bind-Value="weekModel.SelectedWeek"
                   MinWeek="weekModel.MinAllowedWeek"
                   MaxWeek="weekModel.MaxAllowedWeek"
                   ShowFormattedWeek="true"
                   ValidationFor="@(() => weekModel.SelectedWeek)" />
    <p>Currently selected week: @(weekModel.SelectedWeek.HasValue ? weekModel.SelectedWeek.Value.ToShortDateString() : "No selection")</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="@ResetWeekSelection">Reset Week</button>
</EditForm>

using System.ComponentModel.DataAnnotations; // Add this using directive

public class WeekPickerTestModel
{
    [Required(ErrorMessage = "Please select a week.")]
    public DateTime? SelectedWeek { get; set; } = null;

    public DateTime MinAllowedWeek { get; set; } = new DateTime(2023, 1, 1);
    public DateTime MaxAllowedWeek { get; set; } = new DateTime(2025, 12, 31);
}

private WeekPickerTestModel weekModel { get; set; } = new WeekPickerTestModel();

private void HandleValidSubmitWeek()
{
    Console.WriteLine($"Validation successful!");
    Console.WriteLine($"Selected week: {weekModel.SelectedWeek?.ToShortDateString()}");

    if (weekModel.SelectedWeek.HasValue)
    {
        var culture = CultureInfo.CurrentCulture;
        var weekNumber = culture.Calendar.GetWeekOfYear(
            weekModel.SelectedWeek.Value,
            culture.DateTimeFormat.CalendarWeekRule,
            culture.DateTimeFormat.FirstDayOfWeek
        );
        Console.WriteLine($"Week number according to {culture.Name}: {weekNumber}");
    }
}

/// Resets the selected week in the form example.
private void ResetWeekSelection()
{
    // Create a new instance of the model to reset all its properties and clear validation state
    weekModel = new WeekPickerTestModel();
    StateHasChanged(); // Force re-render to update UI
}


Displaying Value Only (Current Week)

This is a read-only week picker displaying the current week.

Woche 50, 2025
This is a read-only week (current date).

Implementation


<P11WeekPicker Label="Example with current culture rules"
               Description="This is a read-only week (current date)."
               Value="@DateTime.Today"
               Disabled="true"
               ShowFormattedWeek="true" />

// No specific C# property needed for this example as it uses DateTime.Today directly.
// If you wanted to bind it to a property, it would look like this:
// private DateTime? currentWeekDisplay = DateTime.Today;
// And the Razor would be: @bind-Value="currentWeekDisplay"


Week Picker with ValueChanged Event and Separate Value

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

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

Selected Week: not set

Implementation


<P11WeekPicker @Value="weekChangedValue"
               ValueChanged="@((DateTime? newWeek) => OnWeekChanged(newWeek))"
               Label="Monitor Week Changes"
               Description="The week below will update, and a console message will be logged when you select a new week." />
<p>Selected Week: <span class="fw-bold">@(weekChangedValue?.ToString("yyyy-MM-dd", CultureInfo.CurrentCulture) ?? "not set")</span></p>

private DateTime? weekChangedValue = null;

/// Event handler for the ValueChanged event of the P11WeekPicker.
/// Updates the bound value and logs the change to the console.
private void OnWeekChanged(DateTime? newWeek)
{
    weekChangedValue = newWeek;
    Console.WriteLine($"Week changed to: {newWeek?.ToString("yyyy-MM-dd", CultureInfo.CurrentCulture) ?? "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.
ShowFormattedWeek bool false Gets or sets whether to display the formatted week value (e.g., "Week 10, 2025") 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.
MinWeek DateTime? null Gets or sets the minimum selectable week. Maps to the HTML 'min' attribute (YYYY-Www format). Only the year and week components are considered for comparison.
MaxWeek DateTime? null Gets or sets the maximum selectable week. Maps to the HTML 'max' attribute (YYYY-Www format). Only the year and week components are considered for comparison.
Value DateTime? null Gets or sets the current selected week. Uses two-way binding. Internally, this DateTime will represent the first day of the selected week, normalized according to the CultureInfo.CurrentCulture's CalendarWeekRule and FirstDayOfWeek.
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 🗙