可自定义的日历控件，仅用于选择月份和年份
4.67/5 (3投票s)
这是一个用户控件，
引言
这个日历控件可以用于网页中，为用户提供一种仅选择月份和年份的方式。它是一个用户控件，因此可以向网页中添加任意数量的此控件。该控件高度可定制，并且可以进一步扩展。此控件的一些功能包括：限制日历允许用户选择的年份范围、视图类型（弹出/面板）、指定/扩展返回所选日期的模式、指定日历允许用户选择的开始和结束年份，以及指定开始年份或结束年份先显示的选项等。这个用户控件和示例应用程序也有助于理解使用用户控件的核心概念，该控件在项目中大大减少了重复代码，同时提高了效率。
背景
在工作中，我有一个需求——设计一个用户控件，允许用户仅选择月份和年份。日期部分需要在这一步之后确定为该月份的第一天或最后一天。为此，一个简单的选项是使用两个下拉框——一个用于月份，一个用于年份。但我认为这在视觉上并不吸引人。所以我开始编写一个用户控件，它类似于 AjaxControlToolkit 附带的 Calendar Extender（或作为服务器控件的 Calendar 控件）。我选择编写用户控件而不是使用我提到的两个控件中的一个，有几个原因。首先，如果我们使用 AjaxControlToolkit，该控件不直接提供将日历限制为仅月份/年份的方式。当然，网络上有很多方法可以通过大量的 JavaScript 代码来绕过这个问题。但在这种情况下，如果我们需要在同一页面上使用多个类似的日历控件，那么我们需要花费大量时间来实现它，因为它涉及到对相应 JavaScript 的大量修改/实验。而且我们没有直接限制用户选择特定子集的灵活性，因此我们再次需要添加 JavaScript 来解决这个问题。出于这些原因以及更多原因，我想到了编写一个用户控件。于是，我在工作中编写了一个用户控件来实现这个目标。现在我想将这个想法扩展到更广阔的领域，并呈现给其他人使用。希望这对其他人有所帮助。
我认为此刻需要对用户界面如何使用进行一个小小的解释。如果模式设置为“popup”，点击文本框会弹出日历，选择任何月份链接或当前月份链接后，日历会隐藏，并将选定的值设置到文本框中。点击日历外部会关闭弹出窗口（更多信息请参见“Points of Interest”）。
如果模式设置为“panel”，则在文本框旁边会显示一个日历图标。点击它会显示日历，再次点击日历图标会隐藏面板。与弹出模式类似，选择任何月份链接或当前月份链接后，日历会隐藏，并将选定的值设置到文本框中。
Using the Code
为了使用此控件，请按照以下步骤进行操作
- 提取用户控件源文件，默认情况下，它们位于名为“Core”的目录中。
- “Core”目录的内容包括用户控件 Calendar.ascx、Calendar.ascx.cs、Calendar.ascx.designer.cs 以及一个用于默认图像的目录。
- 将整个目录包含在您的项目中。
- 您还需要将 jquery.js 添加到您的项目中，并像下面这样引用它
- 除了 jquery.js 之外，还需要添加对 AjaxControlToolkit (DLL) 的引用。这两个文件都包含在示例 Web 项目中，与用户控件一起，您可以选择下载示例 Web 项目或不包含附加文件（jquery 和 ajax control toolkit）的用户控件。
- 假设用户控件现在位于“Core”目录中，则可以如下使用
标记
<%@ Register Src="~/Core/Calendar.ascx" TagName="Calendar" TagPrefix="uc" %>
<html>
<head>
<title>Calendar Demo</title>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server"></asp:ScriptManager>
<uc:Calendar runat="server" ID="calenderCtrl1" BeginYear="2010" EndYear="2005"
ReturnFormat="Date" CalendarMode="Popup"
DateMode="ReturnLastDayOfMonth" />
<br />
<asp:Button ID="btnGet" runat="server"
Text="Get Date (Popup)" OnClick="btnGet_Click" />
<br />
<asp:Label runat="server" Text="" ID="lblResult"></asp:Label>
</div>
</form>
</body>
</html>
代码后置
protected void btnGet_Click(object sender, EventArgs e)
{
lblResult.Text = calenderCtrl1.DateChosen.ToString();
}
在上面的示例中，首先使用 tag 注册 Calendar 控件，然后在 body 中将其用作 <calendar>。与其他 ASP.NET 服务器控件一样，它具有 runat 和 ID 属性。除此之外，这个用户控件还定义了许多其他属性。它们在下面进行解释
DateChosen- 这是一个只读属性，页面在使用此用户控件时可以使用它来检索用户选择的月份/年份。BeginYear- 日历应该开始的年份。默认为当前年份。Range- 此属性用于指定从BeginYear开始日历可以前进多少年。如果未传递，则默认值为 5。EndYear- 日历应该显示的结束年份。如果分配了此属性，则使用它。否则，它将使用BeginYear和Range计算得出。ReturnFormat- 选择的月份要返回的格式。可能的值是Date和String。前面描述的DateChosen属性就是使用这个来决定格式的。DateMode- 这是一个用户控件，允许用户选择月份和年份。但返回时，它仍将作为具有月份/日期/年份组件的datetime/string对象返回。Convert.ToDateTime默认将“June 2010”转换为“06/01/2010”。此属性使您能够对此进行操作。有两种选择——ReturnFirstDayOfMonth（默认）和ReturnLastDayOfMonth。前者返回6/1/2010，而后者返回 '6/30/2010'。DateOnError- 如果输入的月份/年份无效，默认情况下控件返回1/1/0001。可以使用此属性进行更改。DefaultDateType- 如果未设置DateOnError，则默认日期应返回最小值年还是最大值年。StartMode- 此属性用于确定日历是应该先从开始年份开始还是先从结束年份开始。CurrentDayOrMonthInfo- 显示在下方当前月份年份信息的文本。默认为“Current Month:”CalendarMode- 日历显示类型，弹出/面板。默认为弹出。PopupOffsetX- 仅适用于弹出模式。弹出的 X 偏移量。PopupOffsetY- 仅适用于弹出模式。弹出的 Y 偏移量。PreviousYearImageURL- 导航到上一年的图像。默认图像在 Images 目录中。NextYearImageURL- 导航到下一年的图像。默认图像在 Images 目录中。MonthLinkCSS- 月份链接的 CSS。默认情况下，不应用样式。MonthCurrentLinkCSS- 当前月份链接的 CSS。默认情况下，不应用样式。
在后台代码中，可以使用 DateChosen 属性（只读）检索用户选择的日期。然后可以在后续步骤中使用它。随本文一起，我附加了控件的源代码和一个包含所需引用的示例应用程序（AjaxControlToolkit 和 jquery）。
示例
实时演示地址：http://thekfactor.info/CustomUserControls/CalendarDemo.aspx。
初始屏幕（未选择状态）
弹出示例（设置为返回月份的最后一天）
面板示例（设置为返回月份的第一天）
看点
请查看控件的源代码。这里没有使用 UpdatePanel 和多个 <asp:AsyncPostBackTrigger /> 标签。这是为了**停止**链接按钮导致回发（代表月份和当前月份的链接）。另一种处理方法是将所有与日历相关的控件放在另一个 UpdatePanel 中。这是延长编写此控件总时间的一个因素。
另外，请注意 JavaScript 函数 show() 和 click() [jquery]。此用户控件在弹出模式下使用了 AjaxControlToolkit 的弹出控件扩展器。如果此扩展器在用户控件中使用，点击日历外部和用户控件的 <div> 区域外部不会关闭弹出窗口。为了解决这个问题，使用了 show() 和 click() JavaScript 代码。show() 函数附加到用于触发弹出的文本框，而 click() 函数附加到根文档，以便在点击文档中的任何位置关闭弹出窗口。
历史
- 版本 1 - 发布日历用户控件。我会根据控件的改进随时更新。