Reusing IBM Connections Atom date formatting for custom widgets

In a recent IBM Connections project I needed to display dates in the same as IBM Connections does it that is full dates sometimes but also using “yesterday”, “today” etc. Plus it needed to cater for the fact that the customer might at some future point in time allow the user to change the UI language. Coding this is tedious and would take quite some time so I wanted to figure out if IBM Connections had some libraries that could help me.

And it did.

By messing around in Firebug I found out that the way IBM Connections does it is by using a nifty JavaScript object called lconn.core.DateUtil.AtomDateToString. This object is actually a helper object that does two things – first it is able to convert an Atom date/time string (such as 2012-08-01T12:44:42.713Z) into a JavaScript Date object and then format it according to i18n settings and the language set in the UI.

Once I knew what to look for in the IBM Connections code it was simple enough. They do it by adding a hidden span-tag (CSS class “lotusHidden”) with a special tagging CSS class called “formatDate” as shown below.

<span class="formatDate lotusHidden">
  2012-08-01T12:44:42.713Z
</span>

Then using dojo.query they locate the nodes with the formatDate CSS class, use the utility class to convert the Atom date string and then remove the “lotusHidden” CSS class to make it visible.

// expand dates
if (lconn && lconn.core && lconn.core.DateUtil &&
lconn.core.DateUtil.AtomDateToString) {
   dojo.query(".formatDate", root).forEach(function(item){
      item.innerHTML=lconn.core.
         DateUtil.AtomDateToString(item.innerHTML);
      dojo.removeClass(item,"lotusHidden");
   });
}