Telerik Extensions for ASP.NET MVC

This topic shows how to use the Telerik DateTimePicker 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 Grid UI component).
  • All required JavaScript and CSS files are properly copied to your project. This is outlined in here - steps 4 and 5.

DateTimePicker declaration

The following example shows how to add the DateTimePicker UI component to an existing ASP.NET MVC view:
CopyDateTimePicker Declaration
<%= Html.Telerik().DateTimePicker()
        .Name("dateTime")
        .Value("10/10/2010 10:30")
%>
Here is how the DateTimePicker UI component would look like in the browser using this configuration:
Date Time Picker Introduction

Setting the DateTimePicker Value

You can use any of the following methods to set the value of the datetimepicker:
CopySetting the value from string
<%= Html.Telerik().DateTimePicker()
        .Name("dateTime")
        .Value("10/10/2010 10:30")
%>
CopySetting the value from DateTime
<%= Html.Telerik().DateTimePicker()
        .Name("dateTime")
        .Value(DateTime.Now)
%>
In a real world scenario the value would be retrieved from a backend store (e.g. a database) and then passed from the controller to the view via ViewData:
CopyController
public ActionResult Index()
{
     ViewData["dateTime"] = new DateTime(2010, 10, 10, 10, 30, 0);

     return View();
}
CopyView
<%= Html.Telerik().DateTimePicker()
        .Name("dateTime")
        .Value((DateTime?)ViewData["dateTime"])
%>
Note
The DateTimePicker will look in ViewData for an item whose key is the same as the DateTimePicker's Name. If such an item is found, the component will use it as its value. This is the case in the aforementioned example. So it could be rewritten like this:
CopyAutomatic value setting from ViewData
<%= Html.Telerik().DateTimePicker()
        .Name("dateTime") // <- Name is the same as the key in ViewData used in the controller
%>

Getting the DateTimePicker Value

The following example shows how to get the value of the datetimepicker after posting a form.
  1. Make sure the datetimepicker is placed within a <form>.
    CopyView
    <% Html.BeginForm("Save", "Home"); %>
    <%= Html.Telerik().DateTimePicker()
            .Name("dateTime")
            .Value((DateTime?)ViewData["dateTime"])
    %>
    <input type="submit" value="Save" />
    <% Html.EndForm(); %>
  2. In your controller add an action method which has a DateTime? parameter named after the Name of the datetimepicker (which is "dateTime" in this case):
    CopyController
    public ActionResult Save(DateTime? dateTime)
    {
       // use the 'dateTime' parameter
       return View();
    }
Note
The value of the datetimepicker is posted as a nullable DateTime object.