How to easily use jQuery DatePicker in ASP.NET

• Download JQueryDatePickerExmple - 418.93 KB

Introduction

JQuery is an excellent javascript library to build modern user interactive website.
Its very easy to use jQuery in any web application. jQuery has a strong set of javascript UI like datePicker, Tab Panel etc.

I've written a small Utility class to use jQuery datePicker in ASP.NET and publishing it in this post.
Its very simple to use this class. You just need to pass the Page object and TextBox of your page.

Screen Shot

Using the code

See the following Util Class.

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);
        }
    }
}  

The usage is very simple. If you have a TextBox named MyDateTextBox in your .aspx page then you have to write following line
in the Page_Load event to attach the TextBox with jQuery.

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

The second parameter takes variable arguments. So you can pass any number of TextBox to the function.
There is also an overloaded function to take your desired date format.

You must download the jQuery library from jQuery UI site http://ui.jquery.com/download

You can only download the files for datePicker. But remember to rename the .js files in My JQueryUtils class.
You can see I've written the jQuery core library js file name, .ui.all.js file and the .css file for datePicker.

I've attached a sample project hereby. See it.
Cheers!

My Other Articles

*) Common Validation and Length Validation with Regular Expression in ASP.NET

*) How to easily use jQuery DatePicker in ASP.NET

*) Generating Unique Key(Finger Print) for a Computer for Licensing Purpose

*) How solving ACM problems is helpful to develop quality software

*) Insertion problem with ASP.NET AccessDataSource

*) A simple method to compare versions

*) How to show a pdf in landscape mode using iText API in Java

*) Properly display paragraphs in browser

*) Mounting NTFS partition in Debian