65.9K
CodeProject 正在变化。 阅读更多。
Home

AJAX Calendar Extender

Gul Ahmad
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.43/5 (6投票s)

2012年6月27日

CPOL

4分钟阅读

viewsIcon

61388

ASP.NET AJAX 日历扩展器 – 技巧和窍门。

CalendarExtender 是一个与 TextBox 控件关联的 ASP.NET AJAX 控件。当用户点击 TextBox 时，会弹出一个客户端日历控件。然后，用户可以通过点击某一天来设置日期，通过点击左右箭头来导航月份，并执行其他此类操作，而无需回发。在本文中，我们将介绍一些可以应用于 CalendarExtender 控件的技巧和窍门。如果您是 CalendarExtender 控件的新手，您可以访问这里查看一些相关信息。

我假设您具有开发 ASP.NET AJAX 应用程序的一些基本经验，并且已经安装了ASP.NET Ajax 库和ASP.NET 控件工具包。截至本文撰写时，工具包版本为 1.0.20229 版（如果您的目标是 Framework 2.0、ASP.NET AJAX 1.0 和 Visual Studio 2005）和 3.0.20229 版（如果目标是 .NET Framework 3.5 和 Visual Studio 2008）。

下面显示的所有技巧都是使用 3.0.20229 版（目标是 .NET Framework 3.5 和 Visual Studio 2008）创建的。

技巧 1：如何在点击按钮时显示和隐藏日历

如果您想在点击按钮时弹出一个日历，您可以将 CalendarExtender 的 PopupButtonID 设置为按钮的 ID。在这种情况下，我们将使用 ImageButton，如下所示

<asp:ImageButton runat="Server" ID="ImageButton1" ImageUrl="~/Images/Icon1.jpg" AlternateText="Click here to display calendar" /> 
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" 
TargetControlID="TextBox1" PopupButtonID="ImageButton1"/>

如果您使用的是工具包的早期版本，您可能会观察到，当您再次单击 ImageButton 以关闭日历时，会导致回发。为了避免回发，请使用 HTML Image 控件而不是服务器端 Image 控件，如下所示

<img alt="Icon" src="https://codeproject.org.cn/Images/Icon1.jpg" id="Image1" />

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<cc1:CalendarExtender ID="CalendarExtender1" runat="server" 
TargetControlID="TextBox1" PopupButtonID="Image1"/>

注意：如果您点击文本框以打开日历，那么在工具包的早期版本中，当用户点击日历控件之外的任何位置时，日历不会自动隐藏。然而，这个问题在后来的版本中得到了修复。事实上，在最新版本中，选择日期后日历会自动隐藏。

如果由于某种原因您遇到日历无法自动隐藏的问题，请确保您拥有最新版本的 AJAX 控件工具包。

技巧 2：如何将 CalendarExtender 添加到 GridView

如果您想将 CalendarExtender 添加到 GridView，请使用带有 TextBox 和 CalendarExtender 的模板字段，如下所示

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>
    <asp:GridView ID="GridView1" runat="server" 
          AutoGenerateColumns="False" DataKeyNames="CategoryID"
          DataSourceID="SqlDataSource1" ShowFooter="true" 
          AllowPaging="True" AllowSorting="True">
        <Columns> 
           <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" 
             SortExpression="CategoryID" />
              <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" 
             SortExpression="CategoryName" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <cc1:CalendarExtender ID="CalendarExtender1" 
                      runat="server" TargetControlID="TextBox1"/>
            </ItemTemplate>
        </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="Data Source=SUPROTIM;Initial Catalog=Northwind;Integrated Security=True"
        SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]" >
    </asp:SqlDataSource>
    </div>
</form>

技巧 3：在 CalendarExtender 中启用年份导航

当日历出现时，单击日历的标题将视图更改为当前年份中的月份。再次单击它，将视图切换为年份，一次显示 10 年。

如果您计划以编程方式执行此操作，请参考以下代码。使用 OnClientShown 事件并使用 javascript 切换模式。此技巧由 Microsoft® 支持人员之一在 ASP.NET 论坛上分享。

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
 <cc1:CalendarExtender ID="CalendarExtender1" 
runat="server" TargetControlID="TextBox1" OnClientShown="ChangeCalendarView" />

然后将其添加到 <head> 部分

<head runat="server">
<title>CalendarExtender</title>

