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

在 ASP.NET 中轻松使用 jQuery DatePicker

Sowkot Osman
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.62/5 (9投票s)

2008年8月12日

CPOL

1分钟阅读

viewsIcon

96808

downloadIcon

3327

在 ASP.NET 中轻松使用 jQuery DatePicker。

引言

JQuery 是一个优秀的 JavaScript 库，用于构建现代、交互性强的网站。在任何 Web 应用程序中使用 jQuery 都非常容易。jQuery 拥有一套强大的 JavaScript UI 控件，例如日期选择器、选项卡面板等。

我编写了一个小型实用程序类，用于在 ASP.NET 中使用 jQuery DatePicker。使用这个类非常简单。你只需要传递 Page 对象和页面上的 TextBox 即可。

屏幕截图

ScreenShot.jpg

使用代码

请查看以下实用程序类

using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Util
{
    public class JQueryUtils
    {
        public static void RegisterTextBoxForDatePicker(Page page, 
                           params TextBox[] textBoxes)
        {
            RegisterTextBoxForDatePicker(page, "dd-mm-yy", textBoxes);
        }
        public static void RegisterTextBoxForDatePicker(Page page, 
               string format, params TextBox[] textBoxes)
        {
            bool allTextBoxNull = true;
            foreach (TextBox textBox in textBoxes)
            {
                if (textBox != null) allTextBoxNull = false;
            }
            if (allTextBoxNull) return;
            page.ClientScript.RegisterClientScriptInclude(page.GetType(), 
                 "jquery", "JQuery/jquery.js");
            page.ClientScript.RegisterClientScriptInclude(page.GetType(), 
                 "jquery.ui.all", "JQuery/ui/jquery.ui.all.js");
            page.ClientScript.RegisterClientScriptBlock(page.GetType(), 
                 "datepickerCss", 
                 "<link  rel=\"stylesheet\" href=\"JQuery/themes/" + 
                 "flora/flora.datepicker.css\" />");
            StringBuilder sb = new StringBuilder();
            sb.Append("$(document).ready(function() {");
            foreach (TextBox textBox in textBoxes)
            {
                if (textBox != null)
                {
                    sb.Append("$('#" + textBox.ClientID + "').datepicker(
                       {dateFormat: \"" + format + "\"});");
                }
            }
            sb.Append("});");
            page.ClientScript.RegisterClientScriptBlock(page.GetType(), 
                 "jQueryScript", sb.ToString(), true);
        }
    }
}

使用方法非常简单。如果在你的 .aspx 页面中有一个名为 MyDateTextBox 的 TextBox，那么你需要在 Page_Load 事件中编写以下代码，将 TextBox 与 jQuery 关联

protected void Page_Load(object sender, EventArgs e)
{
    Util.JQueryUtils.RegisterTextBoxForDatePicker(Page, MyDateTextBox); 
}

第二个参数接受可变参数。因此，你可以将任意数量的 TextBox 传递给该函数。还有一个重载函数，可以指定你想要的日期 格式。

你必须从 jQuery UI 网站 http://ui.jquery.com/download 下载 jQuery 库。

你可以只下载 DatePicker 的文件。但请记住重命名我的 JQueryUtils 类中的 .js 文件。你可以看到我编写了 jQuery 核心库 JavaScript 文件名、.ui.all.js 文件和 DatePicker 的 .css 文件。

我也附上了一个示例项目。祝好！

我的其他文章

© . All rights reserved.