Finding Date/Time Columns on the Page with g_strDateTimeControlIDs
I ran across an interesting little trick in some code I’m working on today. As usual, not my code, someone else’s that I’m trying to decipher and fix.
One thing that they are doing is sort of slick. There’s apparently an array created by the datepicker.js JavaScript called g_strDateTimeControlID which is populated with the IDs for all of the date input fields on the page which utilize the Date Picker. (I did some Binging, and there are only 4 references to g_strDateTimeControlID that I found.) The little calendar icon below is the Date Picker:
You can use the g_strDateTimeControlIDs array like this:
var eventDateID = g_strDateTimeControlIDs["SPEventDate"]; document.getElementById(eventDateID).value = date;
Note the ‘SP’ ahead of the column name.
That’s certainly simpler than writing your own JavaScript/jQuery to find the control, and makes it easy to set the date value, whether it be from a Query String value or some calculation. Because the array is constructed and used by the Date Picker, so it should be available on the page where ever the Date Picker is seen.
Do you know if this still works in SP2010? This is vastly easier than doing it manually, especially for reuse since the “ff” form field values can change from list to list.
Honestly, I haven’t tried it. When you try it, let me know! I’ve found, though, that to a large degree the forms in SP2010 are constructed the same as in 2007.
M.
Heh. My dev box isn’t beefy enough for SP2010, so I was counting on you to try it out. My org won’t be prepared for 2010 until at least 2011, so I’m gonna use this trick for a while either way. Thanks for sharing it!
Ok, you piqued my interest. I just fired up an SP2010 form with a date picker on it and inspected the DOM with Developer Tools in IE8. It does indeed have g_strDateTimeControlIDs:
M.
Oh good. BTW, I was trying to figure out the least hack-y way to select the Hours and Date fields so I poked around in datepicker.js. Turns out the hack-y way (i.e. appending “Hours” and “Minutes” to the “eventDateID” value) is the way MS does it. Sheesh! After looking at the date/time form fields and the radio button form fields on a default SharePoint form, it seems as though MOSS2007 was actually built in 1999 or so… But I digress. Thanks for the tip!
And one good hack deserves another:
I’ve had a couple projects recently where I needed to use various attributes for the Current User in some custom forms. I could get the user name (e.g., “Joe Blow”) via the DVWP “UserID” parameter, and I could get the domain login (e.g. “CORP\jblow”) via your SPServices CurrentUser call; but while I was rearranging the CurrentUser string to generate the email address I realized there had to be an easier, hackier way and indeed there is:
First manually enter a “SPSWC:ProfilePropertyLoader” control to load the profile for the current user; then drop a “ProfilePropertyValue” control from the SPD toolbox on the page, and add the attribute “PropertyName=’workEmail'”. Throw that in a hidden DIV with a unique ID, and there’s the Current User’s email address. Of course you could use this same technique to add various other profile properties to a form or a DVWP…
Yes, sometimes I want to reach out and slap the junior Microsoft developer who came up with some of the stuff I find in the DOM.
My GetCurrentUser “hack” may not be much more elegant, but it also works. And in v0.5.4 (currently in alpha, but I release fast), I’ve expanded it to let you grab quite a few other attributes for the user. All I’m doing is what we used to call “screen scraping” from the userdisp.aspx page.
M.
Really useful.
Is it possible to handle the Text Change event in JScript?>
(1. By entering date inside textbox and 2. b y selecting date from the date picker button)
The quick answer is “yes”. The date selected is simply contained as text in an INPUT, so you can do all of the normal event handling there.
M.
Hi !
The problem is that registration of Change or Blur event on the input is raised only when user enters date by hand not by selecting it from the date picker, which diagrammatically fills the input field.
Dimitris – did you ever find a way to bind a change event to a selection from the date picker?
Dimitris – if you found out a way please let me know as I need the same fix for my project :)
Thanks.