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:

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">;

Example using a date selector by binding an instance to an XML Schema date type

xmlns="">

/>

nodeset="MyDate" type="xs:date" />

Example of using the date selector by binding an instance to an XML Schema date type:
/>
ref="MyDate">
Enter a date:

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:

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:

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;
}

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.