XForms/Selecting a Date

Motivation

Users frequently want to select a date rather than have to type the date into a field. They often want to select a date such as "next Tuesday", but they might have to use a calendar to look up the day that Tuesday falls on.

Luckily a calendar selector is built in to most XForms implementations.

Screen Image

If you have a field that is "bound" to a date type the form will appear as follows:

Link to Working XForms Application

Date Selector

Sample Program

Here is an example that uses the date picker:

<html 
xmlns="http://www.w3.org/1999/xhtml" 
xmlns:xf="http://www.w3.org/2002/xforms" 
xmlns:ev="http://www.w3.org/2001/xml-events" 
xmlns:xs="http://www.w3.org/2001/XMLSchema">
   <head>
      <title>Example using a date selector by binding an instance to an XML Schema date type</title>
      <xf:model>
         <xf:instance xmlns="">
            <data>
               <MyDate />
            </data>
         </xf:instance>
         <xf:bind nodeset="MyDate" type="xs:date" />
      </xf:model>
   </head>
   <body>
      <p>Example of using the date selector by binding an instance to an XML Schema date type:
		<br />
         <xf:input ref="MyDate">
            <xf:label>Enter a date: </xf:label>
         </xf:input>
      </p>
   </body>
</html>

Testing

A small calendar icon should appear directly to the right of the input field. Click on the calendar icon and select a date. Note that you can change the day and the month using the calendar picker.

Discussion

The key line is:

   <xf:bind nodeset="MyDate" type="xs:date" />

Note that if you do not use the bind command, the input will work like an ordinary text field.

The format that is put into the date field is YYYY-MM-DD which is the format used in XML for dates. You can use other formats such as MM-DD-YYYY but you will have to use an XPath expression to format the appearance of the field and make the appearance separate from the value in the model.

Once bound to type "xs:date", an empty string(date not set) will not allow the form to submit, there is no known direct solution, however using custom binding this can be overcome

example:

   <xf:input ref="Date" appearance="date" />

css:

  
    @namespace xf url(http://www.w3.org/2002/xforms);
    @namespace mozType url(http://www.mozilla.org/projects/xforms/2005/type);
    xf|input[appearance="date"] {    
    -moz-binding: url('chrome://xforms/content/input-xhtml.xml#xformswidget-input-date');  
    }
    xf|input[appearance="date"] span[mozType|calendar] { 
    -moz-binding: url('chrome://xforms/content/widgets-xhtml.xml#calendar-full'); 
    z-index: 2147481647;   
    }

Next Page: Formatting a date | Previous Page: Selecting from File
Home: XForms