Demonstrates formats of the MonthYearPicker
The Calendar displays a popup MonthYearPicker setup in the ManyYears format by default.
ManyYears format allows a very large range of years. It requires that the user select a month and year separately, which means it takes at least two clicks to make a selection. (Three clicks in the PopupMonthYearPicker because the user has to click an OK button too.) It also provides keyboard selection of the month and year.
The FewYears format shows every possible month in one view. As a result, you use it when there is only a short list of months, perhaps 1-5 years worth. It provides a one-click selection too, as compared to 3 or more clicks on the ManyYears format. It does not support keyboard selection though.
There are two ways to configure the MonthYearPicker formats.
- Use predefined setups with the AutoFormatMonthYearPicker property.
- Use the PopupMonthYearPicker property, where you can establish numerous properties about the toggle button
and the MonthYearPicker itself. Use PopupMonthYearPicker.MonthYearPicker.Format
to select the format.
The last example shows this case.
Controls
Where the MonthYear label shows a
, click on it to view
the MonthYearPicker and see its format.
AutoFormatMonthYearPicker=ManyYears
| 30 | 1 | 2 | 3 | 4 | 5 | 6 |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | 1 | 2 | 3 |
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
AutoFormatMonthYearPicker=FewYears
| 30 | 1 | 2 | 3 | 4 | 5 | 6 |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | 1 | 2 | 3 |
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
AutoFormatMonthYearPicker=Hidden
| 30 | 1 | 2 | 3 | 4 | 5 | 6 |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | 1 | 2 | 3 |
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
PopupMonthYearPicker showing FewYears format
| 30 | 1 | 2 | 3 | 4 | 5 | 6 |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | 1 | 2 | 3 |
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
Source Code (C#)
Where the MonthYear label shows a <asp:Image ID="Image1" runat=server ImageUrl="~/DES/Appearance/Shared/SmallDownArrow.gif" />, click on it to view
the MonthYearPicker and see its format.<br/><br/>
<h2>AutoFormatMonthYearPicker=ManyYears</h2>
<des:Calendar ID="Calendar1" runat="server" AutoFormatMonthYearPicker="ManyYears" />
<br/>
<br/>
<h2>AutoFormatMonthYearPicker=FewYears</h2>
<des:Calendar ID="Calendar2" runat="server" AutoFormatMonthYearPicker="FewYears" />
<br/>
<br/>
<h2>AutoFormatMonthYearPicker=Hidden</h2>
<des:Calendar ID="Calendar3" runat="server" AutoFormatMonthYearPicker="Hidden" />
<br/>
<br/>
<h2>PopupMonthYearPicker showing FewYears format</h2>
<des:Calendar ID="Calendar4" runat="server" >
<PopupMonthYearPicker>
<MonthYearPicker Format="FewYears" />
</PopupMonthYearPicker>
</des:Calendar>
<br/>
<br/>