true-perfect-code
Version: 1.1.69

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

    <div class="bg-light p-4 rounded mb-4">
        <div class="component-description mt-4">
            <h2 class="mb-3">Basic Week Picker with Validation</h2>
            <p>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.</p>
            <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>
        </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="ResetWeekSelection">Reset Week</button>
</EditForm>
@* You may need the using *@
@* @using System.Globalization *@
@* @using System.ComponentModel.DataAnnotations *@
@code {
    // Model for the form to demonstrate validation
    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();

    /// <summary>
    /// Handles the valid form submission for the week picker example.
    /// </summary>
    private void HandleValidSubmitWeek()
    {
        Console.WriteLine($"Validation successful!");
        // The value output here is the value normalized by the component
        // (first day of the week according to the client's CurrentCulture).
        Console.WriteLine($"Selected week: {weekModel.SelectedWeek?.ToShortDateString()}");

        // Example of how you would extract the week number according to the current culture,
        // if you need it on the server or for internal logic:
        if (weekModel.SelectedWeek.HasValue)
        {
            var culture = CultureInfo.CurrentCulture; // Or the culture you want to use
            var weekNumber = culture.Calendar.GetWeekOfYear(
                weekModel.SelectedWeek.Value,
                culture.DateTimeFormat.CalendarWeekRule,
                culture.DateTimeFormat.FirstDayOfWeek
            );
            Console.WriteLine($"Week number according to {culture.Name}: {weekNumber}");
        }

        // Here you could send the data to a service or perform further logic
    }

    /// <summary>
    /// Resets the selected week in the form example.
    /// </summary>
    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 49, 2025
This is a read-only week (current date).

Implementation

<h2 class="mb-3">Displaying Value Only (Current Week)</h2>
<p>This is a read-only week picker displaying the current week.</p>
<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 Value parameter for initial display and the ValueChanged event to react to changes in the selected week, without using @bind-Value. 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

<h2 class="mb-3">Week 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 week, without using <code>@@bind-Value</code>. This is useful if you need to perform custom logic before updating the bound property.</p>
<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>
@* You may need the using *@
@* @using System.Globalization *@
@* @using System.ComponentModel.DataAnnotations *@
@code {
    // For ValueChanged event example
    private DateTime? weekChangedValue = null;
            
    /// <summary>
    /// Event handler for the ValueChanged event of the P11WeekPicker.
    /// Updates the bound value and logs the change to the console.
    /// </summary>
    /// <param name="newWeek">The new nullable DateTime value.</param>
    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 🗙