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
December 2024 Select a Different Month
SunMonTueWedThuFriSat
1234567
891011121314
15161718192021
22232425262728
2930311234
567891011


AutoFormatMonthYearPicker=FewYears

Previous Month
Next Month
December 2024 Select a Different Month
SunMonTueWedThuFriSat
1234567
891011121314
15161718192021
22232425262728
2930311234
567891011


AutoFormatMonthYearPicker=Hidden

Previous Month
Next Month
December 2024
SunMonTueWedThuFriSat
1234567
891011121314
15161718192021
22232425262728
2930311234
567891011


PopupMonthYearPicker showing FewYears format

Previous Month
Next Month
December 2024 Select a Different Month
SunMonTueWedThuFriSat
1234567
891011121314
15161718192021
22232425262728
2930311234
567891011



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