Setting a DateTime value

Jun 8, 2011 at 8:50 AM

What is the preferred method for setting a date in DateTimeFor control from Javascript?  There are a lot of input boxes generated, most hidden, and I'm not sure what I need to populate to get a date in there.

My example is that I do an AJAX call to the server which returns a Json object that contains some default dates on it.  I need to get the date from that object and set the DateTime boxes.  I tried using $.('#MyDateBox').val(new Date()) as an example but it didn't set it.



Jun 8, 2011 at 12:24 PM

No you cannot access the pieces a server control is composed of manually. There is a standard way to set and get the values of simple sever controls(here simple menas they are not composed by several items, but display or edit a single value) that are composed of several html parts:

function MvcControlsToolkit_<ControlType>_Set(sorg, value, format, valueType)


function MvcControlsToolkit_<ControlType>_Get(sorg, valueType)


where <ControType> is the the type of control.  For the controls we have at moment in the Mvc Controls Toolkit<ControType> may have the following values:

  • DateTimeInput for the date time control
  • TypedTextBox for the TypedTextBox
  • TypedEditDisplay for the EditDisplay

thus in the case of DateTime we have:

function MvcControlsToolkit_DateTimeInput_Set(sorg, value, format, valueType) //value must be a javascript date object

function MvcControlsToolkit_DateTimeInput_Get(sorg, valueType) //return a javascript date object

Now  the parameters:

  • sorg is the DOM element working as representative of the whole control. I explain in a short time how to get it.
  • valueType is a javascript constant specifying the original dotnet datatype it can be one of the value listed here: In the case of the date input it must be: MvcControlsToolkit_DataType_DateTime. You can use the name directly since it is defined in the js file.
  • value is the value to set the control to and must be the javascript equivalent of the valueType specified as parameter. In the case of date input it must be a javascript date object. 
  • format is the the display format to be used. It is relevant for TypedTextBox and TypedEditDisplay, while in the case of the date input you can pass any value, since formatting is standard. If you are interested about possible value for the format string see here: (however it is not required in the case of dates).

The sorg element used depends on the type of server control. Below I list how to get the id of the sorg element for the various server controls. Once you compute the name on the sever you can inject it in some javascript, and once on the client you can retrive the sorg element from its id with document,getElementById(id):

  • DateTimeInput: Html.PrefixedId(m => m.MyDateTime) + "_Hidden" or Html.StandardIdFor(m => m.MyDateTime) + "_Hidden" or Html.PrefixedId("MyDateTime") + "_Hidden";
  • TypedTextBox: Html.PrefixedId(m => m.MyProperty) + "_hidden" or Html.StandardIdFor(m => m.MyProperty) + "_hidden" or Html.PrefixedId("MyProperty") + "_hidden";
  • TypedEditDisplay: Html.PrefixedId(m => m.MyProperty)  or Html.StandardIdFor(m => m.MyProperty)  or Html.PrefixedId("MyProperty") ;




Jun 8, 2011 at 10:34 PM


I still can't get the date to set for me.  I noticed that I had to use a "___Hidden" to get the element since there were 3 underscores not the 1 when the element was rendered.  Checking the DOM I can see the Year/Month/Day being updated with values but the output is still blank.  E.g. I have a field TransactionDate and the textbox TransactionDate___Calendar is empty even after calling the method as follows:

var tid = '@Html.PrefixedId("TransactionDate")___Hidden';
var td = "new " + result.TransactionDate.replace('/','').replace('/','');
MvcControlsToolkit_DateTimeInput_Set(document.getElementById(tid), eval(td), "", MvcControlsToolkit_DataType_DateTime)

I stepped in to the MVC JS code and it has all the correct settings so I'm just confused as to why the value is not being shown.



Jun 8, 2011 at 10:38 PM

Aha, I think this has to do with my other posted problem where the datepickers are not being initialised in a partial view.  I tried this on a page that has been initialised and the date picker worked fine.  So I just need to figure out what I need to do to initialise the DateTime.



Jun 10, 2011 at 5:21 AM
Edited Jun 10, 2011 at 5:25 AM

OK, I have another issue with this now.  I call the DateTimeInput_Set and it works perfectly.  My update on the page is done and I can see the date in there.  However if I now choose another date from the Calendar option and then submit the form the date that is set in the model is the first date that I set not the one I chose from the calendar.

It appears that the initialisation of this control was not done properly with an AJAX call.  I obviously need to do more than just call datepicker(); on the control.

Any ideas?


Jun 10, 2011 at 9:16 AM

Include also this in the project you will send me :) because I think the two problems are connected...since I use normally the setting functions of datetime, then I change the date and everything works properly.