Subject: SOLUTION: Working Date/time picker for IE8 without having to use Compatibility Mode
Anyone who’s tried to use the stock date-time picker control in XPages will quickly find out it doesn’t work in IE8. One of the suggested work-arounds was to bump your XPage down to IE7 compatibility mode. This works but can then introduce other issues (eg. layout) that you’d really not have to work on just to get a functioning date-picker.
I figured I should be able to use the dojo version of this (dijit.form.DateTextBox) and after a fair bit of searching the internet found an example on a Dutch site where this was implemented.
Much thanks!
Using an Edit Box control, modify it using the Source pane as follows:
<xp:inputText value="#{yourDataSource.yourDateField}"id=“yourID”>
<xp:this.converter>
<xp:convertDateTime pattern="MM/dd/yyyy"></xp:convertDateTime>
</xp:this.converter>
<xp:dateTimeHelper
dojoType="dijit.form.DateTextBox">
</xp:dateTimeHelper>
</xp:inputText>
You can use whatever pattern you wish in the converter – I tend to force a particular pattern due to inconsistencies in how IE vs. Firefox implements the short-date pattern.
You’ll also need to set your XPage dojoParseOnLoad & dojoTheme to true on the All Properties tab, and assign a dojoModule resource of dijit.form.DateTextBox also on the All Properties tab.
This will get you a functioning date picker that will pop up when you click in the Edit Box field.
Note that there’s kind of a button at the end of the input area but it’s not recognizable as one. I tried a few ways to get that button to be the one that displays if you use the stock non-functioning Date/time picker but was not successful, Instead I located the iconDatePicker.gif out in the domino folder and imported into the image resources of my application. Then I simply added an image control using that gif next to the Edit Box field, and added this client-side code to the onClick event of the image:
var dtField = XSP.getElementById(“#{id:yourID}”)
if(dtField!=null) {
dtField.focus();
return false;
};
The return false; is key to getting the cursor to stay in the field. Otherwise, it just jumps in & out & you end up with the same miserable implementation in IE8 as the stock Date/time picker.
You now get a working Date/time picker in IE8 (also tested in Firefox 3.6) without having to resort to using compatibility mode! The calendar pops up if you click the button or if you click in the field.
As a final bit of house-keeping, since it seems the date fields created on the web automatically add a midnight time-stamp to all date-only Date/time fields, I use this in my postSaveDocument LotusScript agent to get rid of the time-stamp:
If doc.HasItem("YourDateField") Then
If doc.YourDateField(0) <> "" then
Set aDateTime = New NotesDateTime( doc.YourDateField(0) )
Call aDateTime.Setanytime()
Set aDateVariant = aDateTime
Call doc.ReplaceItemValue( "YourDateField", aDateVariant )
End if
End If
The Date/time picker issue has been a bane for a few developers based on the posts I’ve seen, so I think this should be helpful until IBM fixes it in some future release. Enjoy!