Telerik Extensions for ASP.NET MVC

This topic shows how to use Telerik DatePicker for ASP.NET MVC in an ASP.NET MVC application.

Important

All Telerik UI components need a ScriptRegistrar component in order to output their JavaScript objects and register their JavaScript files. The ScriptRegistrar component should be defined *after* all other UI components in the page. If you create the components on the client-side and do not use the MVC extensions, you need to manually register all requried JavaScript files. For further information check this help topic (Step 4 - Register Scripts)

Prerequisites

Before proceeding make sure that:
  • You have all the required components installed.
  • Make sure that your ASP.NET MVC project refers the Telerik.Web.Mvc.dll assembly and you have a ScriptRegistrar and a StyleSheetRegistrar defined in your application (either in the master page or in the view where you are going to use the datepicker).
  • All required JavaScript and CSS files are properly copied to your project. This is outlined in here - steps 4 and 5.

DatePicker definition

The DatePicker is a component, which renders regular text input and a button. The button is allowed by default and it opens the calendar, which is entirely created on the client-side. Here is how to define a simple datepicker:

CopyView
<%= Html.Telerik().DatePicker()
        .Name("DatePicker")
%>

And now the explanation of that code:

  • The Name is used to specify the unique name of the datepicker which is later output as the id HTML attribute and used by Telerik UI. Setting the name is mandatory and exception would be thrown otherwise.
  • DatePicker will be created with default values for the MinDate(DateTime) and MaxDate(DateTime), which are respectively 31/12/1899 and 1/1/2100.

Here is the result of the aforementioned code:

See Also