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.