Making the resize of XPage Datefields work like they should

I found when creating an application that I couldn't resize a date field. The date picker mover to a second row and that wasn't what I wanted.

And I didn't want a large field because I was only storing a short date in ISO Date format.
I started to investigate why the helper icon was moved to the second row and found that a style width was inherited down in the date field control. This made that the text field storing the date was as big as the surrounding span and that made the helper icon to pop down to the second row.

I thought that I could fix the problem in the Dojo Widget but I couldn't find any event to attach my code to that fired when the compilation of the widget was done. So my choice fell on implementing this as a Dojo onload event fix.


XSP.addOnLoad(function() {
dojo.query(".xspInputFieldDateTimePicker").forEach(function(node, index, arr){
var containerId = node.id;
if(containerId.length>=10){
if(containerId.substr(containerId.length-10)=="_Container") {
var subid="widget_"+containerId.substring(0, containerId.length-10);
if(node.style.width!=""){
var sub=XSP.getElementById(subid)
if(sub){
if(node.style.width==sub.style.width){
var width=sub.style.width.substring(0, sub.style.width.length-2);
if(width>33){
width=width-33
sub.style.width=width+"px";
}}}}}}});});

Place the code within a output script on a custom control or in a script library and add it to you xpage with the fields. It can handle one or multiple date fields. It will only manipulate fields with the width style added.