Tutorial: How to use jQuery DatePicker UI inside your ASP.NET Web Application

By: Ahmed Hussam
  jQuery DatePicker Features:

 The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages,

 You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.

By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span.

You can use keyboard shortcuts to drive the datepicker:

• page up/down - previous/next month
• ctrl+page up/down - previous/next year
• ctrl+home - current month or open when closed
• ctrl+left/right - previous/next day
• ctrl+up/down - previous/next week
• enter - accept the selected date
• ctrl+end - close and erase the date
• escape - close the datepicker without selection

 For more details about the options and features that the datepicker provides see 

http://jqueryui.com/demos/datepicker

 

jQuery DatePicker Control that Dynamically appears when cursor is set on the target textbox

How to integrate jQuery DatePicker into ASP.NET Application:

1-You need to add reference to the jquey library and the jquery ui library, you can do this by adding these two lines to your head section

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>

2-add the folder “css”  to your web application root folder to add the style and theme to your datepicker, you can find the “css” folder

3-Add a reference to the style sheet that with add the theme to the dynamic datepicker

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

4-Add the following  javascript to your page, to attach the asp textbox controls that will function as datepickers in your page with jquery  datepicker functions:

<script type="text/javascript">

        $(function() {

        $(".jqtxtDate").datepicker();

        });

</script>

5-".jqtxtDate" is the class that if added to any asp:TextBox control in your page, it will turn it to a datepicker 

6-Finally, add the” jqtxtDate" to the  class attribute of your asp:TextBox like the following:

<asp:TextBox ID="txtDate" runat="server" class="jqtxtDate"></asp:TextBox>

7-by following the above steps, you can feature a dynamic, easy to use and good looking datepicker to your end-users

8-you can download the source code for a complete demo application showing the integration of the jquery datepicker in an asp.net web application

About Ahmed Hussam:

 .NET Software Engineer II, at Symbyo Technologies.Contact with Ahmed at:
http://www.linkedin.com/profile/view?id=86169831&authType=name&authToken=r1At&trk=tyah.