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