Click here to Skip to main content
Click here to Skip to main content

How to use ASP.NET AJAX Calender Extender

, 20 Jun 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
How to use ASP.NET AJAX Calender Extender

Introduction

This is an easy way to link ASP.NET AJAX calender with a textbox so that selecting date from calender is captured by the textbox.

Background

There are many useful controls in ASP.NET AJAX toolkit - AJAX Calender Extender is one of them.

Using the Code

Today, I am going to demonstrate an easy way to link ASP.NET AJAX Calender Extender with a textbox so that selecting date from calender is captured by the textbox.

Important (Point to remember): Make sure you have AjaxControlToolkit.dll in your bin folder.

Add ASP.NET textbox from toolbar on your page:

<asp:TextBox ID="DateTextBox" runat="server"  />

Now add ASP.NET image tag from toolbar on your page:

<asp:Image ID="Image1" runat="server" ImageUrl="Calendar_icon.png" />

This image tag will display a small icon of calender so that the user can click on the calender icon to open up the calender tool.

Now add AJAX CalendarExtender tag on your page like this:

<ajaxToolkit:CalendarExtender ID="CalendarExtender1" 
    runat="server" TargetControlID="DateTextBox" 
    PopupButtonID="Image1">
</ajaxToolkit:CalendarExtender>

The AJAX CalendarExtender makes a connection with the textbox and image tag.

Your code should look like this:

<asp:TextBox ID="DateTextBox" runat="server"  />
<asp:Image ID="Image1" runat="server" ImageUrl="Calendar_scheduleHS.png" />
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" 
    TargetControlID="DateTextBox" PopupButtonID="Image1">
</ajaxToolkit:CalendarExtender>

Make sure you add this in your webconfig:

<pages>
      <controls>
       
 <add tagPrefix="asp" namespace="System.Web.UI" 
assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, 
PublicKeyToken=31bf3856ad364e35"/>
        <add namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" 
            tagPrefix="ajaxToolkit"/>
      </controls>
    </pages>

That's all you need in order to make ASP.NET AJAX Calender tool work with your textbox.

For more information, please see the original article on my website (written by me) here.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Lavish Kumar
Software Developer
United States United States
Founder of Striving Programmers Online Community: http://www.strivingprogrammers.com
 
I am a programmer / web developer / software developer / graphic designer / database administrator.
 
Working with .NET Frameworks 2.0/3.5/4.0, MS SQL Server 2000/2005/2008, Oracle 8i/9i/10G, ASP.NET, C#.NET, VB.NET, ASP.NET AJAX, ASP.NET MVC, Web Services, JQuery, HTML, CSS, JavaScript and other programming languages .
 
Proficient in designing tools: Adobe Photoshop & Adobe Illustrator

Comments and Discussions

 
GeneralMy vote of 5 PinprofessionalSampath Lokuge29-Jun-13 5:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.141015.1 | Last Updated 21 Jun 2012
Article Copyright 2012 by Lavish Kumar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid