Posted by Henrik Pettersen on Nov 19, 2009; 5:22pm
URL: https://discuss.orbeon.com/Changing-the-format-of-the-stored-date-using-the-XBL-Date-Picker-tp624114.html

All,

I thoguht I would share this one with the community.

I recently had to implement a calendar date-picker for my XForms application. Fortunately, Orbeon Forms comes with a handy 'date-picker' XBL component:
http://wiki.orbeon.com/forms/doc/developer-guide/xbl-existing-xbl-components#TOC-Date-Picker

Now, the date-picker stores the data in this format:
yyyy-mm-dd

... but unfortunately my XML Schema needed to have the value stored in this format:
yyyymmdd

I therefore decided to take the existing date-picker XBL component and modify it, following these instructions:
http://wiki.orbeon.com/forms/doc/developer-guide/xbl-components-guide#TOC-Getting-started

... and using the XPath fn:replace function and regular expressions for transforming the date format.

Here is the final XBL component. Most of it is copy-paste from date-picker.xbl:

<?xml version="1.0" encoding="UTF-8"?>
<xbl:xbl xmlns:xhtml="http://www.w3.org/1999/xhtml"
        xmlns:xforms="http://www.w3.org/2002/xforms"
        xmlns:xs="http://www.w3.org/2001/XMLSchema"
        xmlns:ev="http://www.w3.org/2001/xml-events"
        xmlns:xi="http://www.w3.org/2001/XInclude"
        xmlns:xxi="http://orbeon.org/oxf/xml/xinclude"
        xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
        xmlns:fr="http://orbeon.org/oxf/xml/form-runner"
        xmlns:frext="http://orbeon.org/oxf/xml/form-runner/extended"
        xmlns:saxon="http://saxon.sf.net/"
        xmlns:xbl="http://www.w3.org/ns/xbl"
        xmlns:xxbl="http://orbeon.org/oxf/xml/xbl">
   <xbl:binding id="fr-date-picker" element="frext|my-date-picker">
       <metadata xmlns="http://orbeon.org/oxf/xml/form-builder">
           <display-name lang="en">Date Picker</display-name>
           <display-name lang="fr">Sélecteur de date</display-name>
           <icon lang="en">
               <small-icon>/apps/fr/style/images/silk/date.png</small-icon>
               <large-icon>/apps/fr/style/images/silk/date.png</large-icon>
           </icon>
           <datatype>xforms:date</datatype>
           <template>
               <fr:date-picker>
                   <xforms:label ref=""/>
                   <xforms:hint ref=""/>
                   <xforms:help ref=""/>
                   <xforms:alert ref=""/>
               </fr:date-picker>
           </template>
       </metadata>
       <xbl:resources>
           <xbl:style>
               .xbl-fr-date-picker .fr-component-group img { vertical-align: bottom }
               .xbl-fr-date-picker .xforms-readonly .xforms-input { display: none }
           </xbl:style>
       </xbl:resources>
       <xbl:template>
           <xforms:model>
               <xforms:instance>
                   <value/>
               </xforms:instance>
               <xforms:bind nodeset="." type="xforms:date"/>
           </xforms:model>
           <xforms:group xbl:attr="model context ref bind" class="fr-component-group" xxbl:scope="outer">
               <xbl:content includes="xforms|label,xforms|help,xforms|hint,xforms|alert"/>
               <xforms:group xxbl:scope="inner">        
                   <xxforms:variable name="outer-binding" as="node()?">
                       <xxforms:sequence select="." xxbl:scope="outer"/>
                   </xxforms:variable>        
                   <xforms:group ref="$outer-binding">
                       <!-- Reading the value from the permanent field, into the calendar -->                    
                       <xforms:setvalue ev:event="xforms-enabled xforms-value-changed"
                                        ref="instance()"
                                        value="replace(context(), '([0-9]{4})([0-9]{2})([0-9]{2})', '$1-$2-$3')"/>
                   </xforms:group>
                   <xforms:output ref="context()"/>
                   <!-- Storing the value from the calendar, into the permanent field -->                    
                   <xforms:input ref="instance()" appearance="minimal">
                       <xforms:setvalue ev:event="xforms-value-changed"
                                        ref="$outer-binding"
                                        value="replace(instance(), '([0-9]{4})-([0-9]{2})-([0-9]{2})', '$1$2$3')"/>
                   </xforms:input>
               </xforms:group>                
           </xforms:group>
       </xbl:template>
   </xbl:binding>
</xbl:xbl>

XBL is cool!

Hope someone finds this usefull.

Sincerely,
Henrik Pettersen
Sparkling Ideas for the European Medicines Agency

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws