New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Add custom date mask to the DateInput


Product Telerik WebForms DatePicker for ASP.NET AJAX


How the DatePicker looks like with the EmptyMessage property:

How the DatePicker looks like initially

When the user attempts to add a date via the numerical date value, it will look like this:

How it looks like when a date is typed

In the end, after the input loses focus, the format is applied:

End result


By default, the DateInput of the RadDatePicker control doesn't include this type of masking capability. To fix that, we need to add a custom date mask to the DateInput, so users know the date format.


To achieve the masking functionality, you can use the EmptyMessage and DateFormat properties of the RadDatePicker:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" Width="300px">
    <DateInput runat="server" DateFormat="MM/dd/yyyy" EmptyMessage="__/__/____">
In this article