DatePicker

Provides a form Date field component for selecting dates. DatePicker presents a drop down monthly calendar for users to select dates from.

JavaScript must be enabled in the client browser to use the drop down calendar. If JavaScript is not enabled users can still enter a date value in the HTML text field.

Note a rendering feature of Netscape and Internet Explorer gives the HTML <select> element the highest Z-level index. The HTML <select> cannot be covered by other elements. If a <select> is located inside the DatePicker's popup calendar region, the <select> will render through the popup calendar obscuring part of the calendar. In these situation organize the form's UI layout so this does not occur.

See also: Button , Form

Parameters

Name Type Required Default Description
value java.util.Date yes The data value. Take care to ensure date time values are 'normalized' before performing any millisec based comparison or equality operations.
disabled boolean no false Controls whether the date field and calendar button is active or not.
displayName String no The user-presentable name for the component, which will be used by a FieldLabel connected to the component.
validators Array or collection of Validator no The validators to apply to the component. Something along the lines of: validators:required .



See also: Validation
translator Translator no translator:date,pattern=dd MMM yyyy The translator to use when displaying and parsing the date.



See also: Validation
icon IAsset no The icon used to toggle the calendar on and off. The calendar will automatically line itself up beneath the text input field.
id String no Sets the id attribute for the rendered <input> element.
includeWeek boolean no If true, displays in the calendar the week number for each week.
title String no Localized String representing the expected format. (ie MM/DD/YYYY) If not overriden the default title will be a localized pattern string representing the currently accepted patterns.
imageClass String no datePickerImg Specifies the css class name that will be applied to the DatePicker img icon reference.

Body: removed

Informal parameters: allowed (These parameters will be applied to the text field)

Reserved parameters: none

Examples

This example provides a simple form where the user can select a start date and an end date.

HTML template

<form jwcid="Form" listener="listener:formSubmit">
<table valign="middle">
 <tr>
  <td>Start Date:</td> <td><input jwcid="@DatePicker" value="ognl:startDate"/></td>
 </tr>
 <tr>
  <td>End Date:</td> <td><input jwcid="@DatePicker" value="ognl:endDate"/></td>
 </tr>
 <tr>
  <td colspan="2">&nbsp;</td>
 </tr>
 <tr>
  <td colspan="2" align="right"><input type="submit" value="Submit"/></td>
 </tr>
</table>
</form>

Page specification

...
<property name="startDate" type="java.util.Date"/>
<property name="endDate" type="java.util.Date"/>
...

Java source

public abstract class Dates extends BasePage {
    public abstract Date getStartDate();

    public abstract Date getEndDate();

    public void formSubmit(IRequestCycle cycle) {
        // Process the submitted dates.
    }
}