<script type="text/javascript">
function ChangeCalendarView(sender,args)
{
sender._switchMode("years", true);            
}
</script>
</head>

技巧 4：仅在 CalendarExtender 中显示日期和月份

要仅选择日期和月份，而不选择年份，请使用 CalendarExtender 的 Format 属性并将其设置为“dd/MM”，如下所示

<cc1:CalendarExtender ID="CalendarExtender1" runat="server" Format="dd/MM" TargetControlID="TextBox1" />

技巧 5：如何设置 Culture 以与 CalendarExtender 一起使用

确保 ScriptManager 具有 EnableScriptGlobalization="true" 和 EnableScriptLocalization="true"。

<asp:ScriptManager ID="ScriptManager1" runat="server"
    EnableScriptGlobalization="true" EnableScriptLocalization="true" />

技巧 6：如何确保用户不选择早于今天或晚于今天的日期

在某些情况下，您可能不希望用户选择早于当前日期的日期。例如：当您向用户提供预订机票的表格时，您不希望他选择更早的日期。为了实现此要求，请使用以下 javascript 代码。

阻止用户选择早于今天的日期

<head runat="server">
    <title>Calendar Extender</title>
    <script type="text/javascript">
    function checkDate(sender,args)
{
 if (sender._selectedDate < new Date()) 
{
alert("You cannot select a day earlier than today!");
sender._selectedDate = new Date(); 
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
}
    </script>
</head>

调用代码

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <cc1:CalendarExtender ID="CalendarExtender1" 
        runat="server" OnClientDateSelectionChanged="checkDate" TargetControlID="TextBox1" />
    </div>
</form>

选择大于今天的日期。在 javascript 中，只需更改这一行。

sender._selectedDate > new Date()

注意：您可能会争辩说，用户仍然可以通过在文本框中输入或输入无效日期来更改日期。嗯，这可以使用 ValidationControl 轻松处理，并在下一个技巧中介绍。

技巧 7：向 CalendarExtender 控件添加验证

向日历添加验证的一个简单方法是向与 CalendarExtender 关联的文本框添加 ValidationControl。您有两个选择

  1. 向 ValidationControl 添加“扩展器”。为此，请拖放 ValidationControl > 单击 ValidationControl 的智能标记 > 选择“添加扩展器”。从扩展器向导中，选择 ValidatorCalloutExtender。使用这种方法可以非常容易地发现控件扩展器并将它们附加到您的控件。在 VS 2005 中，您必须手动执行此过程，通过连接控件扩展器。
  2. 您可以选择不添加扩展器。

我们将继续选择 A。我们将向文本框添加两个 ValidationControl。第一个是 CompareValidator，用于检查用户是否输入了无效日期（例如：5 月 32 日），第二个是 RangeValidator，用于保持所需的日期范围。

添加 CompareValidator

<asp:CompareValidator ID="CompareValidator1" runat="server" 
                ControlToValidate="TextBox1" Display="Dynamic" ErrorMessage="Invalid Date" 
                Operator="DataTypeCheck" Type="Date">
</asp:CompareValidator>
<cc1:ValidatorCalloutExtender ID="CompareValidator1_ValidatorCalloutExtender" 
                runat="server" Enabled="True" TargetControlID="CompareValidator1">
</cc1:ValidatorCalloutExtender>

添加 RangeValidator – 我们将限制用户选择从今天开始到 15 天后的日期范围。

<asp:RangeValidator ID="RangeValidator1" runat="server" 
                ControlToValidate="TextBox1" ErrorMessage="RangeValidator" 
                Type="Date">
</asp:RangeValidator>
<cc1:ValidatorCalloutExtender ID="RangeValidator1_ValidatorCalloutExtender" 
                runat="server" Enabled="True" TargetControlID="RangeValidator1">
</cc1:ValidatorCalloutExtender>

在页面的代码隐藏中，添加以下代码

C#

protected void Page_Load(object sender, EventArgs e)
{
RangeValidator1.MinimumValue = System.DateTime.Now.ToShortDateString();
RangeValidator1.MaximumValue = System.DateTime.Now.AddDays(15).ToShortDateString();
}

VB.NET

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
RangeValidator1.MinimumValue = System.DateTime.Now.ToShortDateString()
RangeValidator1.MaximumValue = System.DateTime.Now.AddDays(15).ToShortDateString()
End Sub
© . All rights reserved.