The Ajax Control Toolkit contains a Calendar Control.

jQuery UI has an amazing alternative in the DatePicker control.

When it comes to this and all jQueryUI features, do yourself a service and check out the tabs – Overview, Options, Events, Methods, Theming. In the case of the DatePicker control, not only are all the expected events exposed and hookable but the rich Options collection will let you exercise detailed control over the date and UI formatting.

If you’re new to jQuery UI you will note that when you download the jQueryUI you can select one of a collection of preexisting themes.

Let’s begin by walking through the process of getting the jQueryUI library.

Start by hoping over to http://jqueryui.com/

We need to select a theme to use for configuring our jQueryUI download, so click on the “Demos & Documentation” link at the top of the page.

AT the top right corner of the demo area of the page there is drop-down with theme previews. Select a theme to try and then run the demos to see how that particular feature looks using the selected theme.

In our case we’ll select the Redmond Theme.

Now, go to the download page.

Choose the theme (Redmond) and select the features that you want to be included in the download.

I tend to leave all the features selected and download & and include the entire jQueryUI library but if you need to tweak download performance or you have a script conflict with another library use you can customize for your personal usage.

Of course if you’re not a do-it-yourself kind of geek you can just download one of the prebuilt downloads.

After you un-pack the downloaded zip file open the resulting directory in Windows Explorer.

Note that the download includes minified versions of all the .js files (more performant when you deploy your app) and the “i18n” directory contains multilingual resources.

Then we need to include the jQueryUI theme we selected and the jQueryUI script files that we will be using into our ASP.NET solution.

Now we’re ready to get on with things in a familiar ASP.NET / jQuery Way.

First, I include the jQuery and jQueryUI “general” stuff in my site’s MasterPage since I tend to use it all over the place.


<head runat='server'>
    <title></title>
    <script src='Scripts/jquery-1.4.1-vsdoc.js' type='text/javascript'>
	</script>
    <script src='Scripts/jquery.ui.core.js' type='text/javascript'>
	</script>
    <script src='Scripts/jquery.ui.widget.js' type='text/javascript'>
	</script>
    <link href='~/Styles/Site.css' rel='stylesheet' type='text/css' />
    <link href='Styles/jquery.ui.all.css' rel='stylesheet' type='text/css' />
    <asp:ContentPlaceHolder ID='HeadContent' runat='server'>
    </asp:ContentPlaceHolder>
</head>

Then in the ASPX page were I want to use the DatePicker, I insert the DatePicker specific references in the HeaderContent area.


<asp:Content ID='HeaderContent' runat='server' 
             ContentPlaceHolderID='HeadContent'>
    <link href='Styles/jquery.ui.datepicker.css' rel='stylesheet' 
	      type='text/css' />
    <script src='Scripts/jquery.ui.datepicker.js' type='text/javascript'>
	</script>
    <script type='text/javascript'>
    	$(function () {
    	    $('#datepicker').datepicker();
    	});
	</script>
</asp:Content>

Take special note of line 6. This selector applies the jQueryUI DatePicker to an HTML Element named “datepicker”. Since we don’t have one yet, lets add a textbox to serve as the DatePicker target.


   <div>
    Date: <asp:TextBox ID='datepicker' runat='server' ClientIDMode='Static'>
          </asp:TextBox>
    <br /><br />
    <asp:Button ID='Button1' runat='server' onclick='Button1_Click' 
                Text='Submit' />
    <br /><br />
    <asp:Label ID='LabelResult' runat='server'></asp:Label>
    </div>

Note that the DatePicker is attached to an ASP.NET Server Control (a TextBox)

I’ve also added an ASP.NET Label control that we can use to show some server side processing.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        LabelResult.Text = &quot;You selected : &quot; + datepicker.Text;
    }
}

Here is what we get.

When we pick a date and click on the Submit button we see this.

You can download the working code [ HERE ]