JavaScript and the CRM 2011 DateTime Field: Deconstructed

Suffice it to say, the DateTime control is not very intuitive when you need to manipulate pieces of it so, if you found your way here you are probably climbing the walls trying to figure out how to manipulate it.

A project I am working on has a requirement where I simply needed to disable the date part of the field. After much searching, I wasn’t really getting where I needed to be until I paired the little information I had with the  which lead me to explore (and document) my findings to help someone else wrestling with this.

If we look at the code snippet below which defines the control in the page (in this case we are looking at an appointment’s “scheduledstart”), we can see that it is quite complex in the structure (the left of the snippet documents the childnode indices of the control). However, by using the DOM, we can achive just about anything we would like.   To access each of the elements, of the control, you traverse the DOM tree using javascript .childnodes property.

//The date textfield of the control

//The date imgbutton of the control (opens the date selector)
//NOTE: if you are disabling this control, set the image to ‘_imgs/btn_dis_cal.gif’, the “greyed-out” control

//This can also be accessed by  crmForm.all.scheduledstartimg
// as I understand it, related imagebuttons will always be named “<related control name>img”

While the time selector part of the control appears to be a standard SELECT control, it is, in fact, a text box paired with an image button. To disable the control, the easiest route is just to disable the TD that the control lives in:

//The time selector of the control

If you need finer-grained control and want the parts, while I have not tested this, the indices should be:

//time text box

//time image button

Happy coding!

DateTime Control Snippet