Google Git
Sign in
apache / tapestry3 / 8c29cef651f082cbc42781b4f21de47a9c756954 / . / doc / src / ComponentReference / DatePicker.html
blob: bcbb8eefda9bb27272ecd121e96a73fbdfffee06 [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- $Id$ -->
<html>
<head>
<title>DatePicker</title>
<link rel="stylesheet" type="text/css" href="Tapestry.css" title="style">
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left"><A href="Conditional.html"><IMG alt="Conditional" src="common-images/prev.png"></a></td>
<td align="middle"><A href="index.html"><IMG alt="Component Index" src="common-images/home.png" ></a></td>
<td align="right"><A href="Delegator.html"><IMG alt="Delegator" src="common-images/next.png"></a></td>
<tr>
<tr>
<td colspan="3"><hr></td>
</tr>
<tr>
<td colspan="3">
<table border="0" cellpadding="4" cellspacing="4" width="100%">
<tr valign="top">
<td>
<table>
<tr>
<td><font size="+2"><b>DatePicker</b></font></td>
</tr>
<tr>
<td>
<A href="../api/org/apache/tapestry/form/DateEdit.html">org.apache.tapestry.form.DatePicker</a>
</td>
</tr>
</table>
</td>
<td>
<table align="right" valign="middle" bgcolor="#c0c0c0" cellpadding="8">
<tr>
<td><input type="text" size="15" value="21 Jan 2002"/>&nbsp; <img src="images/DatePickerIcon.png"/></td>
</tr>
</table>
</td>
</tr>
<tr valign="center">
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td colspan="2">
<b>Description</b>
<br>
Provides a form
<a href="http://java.sun.com/products/jdk/1.2/docs/api/java/util/Date.html">Date</a>
field component for selecting dates. DatePicker presents a drop down monthly
calendar for users to select dates from.
<p>
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.
<p>
Note a rendering feature of Netscape and Internet Explorer gives the HTML
&lt;select&gt; element the highest Z-level index. The HTML &lt;select&gt;
cannot be covered by other elements. If a &lt;select&gt; is located inside
the DatePicker's popup calendar region, the &lt;select&gt; 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.
</td>
</tr>
<tr>
<td colspan="2">
<b>See Also</b>
<br>
<A href="Button.html">Button</a>,
<A href="Form.html">Form</a>,
<A href="ValidField.html">ValidField</a>
</td>
</tr>
<tr>
<td colspan="2">
<b>Parameters</b>
<br>
<table border="1" cellpadding="4" cellspacing="4" class="parameters">
<tr>
<th>Name</th>
<th>Type</th>
<th>Direction</th>
<th>Required</th>
<th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Default&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
<th>Description</th>
</tr>
<tr>
<td>value</td>
<td>
<a href="http://java.sun.com/products/jdk/1.2/docs/api/java/util/Date.html"><tt>java.util.Date</tt></a>
</td>
<td>in</td>
<td>yes</td>
<td>&nbsp;</td>
<td>
The data value.
<p>
Take care to ensure date time values are 'normalized' before
performing any millisec based comparison or equality operations.
</td>
</tr>
<tr>
<td>format</td>
<td>String</td>
<td>in</td>
<td>no</td>
<td>dd MMM yyyy</td>
<td>
The date format string. See
<a href="http://java.sun.com/products/jdk/1.2/docs/api/java/text/SimpleDateFormat.html"><tt>SimpleDateFormat</tt></a>
for format pattern letters.
</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>in</td>
<td>no</td>
<td>false</td>
<td>
Controls whether the date field and calendar button is active or not.
</td>
</tr>
<tr>
<td>icon</td>
<td><A href="../api/org/apache/tapestry/IAsset.html"><tt>IAsset</tt></A></td>
<td>in</td>
<td>no</td>
<td><img src="images/DatePickerIcon.png"/></td>
<td>The icon used to toggle the calendar on and off. The calendar will automatically line itself up
beneath the text input field.</td>
</tr>
</table>
<P>
Body: <STRONG>removed</STRONG><BR>
Informal parameters: <STRONG>allowed</STRONG> (These parameters will be applied to the text field)<br>
Reserved parameters: none
</P>
</td>
</tr>
<tr>
<td colspan="2">
<b>Examples</b>
<p>
This example provides a simple form where the user can select a start date and
an end date.
</p>
<table class="examples" cellpadding="8">
<tr>
<td>
<form jwcid="form">
<table valign="middle">
<tr>
<td>Start Date:</td><td><input type="text" size="15" value="1 Jan 2002"/>&nbsp; <img src="images/DatePickerIcon.png"/></td>
</tr>
<tr>
<td>End Date:</td><td><input type="text" size="15" value="31 Jun 2002"/>&nbsp; <img src="images/DatePickerIcon.png"/></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="Submit"/></td>
</tr>
</table>
</form></td>
</tr>
</table>
<pre>
&lt;form jwcid="<a href="Form.html">Form</a>" listener="ognl:listeners.formSubmit"&gt;
&lt;table valign="middle"&gt;
&lt;tr&gt;
&lt;td&gt;Start Date:&lt;/td&gt; &lt;td&gt;&lt;span jwcid="<span class="jwcid">@<a href="DatePicker.html">DatePicker</a></span>" value="ognl:startDate"/&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;End Date:&lt;/td&gt; &lt;td&gt;&lt;span jwcid="<span class="jwcid">@<a href="DatePicker.html">DatePicker</a></span>" value="ognl:endDate"/&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan="2"&gt;&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan="2" align="right"&gt;&lt;input type="submit" value="Submit"/&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;
&lt;property-specification name=&quot;startDate&quot; type=&quot;java.util.Date&quot;/&gt;<br>&lt;property-specification name=&quot;endDate&quot; type=&quot;java.util.Date&quot;/&gt;<br>
public abstract class Dates extends BasePage {
public abstract Date getStartDate();
public abstract Date getEndDate();
public void formSubmit(IRequestCycle cycle) {
// Process the submitted dates.
}
}
</pre>
</td>
</tr></table>
</td></tr>
<tr>
<td colspan="3"><hr></td>
</tr>
<tr>
<td align="left"><A href="Conditional.html"><IMG alt="Conditional" src="common-images/prev.png"></a></td>
<td align="middle"><A href="index.html"><IMG alt="Component Index" src="common-images/home.png" ></a></td><!-- Next component in alphabetical order. -->
<td align="right"><A href="Delegator.html"><IMG alt="Delegator" src="common-images/next.png"></a></td>
</tr>
</table>
</body>
</html>