Telerik Extensions for ASP.NET MVC

This topic shows how to use the Telerik TimePicker 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.

TimePicker declaration

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

Setting the TimePicker Value

You can use any of the following methods to set the value of the TimePicker:
CopySetting the value from string
<%= Html.Telerik().TimePicker()
        .Name("time")
        .Value("10:30 AM")
%>
CopySetting the value from TimeSpan
<%= Html.Telerik().TimePicker()
        .Name("time")
        .Value(new TimeSpan(10, 30, 0))
%>
CopySetting the value from DateTime
<%= Html.Telerik().TimePicker()
        .Name("time")
        .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["time"] = new TimeSpan(10, 30, 0);

     return View();
}
CopyView
<%= Html.Telerik().TimePicker()
        .Name("time")
        .Value((TimeSpan?)ViewData["time"])
%>
Note
The TimePicker will look in ViewData for an item whose key is the same as the TimePicker's Name. If such an item is found, the TimePicker 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().TimePicker()
        .Name("time") // <- Name is the same as the key in ViewData used in the controller
%>

Getting the TimePicker Value

The following example shows how to get the value of the TimePicker after posting a form.
  1. Make sure the TimePicker is placed within a <form>.
    CopyView
    <% Html.BeginForm("Save", "Home"); %>
    <%= Html.Telerik().TimePicker()
            .Name("time")
            .Value((DateTime?)ViewData["time"])
    %>
    <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 TimePicker (which is "time" in this case):
    CopyController
    public ActionResult Save(DateTime? time)
    {
       // use the 'time' argument
       return View();
    }
Note
The value of the TimePicker is posted as a nullable DateTime object. The date components (year, month, day) of the DateTime are set to today's.