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 Direction Required Default Description
value java.util.Date in yes The data value. Take care to ensure date time values are 'normalized' before performing any millisec based comparison or equality operations.
disabled boolean in no false Controls whether the date field and calendar button is active or not.
displayName String in 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 , or Validator in no The validators to apply to the component.
translator Translator in no translator:date,pattern=dd MMM yyyy The translator to use when displaying and parsing the date.
icon IAsset in 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 in no Sets the id attribute for the rendered <input> element.
includeWeek boolean in no If true, displays in the calendar the week number for each week.

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><span jwcid="@DatePicker" value="ognl:startDate"/></td>
 </tr>
 <tr>
  <td>End Date:</td> <td><span 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.
    }
}