ibm.xsp.widget.layout.DateTextBox in Xpages

Sometimes in every software development we do, we often learn the hard way. Though we read plenty of forums and blogs, we often find something that is unique from the previous task we have done.

Date Time Picker in XPAGES

Cite for example is Calendar Date Time Picker, where dojoType ibm.xsp.widget.layout.DateTextBox is associated into after page load. Firefox, Google Chrome and Safari rendered the Calendar Date Time Picker properly. But in IE is sucks. Yes it sucks. Though we apply the Emulator for IE8 or IE9, still it doesn't work properly. But we can’t tell this to the client that they must use other browser other than IE because most of the end users comfortably utilizing the Internet Explorer. So we must find a workaround.

After spending time and effort in debugging what went wrong in Calendar Date Picker in IE, I finally found the workaround.

In Calendar Date Picker in XPage, it has ibm.xsp.widget.layout.DateTextBox dojoType. And when the browser launch the Xpage,  parseOnLoad is set to true even if you set it to false in Custom Control Properties ->All Properties ->dojo->dojoParseOnLoad.

So the parsing of the dijit will occur immediately but as IE as being "slow renderer", the Calendar Picker sometimes or most of the time does not parse properly.

To save you from headache, parsing  the dijits manually after page load. Doing so is calling one function away:

You could stipulate the code in Client Side javascript Library or in onClientLoad of custom control or XPage.

dojo.addOnLoad(function( ) {

                dojo.parser.parse(); //manually parse after the page loads

});

This will give you assurance that the Calendar Date Picker will load properly. Or you could load specific dijit component by supplying parent node as parameter for parsing such as dojo.parser.parse(document.getElementsByTagName("button")[0].parentNode);

You can find the reference for this code in Oreilly's Dojo: The Definitive Guide June 2008 page 258.


Another workaround that i found is without using the compatibity mode and can be found here.