Visual Studio .NET - How to use AJAX CalenderExtender in ASP.net

Asked By Abhi Rana on 25-Aug-08 03:24 AM
I want small code snippet for it

AJAX CalenderExtender - Kalit Sikka replied to Abhi Rana on 25-Aug-08 03:25 AM

Here is a simple example of how to create a dynamic CalendarExtender from code-behind:

// Create a textbox to hold the date
TextBox dateValue = new TextBox();
dateValue.ID = "dateValue";

// Create the calendar extender
AjaxControlToolkit.CalendarExtender ajaxCalendar =
new AjaxControlToolkit.CalendarExtender();
ajaxCalendar.ID = "ajaxCalendar";
ajaxCalendar.Format = "MM/dd/yyyy";
ajaxCalendar.TargetControlID = dateValue.ID;

placeHolder1.Controls.Add(dateValue);
placeHolder1.Controls.Add(ajaxCalendar);

In the ASPX, I have just a simple PlaceHolder where I append the dynamically created controls:

<asp:placeholder id="placeHolder1" runat="server">
</asp:placeholder>

AJAX CalenderExtender - Kalit Sikka replied to Abhi Rana on 25-Aug-08 03:25 AM

Here is a simple example of how to create a dynamic CalendarExtender from code-behind:

// Create a textbox to hold the date
TextBox dateValue = new TextBox();
dateValue.ID = "dateValue";

// Create the calendar extender
AjaxControlToolkit.CalendarExtender ajaxCalendar =
new AjaxControlToolkit.CalendarExtender();
ajaxCalendar.ID = "ajaxCalendar";
ajaxCalendar.Format = "MM/dd/yyyy";
ajaxCalendar.TargetControlID = dateValue.ID;

placeHolder1.Controls.Add(dateValue);
placeHolder1.Controls.Add(ajaxCalendar);

In the ASPX, I have just a simple PlaceHolder where I append the dynamically created controls:

<asp:placeholder id="placeHolder1" runat="server">
</asp:placeholder>

as follows - Web Star replied to Abhi Rana on 25-Aug-08 03:27 AM

<asp:TextBox
    ID="TextBox1"
    runat="server"
    width="300pt" />
<asp:ImageButton
    ID="btnCalenderPopup"
    Width="16" Height="16"
    runat="server"
    ImageUrl="~/images/calender.bmp"
    CausesValidation="False" />
<ajaxToolkit:CalendarExtender
    ID="CalendarExtender1"
    runat="server"
    TargetControlID="TextBox1"
    PopupButtonID="btnCalenderPopup"
    Format="dd/MM/yyyy" />
<ajaxToolkit:TextBoxWatermarkExtender
    ID="WatermarkExtender1"
    runat="server"
   TargetControlID="TextBox1"
   WatermarkCssClass="watermarked"
   WatermarkText="Enter the Date of Birth (dd/mm/yyyy)" />

And below is the CSS style that’s used with this watermark extender :

.watermarked
{
    color: #C0C0C0;
    font-style: italic;
}

All looks good now and the user is happy the way Calendar pops up, choosing the date and also the fact that he can type in the date in the textbox in the desired format. Now comes the problem - Date Validation! - How are we going to validate the entered date? - I had to validate that the date entered is not more than today’s date.

There are two ways to do it :

1) Using Javascript (with our CalendarExtender)

2) Using RangeValidators for our textbox

Using Javascript:

The CalendarExtender has a property called OnClientDateSelectionChanged which can be set to a piece of javascript which can do the job for us. Below is the code:

<ajaxToolkit:CalendarExtender
    ID="CalendarExtender1"
     runat="server"
    TargetControlID="TextBox1"
    PopupButtonID="btnCalenderPopup"
    OnClientDateSelectionChanged="checkMyDate"
    Format="dd/MM/yyyy" />

and below is the javascript:

<script type="text/javascript">
function checkDate(sender,args)
{
    var dt = new Date();
    if(sender._selectedDate > dt)
    {
        sender
            ._textbox
            .set_Value(dt.format(sender._format));
    }
}
</script>

Using RangeValidator:

Since we use a TextBox control to display our date once we choose from the calendar or to manually input the date, RangeValidators can be used to check whether the date is within a given range (minimum & maximum). Below is the code for RangeValidator :

<asp:RangeValidator
    ID="RangeValidator1"
    runat="server"
    ControlToValidate="TextBox1"
    ErrorMessage="*Please enter proper date"
    Type="Date" Display="Dynamic" />

And in your page load event we can set our maximum and minimum date values :

RangeValidator1.MinimumValue
      = new DateTime(1600, 01, 01).ToString("dd/MM/yyyy");
RangeValidator1.MaximumValue
     = DateTime.Now.ToString("dd/MM/yyyy");

