Dotnet [techie] Shaan

Popup calendar Using JQuery/Ajax

This article describes how to demonstrate a popup calendar in asp.net with two ways, that is either 

1) how to to add an Ajax popup calendar to a textbox with the help of the AjaxControlToolkit or 2) with the help of the js(JQuery). This is a simple demonstration with nothing but the required elements on the page so we can study the code and not get confused by other distracting elements

Step 1 : with AjaxControl toolkit

         a)    create a new web form in your web application site ie. Default.aspx

Before anything else, drag and drop an ajax toolscript manager onto your page like shown below,with design.

Above the script manager, drag and drop Text boxes and sets its ID's to txtDateJS and txtDateAjax respectively.

         b)  in the txtDateAjax, you can add a calendar extender from the tag menu, The CalendarExtender is an Asp.net AJAX control that is associated with a TextBox control. When the user clicks on the TextBox, a client-side Calendar control pops up. The user can then set a date by clicking on a day, navigate months by clicking on the left and right arrow and perform other such actions without a postback.

        c) now we can create a css style property for our ajax calendar in the head section

its look like following.

to define your txtDateAjax and calendarextender as follows:-

      d) That's all.. now run the program, we will see how the textbox navigate the popup calendar when the user clicks over..

 Step 2:  With JQuery:-

         a) here, we will see how to use  the jquery calendar popup for an asp.net web application,For every application there is a basic need to select a date from the calendar control. For that we have the AJAX calendar popup extender but this Ajax calendar extender works with our ASP.Net controls but not with HTML controls. As we know, in MVC,we prefer to use HTML controls rather than ASP.Net controls like textboxes. In this application we will see how to use the calendar control of jquery for a HTML textbox when the focus is on the textbox, but in my article i have chosen from asp.net textbox control...

Before starting our work with JQ,.we need to download the custom jquery UI from here

         b) Unzip your downloaded folders and copy all the items into your web application as follows

       c) . We will use this UI and script to build our calendar popup control for MVC/Web application. So let's get started with the calendar popup

you can check out the jquery source code from the above pictures

after running your application you will see the output as follows.....

That's All....

Download sample program from here

Enjoy Programming

Thanks & Regards

techshaan2@gmail.com