Mask Support in Blazor DatePicker

27 Aug 20261 minute to read

The masking feature helps users enter a date in the correct format by rendering the input as a mask that follows the configured Format property. Set EnableMask to true to enable masking. The default value of EnableMask is false.

  • RAZOR
    • @using Syncfusion.Blazor.Calendars

<SfDatePicker TValue="DateTime?" EnableMask="true" @bind-Value="@Value">
    <DatePickerMaskPlaceholder Day="day" Month="month" Year="year"></DatePickerMaskPlaceholder>
</SfDatePicker>


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

    Blazor DatePicker with EnableMask

    MaskPlaceholder

    The DatePickerMaskPlaceholder directive sets the placeholder text for each segment (day, month, year) of the masked input.

    The DatePickerMaskPlaceholder directive exposes the following properties:

    • Day: Specifies the placeholder text for the day segment of the date value (matches the d or dd format specifier).
    • Month: Specifies the placeholder text for the month segment of the date value (matches the M or MM format specifier).
    • Year: Specifies the placeholder text for the year segment of the date value (matches the yy or yyyy format specifier).

    By default, the Blazor DatePicker loads placeholder text from the current culture’s resources file for each segment. To override the default, specify the segments you want through the DatePickerMaskPlaceholder directive.

  • RAZOR
    • @using Syncfusion.Blazor.Calendars

<SfDatePicker TValue="DateTime?" EnableMask="true" @bind-Value="@Value">
    <DatePickerMaskPlaceholder Day="day" Month="month" Year="year"></DatePickerMaskPlaceholder>
</SfDatePicker>


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

    Blazor DatePicker Mask Support with MaskPlaceholder

    NOTE

    If you do not specify custom placeholder text for a particular segment, the component uses the default placeholder text from the current culture’s resource file for that segment.

    See also