Talk:XForms/Formatting a date

Output and dates
The XForms 1.0 Recommendation says that ([output]) is, like other form controls, responsible for converting the lexical (XML) values to localized, presentation values.

The recent XForms 1.1 working draft ([XForms 1.1 output]) goes further, with an explicit example of handling dates in output.

Even so, some XForms user agents still do not handle date formatting, so if your XForms processor supports XBL, here's how you can teach it to follow the appearance attribute.

A declarative way of doing this
Here's an example of how to use Mozilla binding to make xf:output do this automatically. To cause a date to be displayed in a human-readable format, you just use bind to declare its type as xsd:dateTime, and you use the appearance attribute to control the formatting.

It really ought to be something that XForms processors do already since converting XML lexical representation to human-readable presentation is the contract of form controls.

Markup for your XHTML+XForms Page
  ...      ...     

date.js
Get this file from http://delete.me.uk/2005/03/iso8601.html It converts between JavaScript date objects and ISO 8601 date lexical representation.

output.css
@namespace xf url(http://www.w3.org/2002/xforms); @namespace mozType url(http://www.mozilla.org/projects/xforms/2005/type);

xf|output[mozType|typelist~="http://www.w3.org/2001/XMLSchema#dateTime"][appearance='compact'] { -moz-binding: url('bindings.xml#output-compact-dateTime'); }

xf|output[mozType|typelist~="http://www.w3.org/2001/XMLSchema#dateTime"][appearance='full'] { -moz-binding: url('bindings.xml#output-full-dateTime'); }

xf|output[mozType|typelist~="http://www.w3.org/2001/XMLSchema#dateTime"][appearance='minimal'] { -moz-binding: url('bindings.xml#output-minimal-dateTime'); }

xf|output[mozType|typelist~="http://www.w3.org/2001/XMLSchema#dateTime"] { -moz-binding: url('bindings.xml#output-dateTime'); }

xf|output[mediatype="text/html"] { -moz-binding: url('bindings.xml#output-text-html'); }

bindings.xml
    

var span = document.getAnonymousElementByAttribute(this, "anonid", "content"); if (span) { var date = new Date; date.setISO8601(this.stringValue); var str = date.toLocaleString; // crock for removing "Monday, " if present; not I18N. var idx = str.indexOf("day, "); if (idx != -1) { str = str.substring(idx+5); }	   span.textContent = str; }	 return true;

 

 var span = document.getAnonymousElementByAttribute(this, "anonid", "content"); if (span) { var date = new Date; date.setISO8601(this.stringValue); var str = date.toLocaleString; // crock for removing "Monday, " if present; not I18N. var idx = str.indexOf("day, "); if (idx != -1) { str = str.substring(idx+5); }	   span.textContent = str; }	 return true;

  

var span = document.getAnonymousElementByAttribute(this, "anonid", "content"); if (span) { var date = new Date; date.setISO8601(this.stringValue); span.textContent = date.toLocaleString; }	 return true;

 <html:span anonid="content" />

<implementation implements="nsIXFormsUIWidget"> <![CDATA[ var span = document.getAnonymousElementByAttribute(this, "anonid", "content"); // too bad JavaScript doesn't have a locale-based way of doing this if (span) { var date = new Date; var todayYear = date.getYear; var todayMonth = 1+date.getMonth; var todayDay = date.getDate; date.setISO8601(this.stringValue); var month = 1+date.getMonth; var day = date.getDate; var year = date.getYear; var hour = date.getHours; var minute = date.getMinutes; var second = date.getSeconds; if (hour < 10) hour = "0" + hour; if (minute < 10) minute = "0" + minute; if (second < 10) second = "0" + second; if (todayYear == year && todayMonth == month && todayDay == day) { span.textContent = hour + ":" + minute + ":" + second; } else { if (month < 10) month = "0" + month; if (day < 10) day = "0" + day; if (year > 100) year = year - 100; if (year < 10) year = "0" + year; // I18N Alert! span.textContent = month + "/" + day + "/" + year + " " + hour + ":" + minute + ":" + second; }	 }	  return true;]]>

<binding id="output-text-html" extends="chrome://xforms/content/xforms.xml#xformswidget-base"> <html:div xmlns:html="http://www.w3.org/1999/xhtml"> <html:span anonid="content" /> </html:div>

<implementation implements="nsIXFormsUIWidget">

var span = document.getAnonymousElementByAttribute(this, "anonid", "content"); span.innerHTML = this.stringValue;