Use AJAX Control Toolkit Calendar Extender With ASP.NET

Manoj Kalla

ASP.NET AJAXAjaxControlToolkitAjaxControlToolkit Calendar Extender with ASP.NET

17 Comments

Join the conversation! Your thoughts help the community grow.

Alyya Izzati7y ago
Why i got bug? top row the calendar appear. below row just appear an empty white box
- Alyya Izzati7y ago
  Still got bug. in my page, there got a table that contains lots data. my case for the upper row of the datatable, the calendar is function but for the data at the end of page, when i click the calendar icon, it just show a white box
- Bhavleen Singh7y ago
  Set padding to 0px
Bhavleen Singh7y ago
It's showing only half calendar..Why is it so ?
- Manoj Kalla7y ago
  Because of CSS or html... check it
Nandha Kumar Nagarajan7y ago
This is good sir but how can i do for currrent date in start time
Ravi Pandit9y ago
I want to store the date into database but it is taking only the default date 01-Jan-1900. Please tell me how i can save the selected date.
- Manoj Kalla9y ago
  Please, download ZIP file attached with article your problem get resolved automatically. Default Date you can change //Selection Date Start from 09th Jan 2005 Calendar1.StartDate = DateTime.Now.AddYears(-11); //Current date can be select but not future date. Calendar1.EndDate = DateTime.Now;
shaik rahmatullah9y ago
Hello Manoj, I am trying to use CalenderExtender AjaxToolKit control with ASP.NET web forms site (not the ASP.NET empty website) under framework 4.5.2. Unfortunately, the calendar does not appear with the target text box.
Shobana J10y ago
Nice one
Shobana J10y ago
Nice keep sharing
Arul R10y ago
Nice share
- Manoj Kalla10y ago
  Thank you, Arul
Santhakumar Munuswamy10y ago
Thanks for nice article
- Manoj Kalla10y ago
  Thank you, Santhakumar
Ankit Bansal10y ago
nice one..keep sharing..
- Manoj Kalla10y ago
  Thank you, Ankit

Calendar extender is a part of Ajax Control Toolkit. I will show you in this process how to implement it.

1. Create a new Web Site project.

Click File, New Web Site, then click ASP.NET Empty Web Site.

2. Right click on project.

Click Add, Add New Item and then name the Web Form as Default.aspx,

3. Before using or giving reference of Ajax Control Toolkit, first know where you will get Ajax Control Tookit.

You will get the Ajax Control Tookit resource from the following Web sites:

ASP.NET Ajax Control Toolkit Reference.

Download Ajax Control Toolkit and give reference to AjaxControlToolKit.dll file in the project.

Right click on project and then Add Reference.

After adding reference, you can see the changes in solution explore,r as in the following screenshot:

4. Here I am going to implement Calendar Extender with TextBox.

5. ToolkitScriptManager is also required on the page to execute Ajax Control Kit items like Calendar Extender.

Why is ToolkitScriptManager not ScriptManager?

6. Default.aspx code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="toolScriptManageer1" runat="server"></cc1:ToolkitScriptManager>
<div> Date of Birth
<asp:TextBox ID="txtDOB" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="Calendar1" PopupButtonID="imgPopup" runat="server" TargetControlID="txtDOB" Format="dd/MM/yyyy"> </cc1:CalendarExtender>
</div>
</form>
</body>
</html>

Output

You can see the Calendar Extender start working in the above image.

Now, I will show you how to restrict for start date and end date.

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)
{
//I am writing this article on 9th January 2015
//Selection Date Start from 09th Jan 2005
Calendar1.StartDate = DateTime.Now.AddYears(-11);
//Current date can be select but not future date.
Calendar1.EndDate = DateTime.Now;
}
}

You can set the Calendar1.StartDate value.

You can set the Calendar1.EndDate value inthe code behind.

You can see in the above image I had restricted to select future date, with the help of the code behind.

//Current date can be select but not future date.
Calendar1.EndDate = DateTime.Now;

References