XForms - Date and Time Widgets

Site map

Comments? Feedback?

This wiki does not yet support public comments (a limitation of Google Sites), so we encourage you to post your comments either:

On Twitter by responding to @orbeon.

On our community mailing list: subscribe sending an email to ops-users-subscribe@ow2.org (content of subject/body doesn't matter), you'll get a response with the email to use to send your message to the community mailing list.

Recent site activity

Create a wizard with two separate forms
edited by Erik Bruchez
Configuration Properties - Form Runner
edited by Erik Bruchez
Orbeon Form Runner - Programmer and Administrator Guide
edited by Erik Bruchez
Configuration Properties - Form Runner
edited by Erik Bruchez
Orbeon Forms 3.9
edited by Erik Bruchez
View All

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 dateTime, ORBEON.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.

	Orbeon Search