扩展 AJAX 工具包控件：禁用日历中的过去日期

• 下载演示项目 - 1.31 MB
• 下载源代码 - 11.7 Kb

引言

日期输入在网站和应用程序中非常常见，几乎是必需的。市面上有许多免费的日历脚本和商业控件，但 AJAX Toolkit Calendar Extender 可能是其中最受欢迎的。人们喜欢它，因为它免费、开源、外观漂亮，并且能在服务器端和客户端工作。

根据具体情况，有时我们需要输入过去的日期（例如出生日期、居住至今日期、会员至今日期或签发日期等），而很多时候，用户需要输入未来的日期，例如酒店或机票预订等。尽管 Calendar Extender 具有许多良好的功能，但它缺少一项重要功能，即在只需要输入未来日期时禁用过去日期。开发人员通常会采取一些变通方法，例如在日期不正确时显示警告，或将验证控件与 Calendar Extender 一起使用。禁用过去日期可能是解决此问题的优雅方法。本文的范围包括两方面：

1. 对 AJAX Toolkit 代码环境进行基本介绍，以便开发人员可以根据特定需求进行扩展
2. 扩展 Calendar 控件以禁用过去日期并使过去日期不可选

AJAX ToolKit 代码环境

新的控件经常被添加到开源 AJAX Toolkit 中。其代码可以从 http://ajaxcontroltoolkit.codeplex.com/SourceControl/list/changesets 下载，其中包含 Visual Studio 2008 和 Visual Studio 2010 的解决方案文件。项目源代码包含六个文件夹，其中有七个项目。

Client 文件夹包含客户端代码，其中的“MicrosoftAjax.Extended”项目包含 JavaScript 和 CSS 文件。这些文件用于对客户端代码进行任何更改。要对服务器端进行任何更改，可以使用 Server 文件夹中的 AjaxControlToolKit 项目。AjaxToolKit 程序集位于 SampleWebSites 文件夹的 AjaxToolKitSampleSite 的 bin 文件夹中，因此对客户端或服务器代码的任何更改都将需要先构建客户端或服务器，然后再构建 SampleWebSites。Setup、Solution Items 和 Tools 文件夹包含用于构建和测试框架的其他代码。

增强 Calendar Extender

为了增强日历功能并显示过去日期为禁用状态且不可选，我们将仅在客户端进行操作。当然，这不会从服务器端更改。让我们思考一下要实现此功能需要执行哪些步骤。

1. 首先，我们将需要处理日历的外观，并将过去日期显示为禁用状态。为此，我们将创建一个新的 CSS 类，并在日历的布局设计函数中，将此新 CSS 类应用于过去的日期。
2. 为了使过去日期不可选，我们将处理日历的日期单元格点击事件。在这里，我们将更改代码以控制过去日期的选择。

为了显示过去日期为禁用状态，我在 Server 文件夹中 AJAX Control Toolkit 项目的 Calendar 文件夹内的 Calendar_resource.css 文件中添加了以下类：

/* styles for previos dates to show them inactive*/
.ajax__calendar .ajax__calendar_deactive .ajax__calendar_day 
{     
background-color:#ffffff !important;
border-color:#ffffff !important;
color:#6D6D6D !important;
text-decoration:line-through !important;
}
.ajax__calendar .ajax__calendar_deactive .ajax__calendar_month
{     
background-color:#ffffff !important;
border-color:#ffffff !important;
color:#6D6D6D !important;     
text-decoration:line-through !important;  
}
.ajax__calendar .ajax__calendar_deactive .ajax__calendar_year
{     
background-color:#ffffff !important;      
border-color:#ffffff !important;    
color:#6D6D6D !important;     
text-decoration:line-through !important;  
}

Client 文件夹中 MicrosoftAjax.Extended 项目的 CalendarBehavior.pre.js 文件中的 `_performLayout` 函数绘制日历的布局。在天数的情况下，我们将把我们的代码添加到 JavaScript 下面的行旁边：

currentDate = new Date(currentDate.getFullYear(),
                currentDate.getMonth(), currentDate.getDate() + 1, 
                this._hourOffsetForDst);

以下是要添加的代码行：

//Code to add css for past dates.
var todaysDate = this.get_todaysDate();
var myTodaysDate = new Date(todaysDate.getFullYear(), todaysDate.getMonth(), 
   todaysDate.getDate(), this._hourOffsetForDst);
var myCurrentDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 
   currentDate.getDate(), this._hourOffsetForDst);
$common.removeCssClasses(dayCell.parentNode, 
  ["ajax__calendar_other", "ajax__calendar_active", "ajax__calendar_deactive"]);


if (myCurrentDate < myTodaysDate) {
  Sys.UI.DomElement.addCssClass(dayCell.parentNode, "ajax__calendar_deactive");
}
else {
  $common.removeCssClasses(dayCell.parentNode, ["ajax__calendar_deactive"]);
  Sys.UI.DomElement.addCssClass(dayCell.parentNode, this._getCssClass(dayCell.date, 'd'));
}

在制作日历布局时，这段代码将简单地将每个日期与今天的日期进行比较，并为每个过去的日期应用 CSS 类（之前创建的），结果是，每个过去的日期都会在日历中显示为禁用状态。

剩下的部分是使过去日期不可选。为此，将使用 `_cell_onclick` 事件。我用以下代码替换了其 `case "day":` 部分的代码：

case "day":
    var _currentDay = new Date(new Date().getFullYear(), 
        new Date().getMonth(), new Date().getDate());
    if (target.date >= _currentDay) {
        this.set_selectedDate(target.date);
        this._switchMonth(target.date);
        this._blur.post(true);
        this.raiseDateSelectionChanged();
    }
    else {
    }
    break;

构建 Client、Server 和 SampleWebSites 文件夹，并从 SampleWebSite 的 bin 文件夹中选取 AjaxControlToolkit.dll 进行测试。

关注点

根据 AJAX Toolkit 在 http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/calendar/calendar.aspx 上的示例，存在用于执行类似操作的 startDate 和 endDate 属性，但现在这些属性已不存在，微软可能希望开发人员也能学习创建新控件。

历史

• 初始文章创建于 2011 年 9 月 21 日。