Skip to main content
All docs
V25.1
  • DxTimeSpanMaskProperties Class

    Defines time span mask settings.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    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:

    @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