How to use DateTimePicker/Calendar in ASP.NET MVC 3 with Razor (CSHTML) only

[Chints]

Hi Telerik Team

I am having a lot of difficulty trying to start using the DateTimePicker/Calendar object from the Telerik ASP MVC Extensions toolbox kit. I want to REPLACE "@*<select id="Date" style="width:100px"></select>*@" WITH a DateTimePicker/Calendar object

@{
    ViewBag.Title = "Appointment Search";
    Layout = "~/Views/Shared/_PhysioLayout.cshtml";

}

<h2>Appointment Search</h2>

 <h2></h2>
 <fieldset>
 <h2>Please select a start date to generate schedule</h2><h6>Default is today</h6>
@*<select id="Date" style="width:100px">
</select>*@
<h2></h2>
        <fieldset>
        <legend>View By</legend>
        <div><input id="Day" type="radio" /><h4>Day</h4></div>
        <input id="Week" type="radio" /><h4>Week</h4>
        <input id="Month" type="radio" /><h4>Month</h4>
        <h2></h2>
        </fieldset>
</fieldset>

         @Html.ActionLink("Display Appointments", "Index")

     <h2></h2>
     <p>

    @Html.ActionLink("Back to Home", "Index")
</p>

Basically, what I am trying to do, in the program, I am a physiotherapist, trying to search for different appointments that my patients have booked for, online. Instead of choosing the date and time from a drop down combo box, I want to display a DateTimePicker object or Calendar object where I can simply select a date and time and pass the value of date and time across to the controller where I can use it in other places in the program

I tried this method, as Carl Bergenhem displays in his video:

http://tv.telerik.com/watch/aspnet-mvc/getting-started-with-datetimepicker

@(Html.Telerik().DateTimePicker()
.Name("MyDateTimePicker")
.Min(new DateTime(2011,1,1)
.Max(new DateTime(2012,1,1)
.Interval(30)
.Render()

But that only works in View pages that have been made in ASPX, which is not what I want

I also try doing this:

http://www.telerik.com/help/aspnet-mvc/getting-started-using-telerik-extensions-for-asp.net-mvc-in-your-project.html

But after getting to a point...when I type in Html., then "Telerik" doesn't appear in my Intellisense in Microsoft Visual Studio Ultimate 2010

Please suggest a simple tutorial on how to create the datetimepicker/calendar object in a View page that is made in Razor (CSHTML) in ASP.NET MVC 3. And also how to pass the values from there to a controller

Thank You

C.Patel
Information Systems
University of The Witwatersrand
South Africa

[Dean]

No response yet more than 2 months since posted? The video is so simple it is of no use in learning
1. how to pass the selected value to an ActionMethod
2. how to use the DatePicker for date only (no time)
3. how to bind a database value or model property to the DatePicker

The documentation hasn't been updated for MVC 3 yet (although may mostly apply to both) and has holes:
1. some documentation/example text was obviously copy-pasted but not edited (ie, using keyword "last" has text from keyword "next" but "next" wasn't edited to say "last"
2. example code has little or no explained (ie, Passing Additional arguments to ActionMethod when using ComboBox only shows code - no explanation of what things mean, such as e.data, customParam, and "customValue":

function onComboBoxDataBinding(e) {
        e.data = $.extend({}, e.data, { customParam: "customValue"});
    }

It seems documentation was thrown together just to say it exists. Very disappointed with it.

[Georgi Krustev]

Hello Dean,

 
Although around 95% of the forum posts are handled by Telerikers, the response to the forums is not 100% guaranteed. You can find more information here.

For the first question, I believe that you can find more information here as it is related with ASP.NET MVC itself. If you can send value of the simple Html.TextBox() to the Action method, then you can use the same approach with the DatePicker UI component.

The DatePicker UI component uses INPUT element to send its content to the server. So if the value, which is send to the server, is "3/22/2010" then the time will be zero. You can test it with simple INPUT element and action method which has DateTime argument.

You can use either the Value() method of the DatePicker or the DatePickerFor extension. The native Html extensions of the ASP.NET MVC also provides strongly typed Html extensions. If you can bind Html.TextBoxFor Html extension to value from the datebase, then you can use the same approach using DatePicker UI component.

As to the documentation, we work continuously to updated it. 
#1: Could you please draw attention where is the incorrect text in order to fix it?

#2: We try to provide self-explanatory code samples. In this case e.data is JSON, which will be send to the Action method used to bound the combobox. $.extend is a jQuery method. customParam: is the argument, which the Action method expects and the "customValue" is the value, which we need to send to the server. More information about JSON you can find here.

Best regards,
Georgi Krustev
the Telerik team

[Marc]

Although this topic hasn't been touched in a while, I ran into similar issues to the OP and the second poster, so I'm going to share the answers that I came across - Hopefully this helps out someone in the future.

@Chints

You probably want to make an Editor Template for Dates, which would involve making an EditorTemplates Folder in the Views->Shared folder, and then creating a CSHTML file called "DateTime.cshtml". This view will look kind of like the following:

@using Telerik.Web.Mvc.UI
@model System.DateTime?

@{ Html.Telerik().DateTimePicker().Value(Model > DateTime.MinValue ? Model : DateTime.Today).Render(); }

Then replace your input with an @Editorfor a DateTime field from your model. It will automatically be replaced with with your editor template (Which will be a DateTimepicker in this case).

For more details on the topic of Editor Templates, refer to Brad Wilson's Blog Post which covers templating in MVC in general (Although it doesn't use Razor Syntax).

@Dean
So, your three concerns in order were:
1. how to pass the selected value to an ActionMethod
2. how to use the DatePicker for date only (no time)
3. how to bind a database value or model property to the DatePicker

Georgi has a fairly comprehensive set of answers, but hopefully this adds some clarity. . .
1. how to pass the selected value to an ActionMethod
As Georgi mentioned, this is more of a function of MVC than of Telerik - You either encapsulate your controls in a form and submit them with the form, or pass the value through with the URL Route Values. Another decent site for learning such a thing would be here.

2. how to use the DatePicker for date only (no time)
As Georgi mentioned, the Telerik Datepicker control only passes a date, with time set to zero. If you need a fast implementation of this, you can use the editor template block I posted above, and just change it from a DateTimePicker to just a DatePicker. It will render out and return a value only for the date component.

3. how to bind a database value or model property to the DatePicker
The easiest way I've found to do this is to bind a DateTime property to the model you're using for your view, and then referencing that model in an EditorFor, as follows:

@Html.EditorFor(model => model.MyDate)

If MyDate is a DateTime, it will automatically replace it with the Editor Template.

@Georgi
Dean does have a legitimate point in saying that the Telerik Documentation is a little difficult to read in some areas, for example the MVC grid demos barely mention that the Date.cshtml is a Template - If you don't already know what you're looking at, you probably won't be able to figure it out. Additionally, most of the documentation is fairly far from entry level friendly, it mostly assumes that you know your way around the framework - The datepicker is a great example here, as for people that don't already know how to implement a jQuery object, it's a little bit ambiguous in how you actually render the object to play with, let alone getting it to behave in a customized manner. While it might seem obvious from an experienced perspective, it probably wouldn't hurt to link offsite to the concepts being applied in some cases.