很多时间我们需要获取用户输入的日期。通常，我们这样做，用一个textbox请求用户输入特殊格式的日期，使用
textbox旁边的一个帮助信息作提示。我们也将使用验证函数来验证输入日期的格式正确性。就像如下图：
这将是好的和用户友好，如果我们在textbox旁边提供一个button来弹出一个日历让用户来选择日期，一个datepicker
控件。这避免了需要确保用户输入了特殊格式也提供了一个更好的用户体验。这可以使用不同的方式来实现。这篇文章将帮助我们自己创建这个控件和其他的几种可用的选择。更远，这篇文章将帮助我们使用3种方式来创建DatePicker。
Ø 使用ASP.NET Calendar控件
Ø 使用在AJAX Control Toolkit中的Calendar Extender控件
Ø 使用jQuery DatePicker Plug-in
使用ASP.NET Calendar 控件1) 拖一个TextBox到Web页面，name为'txtDate'。
2) 你可以使用一个button控件或者一个IMG来打开日历。
现在写一个JavaScript函数来打开一个包含Calendar控件的弹出窗口。
function PopupPicker(ctl)
{
var PopupWindow=null;
PopupWindow=window.open('DatePicker.aspx?ctl='+ctl,'','width=250,height=250');
PopupWindow.focus();
}
{
var PopupWindow=null;
PopupWindow=window.open('DatePicker.aspx?ctl='+ctl,'','width=250,height=250');
PopupWindow.focus();
}
传递textbox控件的名称作为查询字符串（ctl这里）到弹出窗口，这样弹出窗口就可以移植在父窗口中需要你选择日期的textbox控件。我使用image按钮来打开日历。涉及以下代码
<img src="_images/images.jpg" style="cursor:hand" onclick="PopupPicker('txtDate')" />
创建DatePicker.aspx
1)拖一个Calendar控件到Web页面。
2)获取将要作为Query String传递的TextBox控件的Name
3)通过使用以下JavaScript函数使用选择的日期来填充父窗体的textbox
function SetDate(dateValue,ctl)
{
theForm=window.opener.document.forms[0].elements[ctl].value=dateValue;
self.close();
}
现在在Calendar1_DayRender事件中，写以下代码来调用javascript函数'SetDate'.{
theForm=window.opener.document.forms[0].elements[ctl].value=dateValue;
self.close();
}
protected void Calendar1_DayRender(object sender,DayRenderEventArgs e)
{
string ctrl = Request.QueryString["ctl"];
HyperLink hpl = new HyperLink();
hpl.Text = ((LiteralControl)e.Cell.Controls[0]).Text;
hpl.NavigateUrl = "javascript:SetDate('" + e.Day.Date.ToShortDateString() + "','" + ctrl + "');";
e.Cell.Controls.Clear();
e.Cell.Controls.Add(hpl);
}
默认，日历服务器控件的所有day链接的提交都将产生一个回发到服务器。我们在这里做的就是代替回发，我们将调用我们自定义JavaScript函数SetDate(){
string ctrl = Request.QueryString["ctl"];
HyperLink hpl = new HyperLink();
hpl.Text = ((LiteralControl)e.Cell.Controls[0]).Text;
hpl.NavigateUrl = "javascript:SetDate('" + e.Day.Date.ToShortDateString() + "','" + ctrl + "');";
e.Cell.Controls.Clear();
e.Cell.Controls.Add(hpl);
}
要做这些，我们要清除包含day链接并使用一个带javascript函数的HyperLink控件替换的表格的单元格。涉及到以上代码。执行页面并查看效果。
使用AJAX Control Toolkit中的Calendar Extender控件
下一个选择就是提供一个日期选择特性在asp.net就是使用Ajax control toolkit的Calendar extender控件。
如何去构造它?
为了使用这个特性，我们需要从这里下载Ajax control toolkit 。
阅读我们文章 Ajax Control Toolkit 介绍来集成和了解更多关于这个工具包。
我假设你已经安装了这个工具包，并集成到你的visual studio。
1.拖一个textbox控件
2.拖一个CalendarExtender控件。
3.设置textbox的ID为CalenderExtender控件属性TargetControlID的值。
执行页面。你可以看到和下图类似的日期选择控件。
这个办法的不利点是
1.这种技术对asp.net Ajax framework有一个依赖，因此它需要安装framework到生产服务器上。
2.由于asp.net ajax 客户端framework脚本，你的页面将很大。
使用jQuery DatePicker Plug-in
使用jQuery日期选择控件插件是最好的选择之一，如果你要在你的asp.net项目中构建一个日期选择控件。
如何去使用这些?
1.从jquery.com下载最新版本的jQuery类库。
2.有关以下faq在Visual Studio 2008中集成和使用jQuery类库。
3.从这里下载jQuery日期选择插件。这个插件提供多个特性。你可以在下载页面通过选择特性来下载自定义版本的插件。UICore这个选项在你下载中是必须要求选择的。你可以在下载页面的主题下拉框中选择一个需要的主题。因此，下载的文件中也必须包括主题。
4.解压并复制脚本（插件）到你的解决方案中并添加一个到插件的引用到你的aspx页面。你还需要为了主题复制css文件夹到你的解决方案中。
5.从工具箱拖一个textbox控件到你的aspx页面。
6.要使jQuery日历出现，你需要调用datepicker()函数。涉及如下代码
Code
从这知道更多和自定义jQuery日历
使用这个控件的一些好处：
Ø 它完全在客户端并不需要在服务器端执行。
Ø 可以进行更多自定义。
Ø 这还需要下载一个javascript类型到客户端，因此我们可以使用google的CDN来提高缓存，等等