Mask Support in Blazor DateTimePicker Component

29 Dec 20222 minutes to read

The masking feature allows users to enter a date and time in the correct format, as specified by the Format property. This helps to ensure that the date and time is entered correctly and can also make it easier for users to understand how to enter the date and time. The EnableMask property in the DateTimePicker component allows you to enable or disable the masking functionality. When enabled, the input field will be displayed as masked with a specific datetime format pattern for entering the date and time.

RAZOR

@using Syncfusion.Blazor.Calendars

<SfDateTimePicker TValue="DateTime?" EnableMask="true" @bind-Value="@Value">
    <DateTimePickerMaskPlaceholder Day="day" Month="month" Year="year" Hour="hour" Minute="minute" Second="second" DayOfWeek="weekday"></DateTimePickerMaskPlaceholder>
</SfDateTimePicker>


@code {
    public DateTime? Value { get; set; } = new DateTime(2022, 12, 11, 11, 30, 00);
}

MaskPlaceholder

The DateTimePickerMaskPlaceholder directive allows you to set custom placeholder text for each segment of the date and time format in a DateTimePicker component. This can be used to provide additional context or instructions to the user about the expected format for the input. To use the directive, include it in the component’s configuration along with the EnableMask property.

The DateTimePickerMaskPlaceholder tag directive has the following properties:

• Day : Specifies the placeholder text for the day (dd) segment of the date value.

• Month : Specifies the placeholder text for the month (MM) segment of the date value.

• Year : Specifies the placeholder text for the year (yy) segment of the date value.

• Hour : Specifies the placeholder text for the hour (hh) segment of the time value.

• Minute : Specifies the placeholder text for the minute (mm) segment of the time value.

• Second: Specifies the placeholder text for the second (ss) segment of the time value.

• DayOfWeek : Specifies the placeholder text for the day of the week (dddd) segment of the date value.

The DateTimePicker component uses placeholder text from the current culture’s resources file for each segment of the date and time format by default. If you want to use custom placeholder text instead, you can specify it using the DateTimePickerMaskPlaceholder directive and its properties.

RAZOR

@using Syncfusion.Blazor.Calendars

<SfDateTimePicker TValue="DateTime?" EnableMask="true" Format="ddd, dd/MM/yyyy hh:mm:ss" @bind-Value="@Value">
    <DateTimePickerMaskPlaceholder Day="day" Month="month" Year="year" Hour="hour" Minute="minute" Second="second" DayOfWeek="weekday"></DateTimePickerMaskPlaceholder>
</SfDateTimePicker>


@code {
    public DateTime? Value { get; set; } = new DateTime(2022, 12, 11, 11, 30, 00);
}

If you do not specify custom placeholder text for any segment of the date and time format, the component will use the default placeholder text from the current culture based resources file for not specified segments.