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.

Body: removed
Informal parameters: forbidden
Reserved parameters: none

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

  
<form jwcid="form">
<table valign="middle">
 <tr>
  <td>Start Date:</td> <td><span jwcid="startDatePicker"/></td>
 </tr>
 <tr>
  <td>End Date:</td> <td><span jwcid="endDatePicker"/></td>
 </tr>
 <tr>
  <td colspan="2">&nbsp;</td>
 </tr>
 <tr>
  <td colspan="2" align="right"><input type="submit" value="Submit"/></td>
 </tr>
</table>
</form>


<component id="form" type="Form"/>
    <binding name="listener" expression="listeners.formSubmit"/>
</component>

<component id="startDatePicker" type="DatePicker">
    <binding name="value" expression="startDate"/>
</component>

<component id="endDatePicker" type="DatePicker">
    <binding name="value" expression="endDate"/>
</component>
	

public class Dates extends BasePage {
    private Date startDate;
    private Date endDate;
 
    public Date getStartDate() { return startDate; }

    public void setStartDate(Date value) {
        startDate = value;
    }

    public Date getEndDate() { return endDate; }

    public void setEndDate(Date value) {
        endDate = value;
    }  

    public void detach() {
        startDate = null;
        endDate = null;       
        super.detach();
    }

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