Class MaskPlaceholder

Provides customizable text placeholders for different input segments (such as day, month, year, hour, minute, second, and day of week) in masked date and time components. These placeholders offer hints or instructions until the user provides input, improving usability and accessibility.

Inheritance

System.Object

MaskPlaceholder

DatePickerMaskPlaceholder

TimePickerMaskPlaceholder

Namespace: Syncfusion.Blazor.Calendars

Assembly: Syncfusion.Blazor.dll

Syntax

public class MaskPlaceholder : OwningComponentBase

Remarks

The MaskPlaceholder class properties are effective when the EnableMask property is enabled. This allows you to guide users about the expected input format for each segment in masked calendar editors.

Examples

This example shows how to apply mask placeholders to the SfDatePicker<TValue>:

<SfDatePicker EnableMask="true">
    <MaskPlaceholder Day="dd" Month="mm" Year="yyyy" Hour="hh" Minute="mm" Second="ss" />
</SfDatePicker>

Constructors

MaskPlaceholder()

Declaration

public MaskPlaceholder()

Properties

Day

Gets or sets the text displayed as a hint or placeholder for the day segment of the date input until the user enters a value.

Declaration

public string Day { get; set; }

Property Value

Type	Description
System.String	A string value representing the placeholder text for the day segment. The default value is null.

Remarks

Typically used with input fields utilizing a date mask constrained by Format; for instance, mm/dd/yyyy where dd is for the day. Set Day to a value like dd to indicate the required format for users.

Examples

<SfDatePicker EnableMask="true">
    <MaskPlaceholder Day="dd" />
</SfDatePicker>

DayOfWeek

Gets or sets the text displayed as a hint or placeholder for the day of week segment of a datetime input until the user enters a value.

Declaration

public string DayOfWeek { get; set; }

Property Value

Type	Description
System.String	A string value for the day of week segment. The default value is null.

Remarks

Useful for formats like dddd,dd/mm/yyyy, where dddd is the day of the week. Assign DayOfWeek to dddd for weekday input clarity.

Examples

<SfDatePicker EnableMask="true">
    <MaskPlaceholder DayOfWeek="dddd" />
</SfDatePicker>

Hour

Gets or sets the text displayed as a hint or placeholder for the hour segment of a datetime input until the user enters a value.

Declaration

public string Hour { get; set; }

Property Value

Type	Description
System.String	A string representing the placeholder for the hour segment. The default value is null.

Remarks

Used for input masks like mm/dd/yyyy hh:mm, where hh is the hour. Set Hour to hh for user guidance in the time segment.

Examples

<SfDatePicker EnableMask="true">
    <MaskPlaceholder Hour="hh" />
</SfDatePicker>

Minute

Gets or sets the text displayed as a hint or placeholder for the minute segment of a datetime input until the user enters a value.

Declaration

public string Minute { get; set; }

Property Value

Type	Description
System.String	A string indicating the placeholder text for the minute segment. The default value is null.

Remarks

Used for input masks such as mm/dd/yyyy hh:mm, where mm refers to minutes. Setting Minute to mm clarifies the input for the minute portion of the field.

Examples

<SfDatePicker EnableMask="true">
    <MaskPlaceholder Minute="mm" />
</SfDatePicker>

Month

Gets or sets the text displayed as a hint or placeholder for the month segment of the date input until the user enters a value.

Declaration

public string Month { get; set; }

Property Value

Type	Description
System.String	A string that represents the placeholder text for the month segment. The default value is null.

Remarks

Used with input fields with masked formatting such as mm/dd/yyyy, where mm is the month segment. Set the Month property to display the desired placeholder for users.

Examples

<SfDatePicker EnableMask="true">
    <MaskPlaceholder Month="mm" />
</SfDatePicker>

Second

Gets or sets the text displayed as a hint or placeholder for the second segment of a datetime input until the user enters a value.

Declaration

public string Second { get; set; }

Property Value

Type	Description
System.String	A string specifying the placeholder text for the second segment. The default is null.

Remarks

Used in scenarios where the mask includes seconds, as in mm/dd/yyyy hh:mm:ss with ss for the seconds segment. Set Second to ss for user clarity.

Examples

<SfDatePicker EnableMask="true">
    <MaskPlaceholder Second="ss" />
</SfDatePicker>

Year

Gets or sets the text displayed as a hint or placeholder for the year segment of the date input until the user enters a value.

Declaration

public string Year { get; set; }

Property Value

Type	Description
System.String	A string that represents the placeholder text for the year segment. The default value is null.

Remarks

Used when the input is masked for an expected year format such as mm/dd/yyyy where yyyy is the year. Assign Year as yyyy for clear formatting guidance.

Examples

<SfDatePicker EnableMask="true">
    <MaskPlaceholder Year="yyyy" />
</SfDatePicker>