Thursday, 1 October 2009

The easy way to use jQuery DatePicker on ASP.NET controls

There are several posts on the internet on how to use jQuery datepicker control on ASP.NET (controls). Most of the solutions works with ASP.NET MVC from Microsoft (http://www.asp.net/mvc/). Other wrote their own extension classes and you need to use them to get it work. With other words, a lot of extra development steps and stuff. And that's not what I was looking for.

I was looking for a smaller, faster and easier way of attaching the JQuery datepicker to one of my controls. So I just tried to figure out my own route, and I found one.

Here follows the way I did it.
1. Just use the ordinary ASP.NET textbox for entering a date:

<asp:TextBox ID="txtDate" runat="server" Width="79px"></asp:TextBox>

2. Downloaded the appropriate JQuery libraries, placed them on your website and place a reference to the libraries (jqueryui.com/download/)

<script type="text/javascript" src="/umbraco_client/ui/jquery.js"></script>
<script type="text/javascript" src="/umbraco_client/ui/effects.core.js"></script>
<script type="text/javascript" src="/umbraco_client/ui/ui.datepicker.js"></script>

3. You can use one of the predefined themes (http://jqueryui.com/themeroller/). Place a reference to the CSS

<link href="/CSS/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />

Ok, so far it's just ordinary stuff. Nothing special.

4. As mentioned in step 1, the input box for a date is called txtDate. As you know, looking at the source code of you page when its rendered, the name (and also the id) is 'renamed' to something like 'ctl00_ctl00_ctl00_ContentPlaceHolderDefault_MasterTemplateContentPlaceHolder_ctl01_ContactForm_4_txtDate'
Don't worry, as long as there is the 'txtDate' part inside the name, the following JQuery function will find it:

<script>
$(document).ready(function() {
$("input[name*='txtDate']").datepicker();
});
</script>

This piece of code will attach the jQuery datepicker functionality onto all input boxes with (somewhere) txtDate in the name. E.g. it will find input boxes with the name 'ct100_(...)_txtDateIn', 'ct100_(...)_txtDateOut', 'ct100_(...)_oldtxtDateIn' etc. As long as txtDate is used, it will be found.

I placed this code in the header section of my master page, so all forms that has a txtDate input box, will get the JQuery datepicker.

14 comments:

:) said...

can any one help me out how to implement datepicker in sharp architecture

Robje said...

Hi, can you be a bit more clear?
My example is not dependent to c# or vb.net. I was using asp.net controls on my aspx page. The jQuery part is doing the rest.

:) said...

Hi Robje,Thanks for the reply.
I am using s#arp architecture to implement my project and i am finding difficult in adding datepicker in aspx

Robje said...

In my example, I have an ordinary asp.net textbox placed on a aspx page. I used as name txtName.

Step 2 is placing references to javascript libraries. This is done in the HEAD section of your aspx page. You need to place these js libraries somewhere in your website. These js files will do the datepicker stuff.

Also, I placed a reference (also in the HEAD section) to a stylesheet (responsible for the layout of the datepicker).

In step 4, I placed a script inside the head section (just before the end of the head section) which will attach the jQuery datepicker functionality onto each textbox on the aspx page which have txtDate somewhere in the name.
If you placed other textboxes with txtNames somewhere in the name, the datepicker is attached as well.

Supplement Pro said...

With a master page it will not work without doing this, i spent (wasted) hours on it. Thus This solution works great, but if you have a master page, you must visit this link below (it is not my article or site, i commented on it, as i had 1 issue i resolved)
http://blog.waleedmohamed.net/2009/12/aspnet-master-page-and-jquery-reference.html

Robje said...

@Supplement Pro:
I have my solution running inside a master page and it works well.
I just run into small jquery problems as well and it seems that sometimes the order of the different functions is more important as it seems.

Ne7ven said...

hi Robje

Your post is very helpful for me, How can i validate DatePicker is now allowed choose date later current system's date .
For Example : Current System date is today 06/04/2010 so the Datepicker will block all date before that date.

Ne7ven said...

hi Robje

Your post is very helpful for me, How can i validate DatePicker is now allowed choose date later current system's date .
For Example : Current System date is today 06/04/2010 so the Datepicker will block all date before that date.

Robje said...

@Ne7ven: For this you can set the mindate property for the datepicker. See also: http://docs.jquery.com/UI/Datepicker#option-minDate.

FFOX said...

Hi Robje,
Its a beautiful solution for my ASP.net project. I was wondering around at Internet and finding such kind of solution. Its work perfect.
but sorry to say that and no offence. what 'Supplement Pro' said was useful. We need to move that script part in our Master Page's script section. If not, will be an error at the script. At first, I also do the same and got error and stuck at there. Only after reading the comments section i found that link and move my script to Master script portion and its working. One thing to take note is don't give the same name in different page, if not, it will pop up lovely jQuery DatePicker :)

FFOX said...

oh yeah, forgot to say one thing.
Thanks 'Robje' and 'Supplement Pro' :) you guys save my day!

Robje said...

@FFOX and @Supplement Pro : You're right. If you have master pages, you should place the piece of jQuery code inside the master page. In the solution I worked with, I put it also inside the master page. Thanks for that extra comment!

holden321 said...

http://jscontrols.ru/?datepicker

Mauricio Gracia said...

Great article...BUT keep in mind that you need this code in the CodeBehind of the MasterPage

protected void Page_Load(...)
{
Page.Header.DataBind();
}