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