LgWeekBox

LgWeekBox<TValue> allows you to select a week. It is part of the date field family (LgDateBox) from which it inherits all behavior: the calendar selects an entire week and the field displays the week number. The bound type can be a standard date (DateOnly, DateTime, DateTimeOffset or nullable) or the dedicated WeekYear type, which carries the ISO week number and year.

<LgWeekBox Label="#DeliveryWeek" @bind-Value="_model.DeliveryWeek" />

• 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 overwritten at initialization).

Usage

Demo

Try this component in the Lagoon showcase.

Simple selection

DeliveryPage.razor

<LgWeekBox Label="#DeliveryWeek" @bind-Value="_model.DeliveryWeek" />

DeliveryPage.razor.cs

public partial class DeliveryPage : LgPage
{
    private readonly DeliveryVm _model = new();

    private sealed class DeliveryVm
    {
        public DateTime? DeliveryWeek { get; set; }
    }
}

Week and year with WeekYear

Bound to a WeekYear, the component directly handles the ISO week number / year pair, without going through a date.

ProductionPage.razor

<LgWeekBox Label="#ProductionWeek" @bind-Value="_model.ProductionWeek" />

ProductionPage.razor.cs

public partial class ProductionPage : LgPage
{
    private readonly ProductionVm _model = new();

    private sealed class ProductionVm
    {
        // WeekYear? : carries the ISO week number and year, without a specific day.
        public WeekYear? ProductionWeek { get; set; }
    }
}

First day of the week and bounds

WeekStart changes the first day of the week (Monday by default); Min and Max bound the selection.

SchedulePage.razor

<LgWeekBox Label="#ScheduledWeek"
           WeekStart="DayOfWeek.Sunday"
           Min="_minDate"
           Max="_maxDate"
           @bind-Value="_model.ScheduledWeek" />

SchedulePage.razor.cs

public partial class SchedulePage : LgPage
{
    // Planning horizon: bounds the week selection calendar.
    private readonly DateTime _minDate = new(2026, 1, 1);
    private readonly DateTime _maxDate = new(2026, 12, 31);

    private readonly ScheduleVm _model = new();

    private sealed class ScheduleVm
    {
        public DateOnly? ScheduledWeek { get; set; }
    }
}

React to value changes

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

MaintenancePage.razor

<LgWeekBox Label="#MaintenanceWeek"
           OnChangingAsync="OnWeekChangingAsync"
           @bind-Value="_model.MaintenanceWeek" />

MaintenancePage.razor.cs

public partial class MaintenancePage : LgPage
{
    private readonly MaintenanceVm _model = new();

    // Called before the change: rejects a week that has already passed.
    private Task OnWeekChangingAsync(ChangingEventArgs<DateTime?> args)
    {
        if (args.NewValue < DateTime.Today)
        {
            args.Cancel = true;
            ShowWarning("#WeekInPast");
        }
        return Task.CompletedTask;
    }

    private sealed class MaintenanceVm
    {
        public DateTime? MaintenanceWeek { get; set; }
    }
}

Properties

All [Parameter] properties of the component, including inherited ones.

Name	Type	Default	Declared in	Description
AssumeNearbyYear	int	20	LgDateBox	Number of years in the future during which a year entered on two digits is attached 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 timezone offset if null).
DisplayFormat	string	null	LgDateBox	Display format. Has no effect on the display of the week number.
KeyboardDisabled	bool	false	LgDateBox	Disables keyboard input: the value can only be chosen from the calendar.
Max	DateTime?	null	LgDateBox	Latest selectable week; later dates are disabled.
Min	DateTime?	null	LgDateBox	Earliest selectable week; earlier dates are disabled.
OnChangeDisabled	bool	false	LgDateBox	Disables the DOM onchange event in favor of oninput (used to avoid errors when the control is removed from rendering).
OnChangingAsync	Func<ChangingEventArgs<TValue>, Task>	null	LgDateBox	Callback called before the value change; the change can be canceled there.
OnFocus	EventCallback<FocusEventArgs>	—	LgDateBox	Callback called when the field receives focus.
Placeholder	string	null	LgDateBox	Placeholder text displayed when the field is empty.
WeekStart	DayOfWeek	Monday	LgDateBox	First day of the week (used for calculating the week number and displaying the calendar).
Prefix	string	null	LgInputRenderBase	Prefix displayed in the field.
PrefixType	InputLabelType	Text	LgInputRenderBase	Type of the prefix.
Suffix	string	(calendar icon)	LgInputRenderBase	Suffix displayed in the field. Reserved: the component places the calendar icon there.
SuffixType	InputLabelType	IconName	LgInputRenderBase	Type of the suffix. 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 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 the 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, inferred 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 of the clear button.
ResetTextAriaLabel	string	null	LgInputBase	Accessible label (aria-label) of 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 WeekYear / WeekYear?.
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

LgWeekBox also consumes parameters automatically provided by ancestor components (you don't need to define them): ParentAuthorizeView (LgAuthorizeView) and the edit context from a parent LgEditForm.

Events

Event	Type	Description
OnChangingAsync	Func<ChangingEventArgs<TValue>, Task>	Before the value change; args.Cancel = true cancels the change.
OnChange	EventCallback<ChangeEventArgs>	After the value change.
OnFocus	EventCallback<FocusEventArgs>	When the field receives focus.
OnReset	EventCallback<ChangeEventArgs>	When 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

• Use WeekYear? when the business logic reasons in weeks: the week/year pair is carried as-is, without an arbitrary day. When bound to a date, the value is reduced to the selected week (reference day of the week).
• Do not define Suffix / SuffixType: they are overwritten by the calendar icon at component initialization.

Complete reference

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

Related components

• LgDateBox — day selection (base component).
• LgMonthBox — month selection.
• LgYearBox — year selection.
• LgGridWeekColumn — week column in an LgGridView.