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

Ajax 日历控件

Donsw
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.46/5 (9投票s)

2009年4月14日

CPOL

3分钟阅读

viewsIcon

230263

downloadIcon

9658

讨论日历控件如何使用 Ajax 工作

引言

本文展示了如何配置 Ajax 日历控件。

背景

Ajax 工具包中包含许多不同的控件，本文仅解释其中一个。您可以从 Microsoft 的 此处 获取该工具包。

Using the Code

代码将展示使用日历的几种不同方式。屏幕截图显示了每种方式的显示效果。

main

第一个日历是一个标准的日历，没有任何更改。该控件只是将所选日期传递到文本框。代码如下所示：

<b>Normal Control:</b>
<asp:TextBox runat="server" ID="txtDate1" />
<ajaxtoolkit:calendarextender runat="server" ID="calExtender1"
                                        TargetControlID="txtDate1"/>

这将显示一个如下所示的日历。当您将光标放在文本框中时，将显示日历。

scr1

第二个日历有一个按钮，使用样式表，并且具有独特的格式。我们现在开始向控件添加其他命令。

<b> Control with PopupButtonID, CssClass,Format:</b>
<asp:TextBox runat="server" ID="txtDate2"  Text="11/01/2006" />
<asp:Image runat="server" ID="btnDate2"
            AlternateText="cal2"
            ImageUrl="~/images/calendaricon.jpg" />
<ajaxtoolkit:calendarextender runat="server" ID="calExtender2"
            PopupButtonID="btnDate2"
            CssClass="AjaxCalendar"
        TargetControlID="txtDate2" Format="MMMM d, yy" />

这将显示一个如下所示的日历。现在您拥有一个具有不同颜色的日历，并且一旦您选择日期，文本框中的日期将以与原始格式不同的格式显示。

screen2

第三个控件只是将日历显示在不同的位置。

<b>Control with topright:</b>
<asp:TextBox ID="txtDate3" runat="server" Width="70"> </asp:TextBox>
<ajaxtoolkit:calendarextender ID="calExtender3" runat="server"
    PopupButtonID="btnDate3" PopupPosition="TopRight"
    TargetControlID="txtDate3" >
</ajaxtoolkit:calendarextender>
<asp:ImageButton ID="btnDate3" ImageUrl="~/images/CalendarIcon.jpg"
    Width="20px" runat="server" />

请注意，这些属性与我们一直使用的非常相似。唯一的新不同之处是 PopupPosition。

screen3

第四个控件确保我们不输入早于今天的日期。为此，您需要具有 HTML 来拥有文本框和 ASP 控件，还需要 JavaScript 来检查日期是否有效。一旦您添加了 OnClientDateSelectionChanged 属性并选择了日期，JavaScript checkDate 就会执行。如果用户选择的日期早于今天，则会显示一个错误，并将今天的日期输入到文本框中。

<b>Control with no date earlier than today:</b>
<asp:TextBox ID="txtDate4" runat="server" Width="70"></asp:TextBox>
<ajaxtoolkit:calendarextender ID="calExtender4" runat="server"
    PopupButtonID="btnDate4" PopupPosition="TopRight"
    TargetControlID="txtDate4" OnClientDateSelectionChanged="CheckDateEalier">
</ajaxtoolkit:calendarextender>
<asp:ImageButton ID="btnDate4" ImageUrl="~/images/CalendarIcon.jpg"
    Width="20px" runat="server"  />

JavaScript

<title>Ajax Calendar Control</title>
<script type="text/javascript">
function CheckDateEalier(sender,args) {
    if (sender._selectedDate < new Date()) {
         alert("You cannot select a day before today!");
         sender._selectedDate = new Date();
         // set the date back to the today
         sender._textbox.set_Value(sender._selectedDate.format(sender._format))
    }
}
</script>

当您选择早于今天的日期时，您只会得到一个带有错误的消息框。

screen4

这一切都始于我想显示一个日历控件，并且如果文本框中尚未输入任何内容，则用轮廓显示今天的日期。我阅读了很多网页才能获得最后一个控件。此控件使用 OnClientShowing 属性。一旦 JavaScript DisplayDate 被调用，请查看日期是否为 null，这意味着文本框中没有输入任何内容，然后在控件中设置今天的日期。简单吧？

<b>Control with todays date :</b>
<asp:TextBox ID="txtDate5" runat="server" Width="70"></asp:TextBox>
<ajaxtoolkit:calendarextender ID="calExtender5" runat="server"
    PopupButtonID="btnDate5" PopupPosition="Right" OnClientShowing="DisplayDateToday"
    TargetControlID="txtDate5" >
</ajaxtoolkit:calendarextender>
<asp:ImageButton ID="btnDate5" ImageUrl="~/images/CalendarIcon.jpg"
    Width="20px" runat="server"  />

JavaScript

<title>Ajax Calendar Control</title>
<script type="text/javascript">
function DisplayDateToday(sender, args) {
    if (sender._selectedDate == null) {
        sender._selectedDate = new Date();
    }
}
</script>

样式表

我将此样式表用于日历 2。我只使用了几个来展示基本原理。还有很多我无法在此处介绍。

.AjaxCalendar .ajax__calendar_container
{
	border:1px solid #646464;
    background-color: yellow;
    color: red;
}

.AjaxCalendar .ajax__calendar_other .ajax__calendar_day,
.AjaxCalendar .ajax__calendar_other .ajax__calendar_year
{
	color: Black;
}

.AjaxCalendar .ajax__calendar_hover .ajax__calendar_day,
.AjaxCalendar .ajax__calendar_hover .ajax__calendar_month,
.AjaxCalendar .ajax__calendar_hover .ajax__calendar_year
{
	color:  White;
}

.AjaxCalendar .ajax__calendar_active .ajax__calendar_day,
.AjaxCalendar .ajax__calendar_active .ajax__calendar_month,
.AjaxCalendar .ajax__calendar_active .ajax__calendar_year
{
	color: Purple;
	font-weight:bold;
}

日历属性

以下是您将在控件的属性页面中遇到的一些属性以及对它们功能的简要说明

  • TargetControlID - 日历的文本框的 ID
  • CssClass - 用于设置日历样式的 CSS 类的名称
  • Format - 保存要显示的格式的 string
  • PopupButtonID - 用于显示单击时日历弹出窗口的控件的 ID。如果未设置该值，则当文本框获得焦点时，日历将弹出。
  • PopupPosition - 指示日历弹出窗口应出现的位置
    • BottomLeft （默认）
    • BottomRight
    • TopLeft
    • TopRight
    • 左侧
    • 右侧
  • SelectedDate - 指示日历将初始化为的日期
  • FirstDayOfWeek - 将哪一天用作一周的第一天
    • Sunday
    • Monday
    • 星期二
    • 星期三
    • 星期四
    • Friday
    • Saturday
    • 默认值

关注点

我学到的第一件事是，您可以将 AjaxControlToolkit.dll 拖放到 Visual Studio 工具箱上，并列出所有控件。我创建了一个新选项卡，以方便我使用。第二是，如果您足够努力地寻找，您可以找到您需要的信息。我阅读了很多很多网页来获得这些信息，并想感谢我阅读的每个人的网页。

历史

  • 2009 年 4 月 9 日 - 首次发布
© . All rights reserved.