With these two methods you can easily validate the date. And yes, using both would sometimes lead you to race conditions where choosing a date from the cale

see detail on this link

http://chakkaradeep.wordpress.com/2008/08/01/aspnet-ajax-calendarextender-and-validation/

use it - Deepak Ghule replied to Abhi Rana on 25-Aug-08 03:30 AM

<asp:TextBox ID="DateTextBox" runat="server" />
 
  <ajaxToolkit:CalendarExtender ID="Calendar1" runat="server" TargetControlID="DateTextBox" />


Refer this link:

http://weblogs.asp.net/scottgu/archive/2007/01/23/asp-net-ajax-1-0-released.aspx

reply - Binny ch replied to Abhi Rana on 25-Aug-08 03:34 AM
Below is the code to get started with CalendarExtender:
<asp:TextBox
    ID="TextBox1"
    runat="server"
    width="300pt" />
<asp:ImageButton
    ID="btnCalenderPopup"
    Width="16" Height="16"
    runat="server"
    ImageUrl="~/images/calender.bmp"
    CausesValidation="False" />
<ajaxToolkit:CalendarExtender
    ID="CalendarExtender1"
    runat="server"
    TargetControlID="TextBox1"
    PopupButtonID="btnCalenderPopup"
    Format="dd/MM/yyyy" />

<ajaxToolkit:TextBoxWatermarkExtender
    ID="WatermarkExtender1"
    runat="server"
   TargetControlID="TextBox1"
   WatermarkCssClass="watermarked"
   WatermarkText="Enter the Date of Birth (dd/mm/yyyy)" />

.watermarked
{
    color: #C0C0C0;
    font-style: italic;
}

Using Javascript:

The CalendarExtender has a property called OnClientDateSelectionChanged which can be set to a piece of javascript which can do the job for us. Below is the code:
<asp:RangeValidator
    ID="RangeValidator1"
    runat="server"
    ControlToValidate="TextBox1"
    ErrorMessage="*Please enter proper date"
    Type="Date" Display="Dynamic" />

Go through this link:
http://chakkaradeep.wordpress.com/2008/08/01/aspnet-ajax-calendarextender-and-validation/

http://techrepublic.com.com/2415-3513_11-170524.html
Ajax CalenderExtender - Dalvinder Singh replied to Abhi Rana on 02-Jan-09 10:07 PM

First Of All, You Have Take AjaxWeb Form. It Has ScriptManager by Default. 

Take Label,TextBox And Button

Go To Property Of Label-Text=Date Of Birth

Rigth Click On Textbox, There You Will See SmartTag Click It And GoTo CalenderExtender. Click Ok. By Click You Will There Is "+TextboxExtender" Will Be Display of the TextBox Property. Extact sign "+" then Go To PopupButtonId: Here You Have To Mention Control:Button1.

This Is The Way You Can Work With CalenderExtender..

Run It.....

Ajax CalenderExtender - Dalvinder Singh replied to Deepak Ghule on 02-Jan-09 10:13 PM

Perform This Code : You Will Know How To Use Calender Extender In Asp.net

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<br />

<asp:Label ID="Label1" runat="server" Text=" Date Of Birth"></asp:Label>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

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

<cc1:CalendarExtender ID="TextBox1_CalendarExtender" runat="server"

Enabled="True" PopupButtonID="Button1" TargetControlID="TextBox1">

</cc1:CalendarExtender>

&nbsp;&nbsp;&nbsp;

<asp:Button ID="Button1" runat="server" Text="..." />

</div>

Calenderextender in asp.net - Dalvinder Singh replied to Deepak Ghule on 02-Jan-09 10:16 PM

Use this Code You Will Get

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<br />

<asp:Label ID="Label1" runat="server" Text=" Date Of Birth"></asp:Label>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

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

<cc1:CalendarExtender ID="TextBox1_CalendarExtender" runat="server"

Enabled="True" PopupButtonID="Button1" TargetControlID="TextBox1">

</cc1:CalendarExtender>

&nbsp;&nbsp;&nbsp;

<asp:Button ID="Button1" runat="server" Text="..." />

</div>

Calenderextender in asp.net - Dalvinder Singh replied to Abhi Rana on 02-Jan-09 10:22 PM

This is way you can use calender Extender

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<br />

<asp:Label ID="Label1" runat="server" Text=" Date Of Birth"></asp:Label>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

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

<cc1:CalendarExtender ID="TextBox1_CalendarExtender" runat="server"

Enabled="True" PopupButtonID="Button1" TargetControlID="TextBox1">

</cc1:CalendarExtender>

&nbsp;&nbsp;&nbsp;

<asp:Button ID="Button1" runat="server" Text="..." />

</div>