DxDateEdit<T>.MaskProperties Property

Allows you to customize mask properties for the Date Edit with custom day cells.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment MaskProperties { get; set; }

Property Value

Type	Description
RenderFragment	A render fragment that contains mask properties.

Remarks

The Date Edit supports date-time and date-time offset masks. Add the DxDateTimeMaskProperties or DxDateTimeOffsetMaskProperties component to the editor’s markup to customize mask-related settings. If the markup contains any child elements, such as the DayCellTemplate, place one of these components in the MaskProperties template:

Date-time masks

<DxDateEdit @bind-Date="@DateTimeValue" 
            Mask="@DateTimeMask.ShortDate">
    <DayCellTemplate>
        <span class="text-info">@context.Day.ToString()</span>
    </DayCellTemplate>
    <MaskProperties>
        <DxDateTimeMaskProperties CaretMode="MaskCaretMode.Advancing" />
    </MaskProperties>
</DxDateEdit>

@code{
    DateTime DateTimeValue { get; set; } = DateTime.Today;
}

Date-time offset masks

<DxDateEdit @bind-Date="@DateTimeValue" 
            Mask="@DateTimeMask.ShortDate">
    <DayCellTemplate>
        <span class="text-info">@context.Day.ToString()</span>
    </DayCellTemplate>
    <MaskProperties>
        <DxDateTimeOffsetMaskProperties CaretMode="MaskCaretMode.Advancing" />
    </MaskProperties>
</DxDateEdit>

@code{
    DateTimeOffset DateTimeValue { get; set; } = DateTimeOffset.Today;
}

Refer to the following topic for more information: Mask Settings.