This project is read-only.

Datetime control doesn't seem to work

Apr 12, 2011 at 1:58 PM
I've been unable to get this to work.

I've downloaded version 0.9, unzipped it. Added a reference in my project to MVCControlsToolkit.dll (MVC 3.0 binary).

In the global.asx I added the line:


At the beginning of the Application_Start() method.Before anything else.

I added all the js files that came in the zip file to my /Scripts folder and on my page I did:
@model Mvc30.Models.Person
@using MVCControlsToolkit.Core;
@using MVCControlsToolkit.Controls;

    ViewBag.Title = "Create";


<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery-1.4.4.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MVCControlToolkit.Controls-0.9.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>

@using (Html.BeginForm())

        <div class="editor-label">
            @Html.LabelFor(m => m.DateOfBirth)
        <div class="editor-field">
            @Html.DateTimeFor(m => m.DateOfBirth,DateTime.Now, dateInCalendar : true)
            @Html.ValidationMessageFor(m => m.DateOfBirth)

            <input type="submit" value="Create" />

    @Html.ActionLink("Back to List", "Index")

Nothing too complicated. I just wanted to make it work. The DateOfBirth is of type DateTime.

Everytime I run it, this is what I get instead of the DateTime picker control.


The only thing that is different in my case are the jquery version, I am using jquery.1.4.4 instead of 1.4.1 and 1.4.2 and jquery-ui version 1.8.7 instead of 1.8.6. 

Any ideas why this is not working with MVC 3.0?

 Am I missing something?


Thanks in advance for your help.

Apr 12, 2011 at 4:47 PM

There are various error:

1) The reference to jquery-1.4.4.js is done AFTER the reference to jquery.validate.min.js and jquery.validate.unobtrusive.min. Wrong since the last two uses the jquery- You must move

jquery-1.4.4.js BEFORE jquery.validate.min.js. You can add also globalization support to you jquery calendar by adding :

@Html.JQueryDatePickerGlobalizationScript() just after the reference to jquery-UI. If you do this the calendar will use the settings of you server side culture. 

2) @Html.DateTimeFor(m => m.DateOfBirth,DateTime.Now, dateInCalendar : true) doesn't return the date but an object that you can use to render separately date and time, that is

why you get MVCControlsToolkit.Controls.DateTimeInput`1[Mvc30.Models.Person] Mvc3 just applies to ToString() to this object...resulting in just the name of the type of this object to be written.

The correct way is;

something like:

                @{var DT = Html.DateTime(m => m.DateOfBirth, dateInCalendar : true); }
                    calendarOptions: new CalendarOptions

where I displayed both Date and time. However you can also diplay just the date in a single line with:

Html.DateTime(m => m.DateOfBirth, dateInCalendar : true).DateCalendar(.......

. I added also some calendar reprorted in the examples here:

Apr 18, 2011 at 10:56 AM

frankabbruzzese, thanks a lot for your help.


You were absolutely right!.


I followed your instructions and everything worked. I couldn't make it work with all in a single line as in your last example:

Html.DateTime(m => m.DateOfBirth, dateInCalendar : true).DateCalendar(.......

but that's something I can live without. :-)



Thanks a lot for your help, really appreciated.