Projects‎ > ‎

XForms - Date Widget without Input Field

This project has been implemented. See the documentation for the date picker component in the User's Guide.

Right now the date control shows as:


This happens when you have in the XForms an <xforms:input> bound to a node of type xs:date. You can see an example of this in the XForms Controls example. At the HTML level, this is rendered by just having a text field in the page. The image inside text field is added with CSS (background image).

We'd like to:
  1. Support an appearance="minimal" attribute on the <xforms:input>.

    • On the server (Java): When this appearance is used and the control is bound to a node of type xs:date, different markup will be generated:
      • Instead of generating a text field, the server will generate an image of the date picker (using the same image we have now as a background image, but generated with an <img src="..."> in the markup sent to the browser.
      • As we usually do for the appearance of other controls, the server will generate a class in the HTML so we know we are in minimal mode. For the trigger which generates a link in minimal appearance we generate xforms-trigger-appearance-minimal, so here we could have xforms-input-appearance-minimal.
    • On the client (JavaScript): The JavaScript needs to be updated to be able to show the date picker when the icon is generated:
      • When the date picker is used, the date is stored in the input field. In this case we won't have an input anymore, so the date needs to be stored in a JavaScript variable (for instance in a new property of ORBEON.xforms.Globals).
      • We don't need to do any of the conversions we do when we have the input field; we can always keep the date in ISO format.
      • This should work with the 2 implementations of the date picker we support (YUI and jscalendar, set with the oxf.xforms.datepicker property defined in properties-xforms.xml, which can be overridden in properties-local.xml).

  2. Create an XBL component which uses the <xforms:input appearance="minimal"> to show the date in read-only next to the date picker.
    • This would essentially be a <xforms:output> bound to the date node, next to an <xforms:input appearance="minimal"> bound to the same node.
    • The component will be defined in the file forms/orbeon/builder/form/custom-controls.xbl so we can use that component from Form Builder, but it should be tested outside of Form Builder / Form Runner with a stand-alone example. See for instance what has been done in xbl-currency.xhtml (Sandbox example) to test the currency XBL component. The currency component and other components in custom-controls.xbl are also good examples.