Projects‎ > ‎

XForms - Date and Time Widgets

Implementation

HTML Markup

Different markup is generated depending on the type of the control.
  • If the node is of type xs:string (or a type other than xs:date, xs:time, xs:dateTime):
<span class="xforms-control xforms-input" id="input-type">
    <input type="text" class="xforms-input-input" value="" 
           name="input1-input-type" id="input1-input-type"/>
</span>
  • If the node is of type xs:date:
<span class="xforms-control xforms-input xforms-type-date" id="input-date">
    <input type="text" class="xforms-input-input xforms-type-date" value="2008-09-01" 
           name="input1-input-date" id="input1-input-date"/>
</span>
  • If the node is of type xs:time:
<span class="xforms-control xforms-input xforms-type-time" id="input-time">
    <input type="text" class="xforms-input-input xforms-type-time" value="20:12:21" 
           name="input1-input-time" id="input1-input-time"/>
</span>
  • If the node is of type xs:dateTime:
<span class="xforms-control xforms-input xforms-type-dateTime" id="input-date-time">
    <input type="text" class="xforms-input-input xforms-type-date" value="9/1/2008" 
           name="input1-input-date-time" id="input1-input-date-time"/>
    <input type="text" class="xforms-input-input xforms-type-time
           value="8:12:21 p.m." name="input2-input-date-time" id="input2-input-date-time"/>
</span>

JavaScript Utility Functions

ORBEON.util.DateTime provides functions to:
  • Magic-parse a time and a time (String => Date)
  • Format a time, date, and date-time to the ISO format for the server (Date => String)
  • Format a time and date in a display format (Date => String)
  • Parse a time, date, and date-time from the ISO format (coming the server) (String => Date)

Use Cases

  • Initial page is generated with input control
    • Server puts the date in display format in the generated HTML. No processing is required in JavaScript.
  • User changes the value of a time field
    • When user tabs out, the change event is received, JS magic-parses what user entered. If it can be parsed, JS changes the value to the display value; otherwise leaves as-is.
    • The value sent to the server has to be in ISO format. For this, if the field is a date, time, or dateTimeORBEON.xforms.Controls.getCurrentValue returns the ISO format value for that field.
  • A new value for a field is received from the server
    • Server does not sent the display-value anymore.
    • JS handling the response calls ORBEON.xforms.Controls.setCurrentValue (as usual).
    • JS in setCurrentValue parses the ISO value (convert to Date), get display value, and sets display value on inputs.


Comments