Return to the menu   Select another DES Module

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

Previous Month
Next Month
October 2024
SunMonTueWedThuFriSat
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789


AutoFormatMonthYearPicker=FewYears



AutoFormatMonthYearPicker=Hidden



PopupMonthYearPicker showing FewYears format




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/>

Return to the menu   Select another DES Module