P11MonthPicker Component

The P11MonthPicker component provides a native HTML-based month input, leveraging the browser's <input type="month"> element. It offers a straightforward and accessible way for users to select a month and year, with options for min/max month constraints and seamless integration with Blazor's validation system.

Note: The appearance and user experience of the month picker UI are entirely controlled by the user's browser and operating system, which may lead to visual differences across platforms. Only the year and month parts of the selected date are relevant for this component.

Basic Month Picker

A simple month picker with default settings.

Project Start Month

Select the project's start month.

Current Month: not set

Implementation


<P11MonthPicker Label="Project Start Month"
                Description="Select the project's start month."
                @bind-Value="projectStartMonth"
                ShowDevelopmentErrors="false" />
<p>Current Month: @(projectStartMonth?.ToString("MMMM yyyy", CultureInfo.CurrentCulture) ?? "not set")</p>


private DateTime? projectStartMonth = null;

Month Picker with Initial Value and Formatted Display

Month picker with a predefined value (e.g., Next Month) and additional formatted display.

Billing Month

Januar 2026

Current Month: Januar 2026

Implementation


<P11MonthPicker Label="Billing Month"
                @bind-Value="billingMonth"
                ShowFormattedMonth="true" />
<p>Current Month: @(billingMonth?.ToString("MMMM yyyy", CultureInfo.CurrentCulture) ?? "not set")</p>


private DateTime? billingMonth = DateTime.Today.AddMonths(1);

Month Picker with Min/Max Months

Month picker that only allows months in the year 2025.

Budget Month 2025

Select a month in the year 2025.

Current Month: Juni 2025

Implementation


<P11MonthPicker Label="Budget Month 2025"
                Description="Select a month in the year 2025."
                MinMonth="@(new DateTime(2025, 1, 1))"
                MaxMonth="@(new DateTime(2025, 12, 1))"
                @bind-Value="budgetMonth2025" />
<p>Current Month: @(budgetMonth2025?.ToString("MMMM yyyy", CultureInfo.CurrentCulture) ?? "not set")</p>


private DateTime? budgetMonth2025 = new DateTime(2025, 6, 1);

Disabled Month Picker

A disabled month picker.

Disabled Report Month

Current Month: Januar 2024

Implementation


<P11MonthPicker Label="Disabled Report Month"
                @bind-Value="disabledReportMonth"
                Disabled="true" />
<p>Current Month: @(disabledReportMonth?.ToString("MMMM yyyy", CultureInfo.CurrentCulture) ?? "not set")</p>


private DateTime? disabledReportMonth = new DateTime(2024, 1, 1);

Month Picker with Required Validation (Conceptual)

This month picker is conceptually required. Note: For actual validation to work, this component must be placed within an EditForm and use DataAnnotationsValidator. This example demonstrates the binding for a required field.

Required Report Month

Current Month: März 2025

Implementation


<P11MonthPicker Label="Required Report Month"
                @bind-Value="requiredReportMonth"
                ValidationFor="@(() => requiredReportMonth)" />
<p>Current Month: @(requiredReportMonth?.ToString("MMMM yyyy", CultureInfo.CurrentCulture) ?? "not set")</p>


// In a real application, this property would be part of a model
// and decorated with [Required] for validation within an EditForm.
private DateTime? requiredReportMonth = new DateTime(2025, 3, 1);

Month Picker with Additional Attributes

Month picker with custom attributes and CSS class. Check this in the browser inspector.

Month with Extra Attributes

Current Month: September 2025

Implementation


<P11MonthPicker Label="Month with Extra Attributes"
                @bind-Value="extraMonth"
                @attributes='new Dictionary<string, object> { { "data-fiscal-period", "Q3" }, { "tabindex", "12" } }'
                CssClass="month-highlight" />
<p>Current Month: @(extraMonth?.ToString("MMMM yyyy", CultureInfo.CurrentCulture) ?? "not set")</p>


private DateTime? extraMonth = new DateTime(2025, 9, 1);

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

Monitor Month Changes

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

Selected Month: not set

Implementation


<P11MonthPicker @Value="monthChangedValue"
                ValueChanged="@((DateTime? newMonth) => OnMonthChanged(newMonth))"
                Label="Monitor Month Changes"
                Description="The month below will update, and a console message will be logged when you select a new month." />
<p>Selected Month: <span class="fw-bold">@(monthChangedValue?.ToString("MMMM yyyy", CultureInfo.CurrentCulture) ?? "not set")</span></p>


private DateTime? monthChangedValue = null;

private void OnMonthChanged(DateTime? newMonth)
{
    monthChangedValue = newMonth;
    Console.WriteLine($"Month changed to: {newMonth?.ToString("MMMM yyyy", 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.
`ShowFormattedMonth`	`bool`	`false`	Gets or sets whether to display the formatted month value 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.
`MinMonth`	`DateTime?`	`null`	Gets or sets the minimum selectable month. Maps to the HTML 'min' attribute. Only the year and month components of the `DateTime` are considered for comparison. The day component will be internally set to 1 for HTML value formatting.
`MaxMonth`	`DateTime?`	`null`	Gets or sets the maximum selectable month. Maps to the HTML 'max' attribute. Only the year and month components of the `DateTime` are considered for comparison. The day component will be internally set to 1 for HTML value formatting.
`Value`	`DateTime?`	`null`	Gets or sets the current selected month. Uses two-way binding. The day component of the `DateTime` will always be normalized to 1 internally.
`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.