LgMonthBox

LgMonthBox<TValue> allows you to select a month (and its year). It is part of the date field family (LgDateBox) from which it inherits all behavior: the calendar opens directly at the month level. The bound type can be a date (DateOnly, DateTime, DateTimeOffset, or nullable) or an int / int? — the value is then the month number (1-12), without a year.

<LgMonthBox Label="#BillingMonth" @bind-Value="_model.BillingMonth" />

• Namespace: Lagoon.UI.Components
• Inherits from: LgDateBox<TValue> → LgInputRenderBase<TValue> → LgInputBase<TValue> → LgAriaComponentBase → LgComponentBase
• NuGet package: Lagoon.UI

The field suffix is reserved: the component automatically places the calendar icon there (Suffix / SuffixType are overridden at initialization).

Usage

Demo

Try this component in the Lagoon showcase.

Simple selection

BillingPage.razor

<LgMonthBox Label="#BillingMonth" @bind-Value="_model.BillingMonth" />

BillingPage.razor.cs

public partial class BillingPage : LgPage
{
    private readonly BillingVm _model = new();

    private sealed class BillingVm
    {
        public DateTime? BillingMonth { get; set; }
    }
}

Selection bounds

Min and Max disable months outside the bounds in the calendar.

PeriodPage.razor

<LgMonthBox Label="#Period"
            Min="_minDate"
            Max="_maxDate"
            @bind-Value="_model.Period" />

PeriodPage.razor.cs

public partial class PeriodPage : LgPage
{
    // Current fiscal year: bounds the month selection.
    private readonly DateTime _minDate = new(2026, 1, 1);
    private readonly DateTime _maxDate = new(2026, 12, 31);

    private readonly PeriodVm _model = new();

    private sealed class PeriodVm
    {
        public DateOnly? Period { get; set; }
    }
}

Month only (without year)

Bound to an int?, the component carries only the month number (1-12): year navigation is disabled in the calendar and the display shows only the month.

AnniversaryPage.razor

<LgMonthBox Label="#AnniversaryMonth" @bind-Value="_model.AnniversaryMonth" />

AnniversaryPage.razor.cs

public partial class AnniversaryPage : LgPage
{
    private readonly AnniversaryVm _model = new();

    private sealed class AnniversaryVm
    {
        // int? : only the "which month" information is stored, without year.
        public int? AnniversaryMonth { get; set; }
    }
}

Reacting to value changes

OnChangingAsync (inherited from LgDateBox) is called before assignment and allows canceling the change (args.Cancel); OnChange is called after.

ClosingPage.razor

<LgMonthBox Label="#ClosingMonth"
            OnChangingAsync="OnClosingMonthChangingAsync"
            @bind-Value="_model.ClosingMonth" />

ClosingPage.razor.cs

public partial class ClosingPage : LgPage
{
    private readonly ClosingVm _model = new();

    // Called before the change: refuses an already-validated closing month.
    private Task OnClosingMonthChangingAsync(ChangingEventArgs<DateTime?> args)
    {
        if (args.NewValue < DateTime.Today.AddMonths(-1))
        {
            args.Cancel = true;
            ShowWarning("#ClosingMonthLocked");
        }
        return Task.CompletedTask;
    }

    private sealed class ClosingVm
    {
        public DateTime? ClosingMonth { get; set; }
    }
}

Properties

All component [Parameter] properties, including inherited ones.

