All the tips shown below have been created using Version 3.0.20229 (targeting .NET Framework 3.5 and Visual Studio 2008).
Tip 1: How to display and hide a Calendar on the click of a Button
If you want to popup a Calendar on the click of a button, you can use set the PopupButtonID of the CalendarExtender to the ID of the button. In this case, we will be using an ImageButton as shown below:
<asp:ImageButton runat=”Server” ID=”ImageButton1″ ImageUrl=”~/Images/Icon1.jpg” AlternateText=”Click here to display calendar” />
<asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox>
<cc1:CalendarExtender ID=”CalendarExtender1″ runat=”server”
TargetControlID=”TextBox1″ PopupButtonID=”ImageButton1″/>
If you are using an earlier version of the toolkit, you may observe that the ImageButton causes a postback when you click on it again, to close the Calendar. To avoid the postback, use a HTML Image Control instead of the Server side Image Control as shown below:
<img alt=”Icon” src=”/Images/Icon1.jpg” id=”Image1″ />
<asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox>
<cc1:CalendarExtender ID=”CalendarExtender1″ runat=”server”
TargetControlID=”TextBox1″ PopupButtonID=”Image1″/>
Note: In case you are clicking on the textbox to open the calendar, then in earlier versions of the toolkit, the calendar would not hide automatically when the user clicked anywhere outside the Calendar control. However this was fixed in the later versions. In fact, in the latest version, the Calendar hides automatically when a date is selected.
If for some reason you are facing issues with the Calendar not hiding automatically, make sure that you have the latest version of the AJAX Control Toolkit.
Tip 2: How to Add a CalendarExtender to a GridView
If you want to add a CalendarExtender to a GridView, use a template field with a TextBox and CalendarExtender as shown below:
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />
<div>
<asp:GridView ID=”GridView1″ runat=”server” AutoGenerateColumns=”False” DataKeyNames=”CategoryID”
DataSourceID=”SqlDataSource1″ ShowFooter=”true” AllowPaging=”True” AllowSorting=”True”>
<Columns>
<asp:BoundField DataField=”CategoryID” HeaderText=”CategoryID”
SortExpression=”CategoryID” />
<asp:BoundField DataField=”CategoryName” HeaderText=”CategoryName”
SortExpression=”CategoryName” />
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox>
<cc1:CalendarExtender ID=”CalendarExtender1″ runat=”server” TargetControlID=”TextBox1″/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server” ConnectionString=”Data Source=SUPROTIM;Initial Catalog=Northwind;Integrated Security=True”
SelectCommand=”SELECT [CategoryID], [CategoryName] FROM [Categories]” >
</asp:SqlDataSource>
</div>
</form>
Tip 3: Enable Year Navigation in CalendarExtender
When the calendar appears, click on the title of the calendar to change the view to Months in the current year. Clicking it again, switches the view to Years, showing 10 years at a time.
If you plan to do this programmatically, here’s some code for you. Use the OnClientShown event and switch the mode using javascript. This tip was shared by one of the Microsoft® support person at the asp.net forums.
<asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox>
<cc1:CalendarExtender ID=”CalendarExtender1″
runat=”server” TargetControlID=”TextBox1″ OnClientShown=”ChangeCalendarView” />
Then add this to the <head> section
<head runat=”server”>
<title>CalendarExtender</title>
<script type=”text/javascript”>
function ChangeCalendarView(sender,args)
{
sender._switchMode(“years”, true);
}
</script>
</head>
Tip 4: Display only the day and month in the CalendarExtender
To select only the day and month without the year, use the Format property of the CalendarExtender and set it to “dd/MM” as shown below:
<cc1:CalendarExtender ID=”CalendarExtender1″ runat=”server” Format=”dd/MM” TargetControlID=”TextBox1″ />
Tip 5: How to Set Culture to work with CalendarExtender
Make sure that the ScriptManager has EnableScriptGlobalization=”true” and EnableScriptLocalization=”true”.
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”
EnableScriptGlobalization=”true” EnableScriptLocalization=”true” />
Tip 6: How to make sure user does not select a date earlier than today or greater than today
There could be instances where you do not want the user to select a day earlier than the current date. For example: when you are providing the user a form to book tickets, you would not like him to choose an earlier date. To achieve this requirement, use the following javascript code.
Prevent the User from selecting a Date Earlier than today
<head runat=”server”>
<title>Calendar Extender</title>
<script type=”text/javascript”>
function checkDate(sender,args)
{
if (sender._selectedDate < new Date())
{
alert(“You cannot select a day earlier than today!”);
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
}
</script>
</head>
Call the code:
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server” />
<div>
<asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox>
<cc1:CalendarExtender ID=”CalendarExtender1″
runat=”server” OnClientDateSelectionChanged=”checkDate” TargetControlID=”TextBox1″ />
</div>
</form>
Select Date Greater than today
In the javascript, just change this line
sender._selectedDate > new Date()
Note: You may argue that the user can still change the date by typing into the textbox or entering an invalid date. Well that can be easily handled using a ValidationControl and is covered in the next tip.
Tip 7: Add validation to the CalendarExtender Control
A simple way to add validation to the Calendar is to add a ValidationControl to the textbox associated with a CalendarExtender. You have two choices:
A. Add an ‘Extender’ to the ValidationControl. To do so, drag and drop a ValidationControl > click on the smart tag of the ValidationControl > choose ‘Add Extender’. From the Extender Wizard, choose ValidatorCalloutExtender. Using this approach makes it extremely easy to discover and attach control extenders to your controls. In VS 2005, you had to do this process manually, by wiring up control extenders.
B. You can choose not to add the Extender.
We will go ahead with option A. We will be adding two ValidationControls to the textbox. The first, a CompareValidator to check if the user does not enter an invalid date (Eg: May 32) and second, a RangeValidator to keep the date range as desired.
Adding CompareValidator
<asp:CompareValidator ID=”CompareValidator1″ runat=”server”
ControlToValidate=”TextBox1″ Display=”Dynamic” ErrorMessage=”Invalid Date”
Operator=”DataTypeCheck” Type=”Date”>
</asp:CompareValidator>
<cc1:ValidatorCalloutExtender ID=”CompareValidator1_ValidatorCalloutExtender”
runat=”server” Enabled=”True” TargetControlID=”CompareValidator1″>
</cc1:ValidatorCalloutExtender>
Adding RangeValidator – We will restrict the user to select a date range starting from today to 15 days from now.
<asp:RangeValidator ID=”RangeValidator1″ runat=”server”
ControlToValidate=”TextBox1″ ErrorMessage=”RangeValidator”
Type=”Date”>
</asp:RangeValidator>
<cc1:ValidatorCalloutExtender ID=”RangeValidator1_ValidatorCalloutExtender”
runat=”server” Enabled=”True” TargetControlID=”RangeValidator1″>
</cc1:ValidatorCalloutExtender>
In the code behind of your page, add this code
C#
protected void Page_Load(object sender, EventArgs e)
{
RangeValidator1.MinimumValue = System.DateTime.Now.ToShortDateString();
RangeValidator1.MaximumValue = System.DateTime.Now.AddDays(15).ToShortDateString();
}
VB.NET
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
RangeValidator1.MinimumValue = System.DateTime.Now.ToShortDateString()
RangeValidator1.MaximumValue = System.DateTime.Now.AddDays(15).ToShortDateString()
End Sub
Well those were some tips associated with the CalendarExtender. As future versions of the toolkit are released, we should be hopeful that there will exist easier ways, of achieving the functionality discussed in this article.
Ajax calender extender: data validation
First we add a text box and a calendarextender:
<asp:TextBox ID=”txtDate” MaxLength=”10″ runat=”server”
ReadOnly=”True”></asp:TextBox>
<cc1:CalendarExtender ID=”CalendarExtender1″ runat=”server”
Format=”dd/MM/yyyy” TargetControlID=”txtDate”
OnClientDateSelectionChanged=”checkDate”> </cc1:CalendarExtender> |
JavaScript function you want it to call when ever you select a new date, add this function the top of your aspx page:
|
<script type=”text/javascript”>
function checkDate(sender,args)
{
//create a new date var and set it to the
//value of the senders selected date
var selectedDate = new Date();
selectedDate = sender._selectedDate;
//create a date var and set it’s value to today
var todayDate = new Date();
var mssge = “”;
if(selectedDate < todayDate)
{
//set the senders selected date to today
sender._selectedDate = todayDate;
//set the textbox assigned to the cal-ex to today
sender._textbox.set_Value(sender._selectedDate.format(sender._format));
//alert the user what we just did and why
alert(“Warning! – Date Cannot be in the past”);
}
}
</script> |
Piyush's Blog 