Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxTimeSpanMaskProperties Class

Defines time span mask settings.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public class DxTimeSpanMaskProperties :
    DxMaskPropertiesBase

#Remarks

You can apply time span masks to the Masked Input component. Time span masks allow users to enter only time intervals. Users can navigate between mask sections (such as days, hours, and minutes) and increase or decrease section values with the Up and Down arrow keys, and the mouse wheel.

Time Span Masks

Run Demo: Time Span Masks

You can choose a mask from a number of predefined patterns or use a standard or custom time span format string. To customize mask-related settings, add the DxTimeSpanMaskProperties component to the editor’s markup:

Razor
@using System.Globalization

<MaskedInput @bind-Value="@time" 
            Mask="dd DD hh HH mm MM">
    <DxTimeSpanMaskProperties AllowNegativeValue="false"
                              CaretMode="@MaskCaretMode.Advancing"
                              Culture="Culture"
                              DefaultFocusSection="@TimeSpanSection.Hours"
                              HideAllZeroValueOptionalSections="true"
                              InvalidInputNotificationText="The time interval is invalid."
                              OutOfBoundsValueProcessMode="@TimeSpanOutOfBoundsValueProcessMode.Deny"
                              SelectAllInputMode="@TimeSpanSelectAllInputMode.ResetAllSections"
                              UpdateNextSectionOnCycleChange="true" />
</DxMaskedInput>

@code {
    TimeSpan time new TimeSpan(5, 16, 30, 15, 7);
    CultureInfo Culture = new CultureInfo("fr-FR");
}

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

#Inheritance

See Also