Class DateTimePickerMaskPlaceholder

Provides configuration for placeholder text to be displayed in a masked SfDateTimePicker<TValue> control, based on the Format, until the user enters a value.

Inheritance
System.Object
MaskPlaceholder
DatePickerMaskPlaceholder
DateTimePickerMaskPlaceholder
Inherited Members
Namespace: Syncfusion.Blazor.Calendars
Assembly: Syncfusion.Blazor.dll
Syntax
public class DateTimePickerMaskPlaceholder : DatePickerMaskPlaceholder
Remarks

The DateTimePickerMaskPlaceholder class enables customization of day, month, year, hour, minute, second, and day-of-week placeholder text in the SfDateTimePicker<TValue> input mask. Its properties are effective only when EnableMask is set to true.

This class inherits from DatePickerMaskPlaceholder, which in turn inherits from MaskPlaceholder, providing comprehensive placeholder customization for all date and time segments. Unlike DatePickerMaskPlaceholder, this class is specifically designed for datetime inputs that include time components (hour, minute, second) in addition to date components.

The placeholder text helps users understand the expected input format for each segment of the datetime mask, improving user experience and reducing input errors. Common use cases include forms requiring precise datetime input, scheduling applications, and data entry systems with strict datetime formatting requirements.

Examples

This example demonstrates basic usage of DateTimePickerMaskPlaceholder with custom placeholders for all datetime segments:

<SfDateTimePicker TValue="DateTime" EnableMask="true" Format="MM/dd/yyyy hh:mm:ss tt">
    <DateTimePickerMaskPlaceholder 
        Day="dd" 
        Month="MM" 
        Year="yyyy" 
        Hour="hh" 
        Minute="mm" 
        Second="ss" />
</SfDateTimePicker>

This example shows usage with day-of-week placeholder in a comprehensive datetime format:

<SfDateTimePicker TValue="DateTime?" EnableMask="true" Format="dddd, MMMM dd, yyyy h:mm tt">
    <DateTimePickerMaskPlaceholder 
        DayOfWeek="dddd" 
        Month="MMMM" 
        Day="dd" 
        Year="yyyy" 
        Hour="h" 
        Minute="mm" />
</SfDateTimePicker>

This example demonstrates usage in a data binding scenario with validation:

@using System.ComponentModel.DataAnnotations

<EditForm Model="appointment">
<DataAnnotationsValidator />


&lt;SfDateTimePicker @bind-Value=&quot;appointment.ScheduledTime&quot; 
                  EnableMask=&quot;true&quot; 
                  Format=&quot;MM/dd/yyyy HH:mm&quot;
                  Placeholder=&quot;Select appointment time&quot;>
    &lt;DateTimePickerMaskPlaceholder 
        Month=&quot;month&quot; 
        Day=&quot;day&quot; 
        Year=&quot;year&quot; 
        Hour=&quot;hour&quot; 
        Minute=&quot;min&quot; />
&lt;/SfDateTimePicker>

&lt;ValidationMessage For=&quot;@(() => appointment.ScheduledTime)&quot; />



</EditForm>


@code {
private AppointmentModel appointment = new();


public class AppointmentModel
{
    [Required(ErrorMessage = &quot;Appointment time is required&quot;)]
    public DateTime ScheduledTime { get; set; } = DateTime.Now;
}



}

Constructors

DateTimePickerMaskPlaceholder()

Declaration
public DateTimePickerMaskPlaceholder()