Name	Type	Default	Declared in	Description
AssumeNearbyYear	int	20	LgDateBox	Number of years in the future during which a two-digit year is assigned to the current century. A value less than 1 disables this behavior.
DefaultDateTimeKind	DateTimeKind	Unspecified	LgDateBox	DateTimeKind used to create a new DateTime.
DefaultTime	TimeOnly?	null	LgDateBox	Time used to create a new DateTime or DateTimeOffset (midnight if null).
DefaultTimeOffset	TimeSpan?	null	LgDateBox	Time offset used to create a new DateTimeOffset (local time zone offset if null).
DisplayFormat	string	null	LgDateBox	Display format. If null, the short date format of the current culture is used, without the day part (and without the year for an int).
KeyboardDisabled	bool	false	LgDateBox	Disables keyboard input: the value can only be chosen from the calendar.
Max	DateTime?	null	LgDateBox	Latest selectable month; later months are disabled.
Min	DateTime?	null	LgDateBox	Earliest selectable month; earlier months are disabled.
OnChangeDisabled	bool	false	LgDateBox	Disables the DOM onchange event in favor of oninput (used to prevent errors when the control is removed from rendering).
OnChangingAsync	Func<ChangingEventArgs<TValue>, Task>	null	LgDateBox	Callback called before value change; the change can be canceled.
OnFocus	EventCallback<FocusEventArgs>	—	LgDateBox	Callback called when the field receives focus.
Placeholder	string	null	LgDateBox	Hint text displayed when the field is empty.
WeekStart	DayOfWeek	Monday	LgDateBox	First day of the week in the calendar.
Prefix	string	null	LgInputRenderBase	Prefix displayed in the field.
PrefixType	InputLabelType	Text	LgInputRenderBase	Prefix type.
Suffix	string	(calendar icon)	LgInputRenderBase	Suffix displayed in the field. Reserved: the component places the calendar icon there.
SuffixType	InputLabelType	IconName	LgInputRenderBase	Suffix type. Reserved by the component.
AdditionalAttributes	IReadOnlyDictionary<string, object>	null	LgInputBase	Additional HTML attributes applied to the rendered element.
AutoFocus	bool	false	LgInputBase	Gives focus to the field on first render.
ConfirmationMessage	string	null	LgInputBase	Confirmation message displayed before applying a value change.
Container	IInputContainer<TValue>	null	LgInputBase	Internal use: attaches a GridView cell to the field.
CssClass	string	null	LgInputBase	Additional CSS classes.
Disabled	bool	false	LgInputBase	Disables the field.
DisplayName	string	null	LgInputBase	Field name used in input validation error messages.
HideValidationMessage	bool	false	LgInputBase	Hides the validation message below the field.
Label	string	null	LgInputBase	Field label.
LabelContent	RenderFragment	null	LgInputBase	Custom content for the label area.
OnChange	EventCallback<ChangeEventArgs>	—	LgInputBase	Callback called after value change.
OnReset	EventCallback<ChangeEventArgs>	—	LgInputBase	Callback called when the field is reset by the clear button.
PolicyEdit	string	null	LgInputBase	Policy required to edit the field.
PolicyVisible	string	null	LgInputBase	Policy required to display the field.
ReadOnly	bool	false	LgInputBase	Displays the field as read-only.
Required	bool?	null	LgInputBase	Required field. If null, deduced from the [Required] attribute of the bound property.
ResetButton	bool?	null	LgInputBase	Displays the clear button. If null, the application behavior configuration applies.
ResetText	string	null	LgInputBase	Text for the clear button.
ResetTextAriaLabel	string	null	LgInputBase	Accessible label (aria-label) for the clear button.
Tooltip	string	null	LgInputBase	Tooltip.
TooltipIsHtml	bool	false	LgInputBase	Indicates whether the Tooltip content is in HTML format (otherwise plain text).
Value	TValue	—	LgInputBase	Bound value (@bind-Value): date (DateOnly, DateTime, DateTimeOffset, or nullable) or int / int? (month number).
ValueChanged	EventCallback<TValue>	—	LgInputBase	Callback for updating the bound value.
ValueExpression	Expression<Func<TValue>>	—	LgInputBase	Expression identifying the bound property.
AriaLabel	string	null	LgAriaComponentBase	Value of the aria-label attribute.
AriaLabelledBy	string	null	LgAriaComponentBase	Value of the aria-labelledby attribute.

Cascading parameters

LgMonthBox also consumes parameters automatically provided by ancestor components (you don't have to define them): ParentAuthorizeView (LgAuthorizeView) and the editing context of a parent LgEditForm.

Events

Event	Type	Description
OnChangingAsync	Func<ChangingEventArgs<TValue>, Task>	Before value change; args.Cancel = true cancels the change.
OnChange	EventCallback<ChangeEventArgs>	After value change.
OnFocus	EventCallback<FocusEventArgs>	When the field receives focus.
OnReset	EventCallback<ChangeEventArgs>	On reset by the clear button.

Associated enumerations

The InputLabelType enumeration (prefix / suffix) is documented on LgDateBox, the base component of the date family.

Best practices / accessibility

• Bound to a date, the value carries the first day of the month; bound to an int?, it carries only the month number — choose the type based on whether the year matters or not.
• Do not set Suffix / SuffixType: they are overridden by the calendar icon at component initialization.

Complete reference

All parameters (including inherited ones): API Reference — LgMonthBox.

Related components

• LgDateBox — day selection (base component).
• LgWeekBox — week selection.
• LgYearBox — year selection.
• LgGridMonthColumn — month column of an LgGridView.