| 1 |
lars |
1 |
<com:TContent ID="body" >
|
|
|
2 |
|
|
|
3 |
<h1 id="2301">TDatePicker</h1>
|
|
|
4 |
<com:DocLink ClassPath="System.Web.UI.WebControls.TDatePicker" />
|
|
|
5 |
|
|
|
6 |
<p id="280245" class="block-content"><tt>TDatePicker</tt> displays a text box for date input purpose.
|
|
|
7 |
When the text box receives focus, a calendar will pop up and users can
|
|
|
8 |
pick up from it a date that will be automatically entered into the text box.
|
|
|
9 |
The format of the date string displayed in the text box is determined by
|
|
|
10 |
the <tt>DateFormat</tt> property. Valid formats are the combination of the
|
|
|
11 |
following tokens:
|
|
|
12 |
|
|
|
13 |
<com:TTextHighlighter Language="text" CssClass="source block-content" id="code_280103">
|
|
|
14 |
Character Format Pattern (en-US)
|
|
|
15 |
---------------------------------------------------------------------
|
|
|
16 |
d day digit
|
|
|
17 |
dd padded day digit e.g. 01, 02
|
|
|
18 |
M month digit
|
|
|
19 |
MM padded month digit
|
|
|
20 |
MMM localized abbreviated month names, e.g. Mar, Apr
|
|
|
21 |
MMMM localized month name, e.g. March, April
|
|
|
22 |
yy 2 digit year
|
|
|
23 |
yyyy 4 digit year
|
|
|
24 |
---------------------------------------------------------------------
|
|
|
25 |
</com:TTextHighlighter>
|
|
|
26 |
|
|
|
27 |
<p id="280246" class="block-content">
|
|
|
28 |
The date of the date picker can be set using the <tt>Date</tt> or <tt>Timestamp</tt>
|
|
|
29 |
properties. The <tt>Date</tt> property value must be in the same format as the pattern
|
|
|
30 |
specified in the <tt>DateFormat</tt> property. The <tt>Timestamp</tt> property
|
|
|
31 |
only accepts integers such as the Unix timestamp.
|
|
|
32 |
</p>
|
|
|
33 |
|
|
|
34 |
<p id="280247" class="block-content">
|
|
|
35 |
TDatePicker has three <tt>Mode</tt> to show the date picker popup.</p>
|
|
|
36 |
<ul id="u1" class="block-content">
|
|
|
37 |
<li><tt>Basic</tt> - Only shows a text input, focusing on the input shows the date picker.</li>
|
|
|
38 |
<li><tt>Button</tt> - Shows a button next to the text input, clicking on the button shows the date, button text can be by the <tt>ButtonText</tt> property.</li>
|
|
|
39 |
<li><tt>ImageButton</tt> - Shows an image next to the text input, clicking on the image shows the date picker, image source can be change through the <tt>ImageUrl</tt> property.</li>
|
|
|
40 |
</ul>
|
|
|
41 |
|
|
|
42 |
<p id="280248" class="block-content">The <tt>CssClass</tt> property can be used to override the CSS class name
|
|
|
43 |
for the date picker panel. The <tt>CalendarStyle</tt> property changes the overall calendar style.
|
|
|
44 |
The following <tt>CalendarStyle</tt> values are available:</p>
|
|
|
45 |
<ul id="u2" class="block-content">
|
|
|
46 |
<li><tt>default</tt> - The default calendar style.</li>
|
|
|
47 |
</ul>
|
|
|
48 |
|
|
|
49 |
<p id="280249" class="block-content">The <tt>InputMode</tt> property can be set to "TextBox" or "DropDownList" with
|
|
|
50 |
default as "TextBox". In <tt>DropDownList</tt> mode, in addition to the popup date picker, three
|
|
|
51 |
drop down list (day, month and year) are presented to select the date .
|
|
|
52 |
When <tt>InputMode</tt> equals "DropDownList", the order and appearance of the date, month, and year
|
|
|
53 |
will depend on the pattern specified in <tt>DateFormat</tt> property.
|
|
|
54 |
</p>
|
|
|
55 |
|
|
|
56 |
<p id="280250" class="block-content">The popup date picker can be hidden by specifying <tt>ShowCalendar</tt> as false. Much of the
|
|
|
57 |
text of the popup date picker can be changed to a different language using the <tt>Culture</tt> property.
|
|
|
58 |
</p>
|
|
|
59 |
|
|
|
60 |
<p id="280251" class="block-content">The calendar picker year limit can be set using the <tt>FromYear</tt> and <tt>UpToYear</tt> properties
|
|
|
61 |
where <tt>FromYear</tt> is the starting year and <tt>UpToYear</tt> is the last year selectable.
|
|
|
62 |
The starting day of the week can be changed by the <tt>FirstDayOfWeek</tt> property, with 0 as Sunday, 1 as Monday, etc.
|
|
|
63 |
</p>
|
|
|
64 |
|
|
|
65 |
<p id="280252" class="block-content"><b>Note 1:</b> If the <tt>InputMode</tt> is "TextBox", the <tt>DateFormat</tt> should
|
|
|
66 |
only <b>NOT</b> contain <code>MMM</code> or <code>MMMM</code> patterns. The
|
|
|
67 |
server side date parser will not be able to determine the correct date if <code>MMM</code> or
|
|
|
68 |
<code>MMMM</code> are used. When <tt>InputMode</tt> equals "DropDownList", all patterns can be used.</p>
|
|
|
69 |
|
|
|
70 |
<p id="280253" class="block-content"><b>Note 2:</b> When the <tt>TDatePicker</tt> is used together
|
|
|
71 |
with a validator, the <tt>DateFormat</tt> property of the validator must be equal to
|
|
|
72 |
the <tt>DateFormat</tt> of the <tt>TDatePicker</tt> <b>AND</b> must set <tt>DataType</tt>="Date"
|
|
|
73 |
on the validator to ensure correct validation. See
|
|
|
74 |
<a href="?page=Controls.Validation#TCompareValidator">TCompareValidator</a>,
|
|
|
75 |
<a href="?page=Controls.Validation#TDataTypeValidator">TDataTypeValidator</a> and
|
|
|
76 |
<a href="?page=Controls.Validation#TRangeValidator">TRangeValidator</a>
|
|
|
77 |
for details.</p>
|
|
|
78 |
|
|
|
79 |
<com:RunBar PagePath="Controls.Samples.TDatePicker.Home" />
|
|
|
80 |
|
|
|
81 |
<div class="last-modified">$Id: DatePicker.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
|