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
March 2023
SunMonTueWedThuFriSat
2627281234
567891011
12131415161718
19202122232425
2627282930311
2345678


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