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:

MVCControlsToolkit.Core.Extensions.Register();

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";
}

<h2>Create</h2>

<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())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Person</legend>


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

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>


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.

MVCControlsToolkit.Controls.DateTimeInput`1[Mvc30.Models.Person]

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.

Coordinator
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:

<div>
                @{var DT = Html.DateTime(m => m.DateOfBirth, dateInCalendar : true); }
                   <table>
                   <tr>
                   <td>
                   @DT.DateCalendar(
                    calendarOptions: new CalendarOptions
                    {
                         ChangeYear=true,
                         ChangeMonth=true
                    })
                    
                    </td>
                    <td>
                    @DT.Time() 
                    </td>
                    </tr>
                    </table>
                </div>

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 options...as reprorted in the examples here: http://mvccontrolstoolkit.codeplex.com/wikipage?title=DateTimeInput%20and%20DateRange%20attribute



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.