Tapestry Core

org.apache.tapestry5.corelib.components.DateField

A component used to collect a provided date from the user using a client-side JavaScript calendar. Non-JavaScript clients can simply type into a text field. One wierd aspect here is that, because client-side JavaScript formatting and parsing is so limited, we (currently) use Ajax to send the user's input to the server for parsing (before raising the popup) and formatting (after closing the popup). Wierd and inefficient, but easier than writing client-side JavaScript for that purpose. Tapestry's DateField component is a wrapper around WebFX DatePicker.

[JavaDoc]

Component Inheritance

org.apache.tapestry5.corelib.base.AbstractField
- org.apache.tapestry5.corelib.components.DateField

Component Parameters

Name	Type	Flags	Default	Default Prefix	Description
clientId	String	NOT Allow Null	prop:componentResources.id	literal	The id used to generate a page-unique client-side identifier for the component. If a component renders multiple times, a suffix will be appended to the to id to ensure uniqueness. The uniqued value may be accessed via the clientId property.
disabled	boolean	NOT Allow Null	false	prop	If true, then the field will render out with a disabled attribute (to turn off client-side behavior). Further, a disabled field ignores any value in the request when the form is submitted.
format	java.text.DateFormat	Required, NOT Allow Null		literal	The format used to format and parse dates. This is typically specified as a string which is coerced to a DateFormat. You should be aware that using a date format with a two digit year is problematic: Java (not Tapestry) may get confused about the century.
hideTextField	boolean	NOT Allow Null		prop	If true, then the text field will be hidden, and only the icon for the date picker will be visible. The default is false.
icon	Asset	NOT Allow Null	datefield.gif	asset
label	String	NOT Allow Null		literal	The user presentable label for the field. If not provided, a reasonable label is generated from the component's id, first by looking for a message key named "id-label" (substituting the component's actual id), then by converting the actual id to a presentable string (for example, "userId" to "User Id").
validate	FieldValidator	NOT Allow Null		validate	The object that will perform input validation (which occurs after translation). The translate binding prefix is generally used to provide this object in a declarative fashion.
value	java.util.Date	Required, NOT Allow Null		prop	The value parameter of a DateField must be a java.util.Date.

Related Components

Examples

The DateField component is very easy to use, all the JavaScript is generated for you. Then end result looks like: Note: these screenshots are out of date, and reflect an earlier version of Tapestry and a different third-party JavaScript calendar than is currently available.

Clicking the icon raises the popup calendar:

DateFieldDemo.tml

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd">
    <body>
        <t:form>
            <div class="t-beaneditor">
                <div class="t-beaneditrow">
                    <t:label for="date"/>
                    <t:datefield t:id="date"/>
                </div>
                <div class="t-beaneditrow">
                    <input type="submit" value="Update"/>
                </div>
            </div>
        </t:form>
    </body>
</html>

The use of the extra <div> elements is to trigger the CSS styles that are usually used as part of aBeanEditForm. Just the <t:datefield> element is all that's really necessary.

Notes

The DateField component is based on the open source WebFX DatePicker widget.

Parent Project