Search Here

Custom Search

Tuesday, August 12, 2008

How to easily use jQuery DatePicker in ASP.NET



Download the complete source code.


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

ScreenShot.jpg

Using the code


See the 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.

Download the complete source code.

16 comments:

Iain Holder said...

Nice work!

Ketan Patel said...

Nice DatePicker.

http://www.dotnet-magic.blogspot.com/

Admir said...

Thanx a lot Osman
Allah te nagradio

Nouman said...

Fantastic Post.

Nouman said...

Fantastic Post.

Nouman said...

Fantastic Post.

Nouman said...

Fantastic Post.

Nouman said...

Fantastic Post.

Filipe C. Mondaini said...

Thanks for posting.
This datepicker is really useful.

Greetings from Brazil! :)

HookMad said...

This code not working

meenakshi said...

Thanx a Ton :)

Anushka said...
This comment has been removed by the author.
Sunnyboy said...

Big Ups, very very cool datepicker

Lord said...

... and God bless you. saved me a bunch of time trying to beat project deadlines!

Ravi said...

Good one

Ravi said...

Good one! saved a lot of time!

Thanks!