ASP.NET AJAX Calendar Extender – Tips and Tricks

Posted by: Suprotim Agarwal , on 5/2/2008, in Category ASP.NET AJAX
Views: 744713
Abstract: 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. In this article, we will see some tips and tricks that can be applied to a CalendarExtender control.
ASP.NET AJAX Calendar Extender – Tips and Tricks
 
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. In this article, we will see some tips and tricks that can be applied to a CalendarExtender control. If you are new to the CalendarExtender control, you can check out some information about it over here.
I assume you have some basic experience developing ASP.NET Ajax applications and have installed the ASP.NET Ajax Library and ASP.NET Control Toolkit. As of this writing, the toolkit version is Version 1.0.20229 (if you are targeting Framework 2.0, ASP.NET AJAX 1.0 and Visual Studio 2005) and Version 3.0.20229 (if targeting .NET Framework 3.5 and Visual Studio 2008).
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. I hope this article was useful and I thank you for viewing it.
If you liked the article,  Subscribe to my RSS Feed. 

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Using Script reference Profiler to Improve the Performance of an ASP.NET AJAX page

ASP.NET AJAX SlideShow Extender - Some Common Tips and Tricks

Using the ASP.NET AJAX ModalPopup in an ASP.NET 3.5 Application

Executing ClientScript Before and After an Asynchronous PostBack using ASP.NET AJAX

ASP.NET AJAX CollapsiblePanelExtender - Tips and Tricks

3 Different Ways to Display Progress in an ASP.NET AJAX Application

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for Fifteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn



Page copy protected against web site content infringement by Copyscape



Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Tim on Tuesday, June 3, 2008 12:10 PM
Great article, and I found it just in time to use a calander control. Thanks a bunch.
Comment posted by Mitch on Thursday, June 19, 2008 11:34 AM
This is a great article.  I'm having a problem with the RangeValidator though. I"m using ajax tabpanels inside a FormView.  When I use the code-behind for C#, it erros that it can't find the RangeValidator1.

How do I find the RangeValidator1 is inside the FormView and Ajax Tab:
FormView1.TabContainer1.TabPanel2.DateTextBox
Comment posted by Suprotim Agarwal on Friday, June 20, 2008 11:08 PM
Tim, Mitch: Thanks for the comments.

Mitch: Did you try using FindControl()?
Comment posted by Ronald Avendaño on Monday, June 23, 2008 6:01 PM
Great job, i guess its easy to use.

ronald.avendano@gmail.com
Web Developer
Comment posted by Bob on Friday, June 27, 2008 11:28 AM
Seems that using the < sign will not work if the user selects the current day. Also tried this but it also alerts:

if ((sender._selectedDate >= new Date())==false)

selectedDate is returned as follows:

Fri Jun 27 2008 00:00:00 GMT -400 (Eastern Daylight Time)

new Date() is returned as follows:

Fri Jun 27 2008 11:16:45 GMT -400 (Eastern Daylight Time)

I'm guessing because of the time value selecting the current day fails the < comparison.  Since the >= comparison mimics the < comparison it also fails.

So what do we do? Parse the string and only match on the day?

-- Bob
Comment posted by Jack on Friday, June 27, 2008 11:37 AM
The above doesn't work when you use a popupbuttonid field.  It ends up not firing at all.
And Bob, if you want them to select from Today back, shouldn't you be using <= instead of >=?  
Comment posted by Bob on Friday, June 27, 2008 11:47 AM
Seems that using the < sign will not work if the user selects the current day. Also tried this but it also alerts:

if ((sender._selectedDate >= new Date())==false)

selectedDate is returned as follows:

Fri Jun 27 2008 00:00:00 GMT -400 (Eastern Daylight Time)

new Date() is returned as follows:

Fri Jun 27 2008 11:16:45 GMT -400 (Eastern Daylight Time)

I'm guessing because of the time value selecting the current day fails the < comparison.  Since the >= comparison mimics the < comparison it also fails.

So what do we do? Parse the string and only match on the day?

-- Bob
Comment posted by Bob on Friday, June 27, 2008 11:51 AM
Whoops.. sorry about the double post.

Actually I want them to select from today forward.  Guess we could just parse the string and compare on the month day year.

At this point I have it on my todo list.  It's not a deal-breaker as it just notifies the user that they can't select a day prior to the current day.  It still allows the current date however.

-- Bob
Comment posted by Carl-Willy Stenberg on Wednesday, July 2, 2008 4:34 AM
Hello!

Nice article about a extremly useful control.

We run into an issue where our customer wants the week nr to be visible. It seems that the
extender lacks this feature. Is that so?

Regards
Comment posted by Suprotim Agarwal on Thursday, July 3, 2008 1:16 PM
Bob: Let me know if you are still facing an issue and I could probably look into it.

Carl: Please could you restate your question (week nr?)
Comment posted by Dhiraj on Thursday, July 10, 2008 1:17 AM
Sir,
   I am the student of C-DAC Akurdi.I am doing project on dotnet. One module in this project contain sending SMS to client can you give me core idea about sending SMS in dotnet(using c#).
thank you
Comment posted by jim tollan on Thursday, July 17, 2008 7:07 AM
you also might want to add this to the properties:

EnabledOnClient="true"

i.e.

<ajaxToolkit:CalendarExtender ID="calShippedDate" EnabledOnClient="true" runat="server" TargetControlID="txtShippedDate" PopupButtonID="imgShippedDate" />

that way, the code is run locally on the client machine rather than making a round trip to the server and back.

btw - good to see you using TBH architecture for your site ;)
Comment posted by Suprotim Agarwal on Thursday, July 17, 2008 12:29 PM
Jim: Thanks for that snippet.

Yes I am using the TBH. Kept the beer glasses rating icon as-is to help identify that!!
Comment posted by sarita on Wednesday, July 30, 2008 7:30 AM
how we can show flat whole month of calendar in a page
Comment posted by Drake on Thursday, July 31, 2008 10:03 AM
What is flat whole month?
Comment posted by Chris on Monday, August 18, 2008 3:40 PM
How can you enabled/disable the calendar pop-up in javascript?  I have a page that has a checkbox that defines a set date range when checked.  If unchecked, it is suppose to enable the pop-up calendar as well as the textbox.  The textbox is not an issue but I can't find a way to suppress the calendar pop-up on the client side.  Any ideas?
Comment posted by Chris on Monday, August 18, 2008 4:05 PM
How can you enabled/disable the calendar pop-up in javascript?  I have a page that has a checkbox that defines a set date range when checked.  If unchecked, it is suppose to enable the pop-up calendar as well as the textbox.  The textbox is not an issue but I can't find a way to suppress the calendar pop-up on the client side.  Any ideas?
Comment posted by Abdul Majid on Thursday, September 11, 2008 9:09 AM
This is excellent stuff, keep it up!!
Comment posted by Glen on Monday, September 29, 2008 4:24 AM
Hi, I like the fluid UI of the calendar extender however i would like to use this as a standard calendar control and not just a popup.  Is it possible to persist the calendar into the page?
Comment posted by Suprotim Agarwal on Monday, September 29, 2008 10:49 PM
Glen, Chris: See if this helps
http://thenewblack.sirotamail.com/2007/09/use-ajaxnet-calendarextender-as-alwas.html
Comment posted by Sumanta on Saturday, October 4, 2008 5:04 AM
Plzz slove my problem
i want to setting a upper And lower date setting in calender extender on Ajax
Comment posted by mohani ranjan on Saturday, October 18, 2008 12:24 AM
this is example of ajax
Comment posted by Vivek Rathore on Saturday, October 25, 2008 6:34 AM
Although it is good enough for the date earlier than current date, but what if i select the current date. Then it seems that the validation fails for the scenario if someone select the current date in calendar and compare it with current date. Is'nt it??
Bob is absolutely right that time value selecting the current day fails the < comparison.
Comment posted by Hooman on Thursday, October 30, 2008 4:09 AM
Thank you, it was a great complete article
Comment posted by aslam on Wednesday, November 5, 2008 12:25 PM
great article. have bunch of info. but i am facing a problem. calendar is hiding behind the dropdownlist (combo box). how to avoid this. please solve my problem
Comment posted by Suprotim Agarwal on Thursday, November 6, 2008 11:52 AM
Aslam: Which browser are you using. Seems like an issue of z-index.
Comment posted by Anada on Thursday, December 11, 2008 7:20 AM
Nice article,but I needed some more information on setting the date of Calender Extender control. Can anyone please help me regarding this.
Thanks.
Comment posted by manoj choukse on Monday, December 15, 2008 7:47 AM
hi
fist fall i want to know,
how to disable sunday in CalendarExtender.
plz solve my problem with asp.net and c# code.
Comment posted by ShiningLife on Tuesday, December 16, 2008 12:05 AM
hi,
I am using calender extender in the gridview while insert & edit records.
It works fine in insert.
The problem is that when i want to update any record without changing the date field.
It is not allowing to update the record untill i have to select any date again while editing, otherwise it gives the error like 'conversion failed'.

In database the date field is in date format '2008-12-08 00:00:00.000'.

plz solve this problem as it should allow me to update the record whether i edit the date field or not.

Thanks to all.
Comment posted by Waka on Tuesday, December 30, 2008 11:48 AM
hi, how to add calendar value into textbox ? when i run it, everything works fine when i wanted to pass the textbox date value to next page. it give mi an Nullexception error. run it on web it show the date when stepin there is nothing in the textbox. why ?
Comment posted by Prashant Chandrakar on Friday, January 30, 2009 2:02 AM
Hi,
I am using CalendarExtender.
I just want to set a different color for sunday,
Or if possible then any column of the calender.

Something like On ASP.net server control Calender is having a attribute called WeekendDayStyle.
Comment posted by nidan on Thursday, March 5, 2009 5:22 AM
I am using CalendarExtender. Ajax Calendar Extender Not Moving with Scroll in FireFox .
Comment posted by wooper on Thursday, March 12, 2009 12:21 PM
Hi, i have the same problem as bob, if you type, if (sender._selectedDate < new Date()), the user cant be able to select the current day, what can we do to solve this problem?? any ideas??
Comment posted by Suprotim Agarwal on Sunday, March 15, 2009 1:56 AM
wooper: See if this post helps: http://forums.asp.net/t/1384286.aspx
Comment posted by Tony Peterson on Friday, March 27, 2009 9:18 AM
Does anyone know how to set the CalendarExtender so it always opens set to today's date? I tried doing so but for some reason, my function gets called yet the date doesn't get set. My code is:

        function settoday(sender, args) {
            sender._selectedDate = new Date();
            // set the date back to the current date
            sender._textbox.set_Value(sender._selectedDate.format(sender._format))
        }

    <cc1:CalendarExtender ID="prodDateExtender" runat="server" TargetControlID="CalInput" PopupButtonID="Image1"   OnClientShown="settoday"/>
Comment posted by Karun on Monday, March 30, 2009 5:04 AM
Hi. Nice Article regsrding the Ajax Calander Extender. But I want to validate the date on client side only. I had written a date validation function in Java Script and when I run the application I am getting error. So you have any date validation javascropts to be used in OnclientsideScript in calander Extender.
Thanks  in Advance.
Comment posted by sharma on Thursday, April 2, 2009 5:43 PM
Hi

It does not show all days of week. It only shows days from Sunday to Thursday.
Your help will be greatly appreciated.

Comment posted by Suprotim Agarwal on Sunday, April 5, 2009 7:16 AM
Karun: You can use the OnClientDateSelectionChanged property of the Calendar Extender and point it to a JavaScript.

Sharma: Your CSS is causing an issue. Check this thread: http://forums.asp.net/t/1147646.aspx
Comment posted by hamid on Monday, May 18, 2009 3:50 AM
i m using ajax calendar extender i can dispaly the date in the textbox.but i m not able to store the tat date in data base? any solution for tat
Comment posted by shafique on Tuesday, May 19, 2009 4:31 PM
this is a helpful article, thanks! but i am trying to ensure that one date does not exceed another date. I have two textboxes with two ajax calendar extenders. i want to make sure that Date1 < Date2, and i don't want to post back to the server to check this.

any help? i want to use the <asp:comparevalidator> like:

<asp:CompareValidator ID="DateCompareValidator" ControlToValidate="FromDate" ControlToCompare="ToDate" Type="Date" Operator="LessThanEqual" Text="From Date must be less than the To Date." runat="server"></asp:CompareValidator>

But this doesn't work.. any ideas?
Comment posted by Ken 2g on Tuesday, June 9, 2009 6:58 AM
Hi, I want to restrict the user to picking the date from the calendar control. The user should not be able to enter the date manually without picking from the calendar. Can anyone help me?
Comment posted by Suprotim Agarwal on Wednesday, June 10, 2009 4:00 AM
Ken 2g: Check this post: http://forums.asp.net/t/1397407.aspx
Comment posted by Dipesh on Thursday, June 18, 2009 1:42 PM
Excellent article. I'm literally able to pick it up good. Please do me one thing. Add more examples with use in ASP.NET 3.5 Dynamic Data or MVC.
Comment posted by Basheer on Saturday, June 27, 2009 12:10 PM
Hi,
Thanks for the article. But, I need to know some more tricks with calendar extender..When I use this extender with a target textbox  within a template field of any other control(say DetailsView or GridView) and if that parent control is in absolute position format, calendar does not pop up at the desired positions. It pops up far away from the target textbox. Any trick to fix this issue
Comment posted by dheena on Monday, June 29, 2009 2:46 AM
it is working fine .
Thanks
Comment posted by chandrika on Monday, June 29, 2009 7:43 AM
have got solution for your problem,as i am facing the same problem
Comment posted by Suprotim Agarwal on Thursday, July 2, 2009 2:19 AM
Dipesh: I will soon come up with MVC articles!

Basheer: I will have to try that out and see. Let me know if you have not found any solution and I will take out some time@weekend to help you out.

Chandrika: What problem?
Comment posted by kuno2011 on Monday, July 13, 2009 10:11 AM
i got the same problem as basheer! i have a DIV on left side for treeview and DIV on right side for data display. each div has their own scrollbar. when i scroll the right side vertically and click on a calendar button (right side), the calendar will show very far away from where i click... sometimes it is so far that i can't even see it... however, if i don't scroll vertically before clicking, it is working fine...... thanks
Comment posted by smd on Tuesday, August 25, 2009 5:55 AM
m at the first step on the learning curve so please bear if my question sounds silly...
i got a text box with an extended calender control...i need to capture the date to a variable when the user selects a date but m getting an error.
---------------
Dim birthday_value As Date
birthday_value = TextBox1_CalendarExtender.SelectedDate.Value
-------------------
the error m getting is - System.InvalidOperationException: Nullable object must have a value

any help is much appreciated
Comment posted by David H on Thursday, September 10, 2009 9:07 PM
The position of the AJAX Calendar Exetender can be manipulated by setting a value for the margin-top;margin-left;margin-right;margin-bottom in the .ajax__calendar_container style.

Comment posted by Moazzam on Monday, October 5, 2009 1:04 AM
NEED URGENT REPLY GUYS...

"sender._textbox " is returning "null or not an object" error in JavaScript when using calendar in gridview to stop selecting earlier date. i have use the same example written in article with "img" popupID.

Also, calendar is not moving when i scroll the page.

I have searched a lot regarding this issue but unsuccessfull so Please Help!!!!
Comment posted by Tee on Wednesday, October 7, 2009 10:16 PM
Sorry, may i know that is the calander extended only run on .NetFramework 3.5? The above can't work on my project when i clicked on the image button it like post back the page, and show at the tool tips: Done, but with error on page.
Comment posted by Fenil Desai on Wednesday, December 30, 2009 12:55 AM
I have a problem..I m using the latest version of toolkit still the calendar doesn't hide after clicking outside the page. I m using a simple html image. any help...
Comment posted by Shital on Tuesday, January 5, 2010 8:49 AM
i am using ajax tool kit 1.0.20229 (can not use ajax toolkit 3.0)and framework3.0.
how to hide ajax calendar clicking anywhere on browser.
please help me out.
Comment posted by Anahcra on Sunday, January 24, 2010 8:31 AM
I got the following problem when i run solution for calendar extender. Hence what shall i do?


Server Error in '/CollegeMIS' Application.
--------------------------------------------------------------------------------

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.  

Stack Trace:


[HttpException (0x80004005): The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).]
   System.Web.UI.ControlCollection.Add(Control child) +2108047
   AjaxControlToolkit.ScriptObjectBuilder.RegisterCssReferences(Control control) +762
   AjaxControlToolkit.ExtenderControlBase.OnLoad(EventArgs e) +64
   System.Web.UI.Control.LoadRecursive() +47
   System.Web.UI.Control.LoadRecursive() +131
   System.Web.UI.Control.LoadRecursive() +131
   System.Web.UI.Control.LoadRecursive() +131
   System.Web.UI.Control.LoadRecursive() +131
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1436




--------------------------------------------------------------------------------
Version Information: Microsoft .NET Framework Version:2.0.50727.1433; ASP.NET Version:2.0.50727.1433
Comment posted by Anuj Chauhan on Thursday, February 4, 2010 3:52 AM
Hi All,

When the calendar popups, How to set not to display the few extra dates which are not in the current month. Example: if Feb is selected then few ending dates of january (like ..., 29, 30, 31) and few starting date of march (like 1, 2, 3...) gets also visible in the Feb calendar, then how to set the calendar to display dates only belongs to selected month.

Regards,
Anuj Chauhan
Comment posted by Amit on Tuesday, February 16, 2010 1:06 AM
Hi,
Thanks for the article. But, I need to know some more tricks with calendar extender..When I use this extender with a target textbox  and there is grid below to the textbox. and I lock some rows of gridview in that case. I face the problem while poping up Calender control only half side of control shown properly...Plzzzzzzzz help me... Thankyou in Advance
Comment posted by sivasu on Tuesday, March 23, 2010 8:44 AM
hi ,

  how can i set the 'today button' instead of 'Today:March,23,2010'(in bottom of calender extender
Comment posted by rohit on Wednesday, April 21, 2010 4:00 AM
Hi,
  In Calender extender contorl, if we take the cairo +2:00 time zone and  if i select 30 april 2010, it take it as 29 april 2010. For 29 april 2011, it automatically set it as 28 april 2011. there is some issue regarding time zone with calender extender, If any one knows about this, please help.

Regards,
Rohit Kandpal
Comment posted by Anto on Saturday, July 10, 2010 8:36 AM
saved my time.....thanks much!!!
Comment posted by satish kumar on Thursday, August 19, 2010 12:46 AM
could you please explain how to show the details when current date is clicked.plz send the code to my email id
Comment posted by Wasim on Thursday, August 26, 2010 4:53 AM
Dear Sir/Madam,

Thank you for this control,
But when I went first time in Page that time Calendar Pop up but after page load same page calendar does not pop up.

Please help me if you get any solution for me at my Email - "wasimikukwa@gmail.com or wasimikukwa@yahoo.co.in"

i am waiting for you reply

Thakns
Comment posted by Muralekarthick on Wednesday, September 8, 2010 10:24 AM
Hi i am using calender extender inside gridview in my website, which basically shows only mo,tu,we,thu instead of showing whole 7 days a week, can any one help me in this, in all other place expect grid vew the calender extender is working fine.

Many Thanks
Comment posted by Suprotim Agarwal on Thursday, September 9, 2010 1:34 AM
wasim, Muralekarthick - I need to the see the code that is not working before I can comment. Use the http://www.dotnetcurry.com/Contact.aspx page to mail me your code.
Comment posted by Satish deverkonda on Thursday, September 9, 2010 2:30 AM
how can i restrict user so that user cannot select date 45 days older than current date ..........please help me out any one...
Comment posted by Rajasri on Wednesday, September 22, 2010 9:26 AM
Thank you for your valuable information
Comment posted by shailesh on Friday, October 8, 2010 1:59 AM
hi,
i m using Ajax CalendarExtender , but getting following error.
The control with ID 'CalendarExtender1' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.

plz plz help me. wating for reply ... plz reply as early as possible.
Comment posted by Suprotim Agarwal on Friday, October 8, 2010 4:25 AM
Shailesh: Looks like you have a problem referencing the wrong dll in your .config file. If you are using ASP.NET 3.5, make sure that the entries for AJAX installer corresponds to it.
Comment posted by jzero on Tuesday, October 19, 2010 9:36 PM
As already commented, there are situations when you select a date and textbox result is Day Selected - 1. As I know this is related to "DayLight Save start date", and happen only when you select such date, not before neither after. There is no need to show any code, just go to any CalendarExtender demo page and select such date (of course check correct date for your current country).
In my case GMT -3 (Brazil), last Sunday, Oct 17, 2010 00:00AM we moved to GMT -2.
Looking at source code, we can see that Selected Date is the resulting of "new Date(this.getFullYear(), this.getMonth(), this.getDate());", this results in Sat, Oct 16, 2010 11:00PM.

So TIP #6 and JQuery-UI DatePicker, helped me to make a function to workaround such issue, I use it in the event "OnClientDateSelectionChanged"
function adjustDSTDate(sender, args) {
  var zSelectedDate = sender._selectedDate
  zSelectedDate.setHours(zSelectedDate.getHours() > 12 ? zSelectedDate.getHours() + 2 : 0) <-- from Jquery-UI
  sender._textbox.set_Value(zSelectedDate.format(sender._format))
}

But there is one thing I did not found a way to intercept and make appropriated correction. On first page load there is no querystring parameter in URL, after submit, on next page load URL back with Date submitted as querystring. Then I use such date to fill out TextBox.
At this moment the CalendarExtender becomes to interfere in value assigned to TextBox, then back it 1 day.

Again looking at CalendarExtender source, I see a method named "initialize", where, if textbox is filled it just call "this.set_selectedDate(value);" resulting in same "new Date(this.getFullYear(), this.getMonth(), this.getDate());"

In fact I do not know how or if it is possible, but how can I intercept such initialize and apply my workaround on page load?
Comment posted by DeepakDuvedi on Friday, October 29, 2010 7:09 AM
First declare in html Celendar
<asp:Calendar ID="calendar" runat="server"onselectionchanged="calendar_SelectionChanged"></asp:Calendar>
    <asp:TextBox ID="txtcalender" runat="server"></asp:TextBox>
Second step in celendar double click and right this code
protected void  calendar_SelectionChanged(object sender, EventArgs e)
{
    System.DateTime mydate=new System.DateTime();    
    mydate =calendar.SelectedDate;
    txtcalender.Text = mydate.ToString("dd/MM/yyyy") ;  
}
Comment posted by chel pisey on Wednesday, November 24, 2010 8:05 PM
To show celandar first step no condition in HTML tage
<asp:celandar id=celandarOne caption=Canlandar runat=server></asp:celandar>
Comment posted by ឆិល ពីសី on Wednesday, November 24, 2010 8:10 PM
I have problem with to make celandar ...that
--How to set celandar 2011 if we have time now 2010....
Comment posted by vadivel on Friday, December 3, 2010 4:29 AM
Hi am using <ajaxtoolkit:CalendarExtender control .what am facing a problem is enable the today date and lesser than date only in selectable mode .Even Tomorrow should not be enable to choose.
Comment posted by vadivel on Friday, December 3, 2010 5:33 AM
Hi am using <ajaxtoolkit:CalendarExtender control .what am facing a problem is enable the today date and lesser than date only in selectable mode .Even Tomorrow should not be enable to choose.
Comment posted by vadivel on Friday, December 3, 2010 7:33 AM
Hi am using <ajaxtoolkit:CalendarExtender control .what am facing a problem is enable the today date and lesser than date only in selectable mode .Even Tomorrow should not be enable to choose.
Comment posted by Anamika Shrivastava on Sunday, December 5, 2010 9:12 AM
what is the code of change Password in asp.net.& i design the page through the html .
If i fetch the password in database in registration table & i create the stored procedure of fetchpassword & update password .
Comment posted by jc sun on Wednesday, December 29, 2010 1:01 AM
very well, I am so happy to view this article and it help me much. Thanks very much, oh , I am chinese ,hah.
Comment posted by g on Saturday, January 29, 2011 8:53 AM
g
Comment posted by MANI MURUGAN on Saturday, February 12, 2011 11:40 AM
HAI
THIS IS VERY NICE ARTICLE PLEASE HELP ME I AM GIVING INPUT YEARS LIKE WISE 1999,2009,2003
SUPPOSE I GIVE 2000 MEANS 2000 CALENDER IS DISPLAY MEANS ANY CODING AVAILABLE PLEASE HELP ME
Comment posted by Vineesha on Thursday, February 17, 2011 1:37 AM
Nice work...
<cc1:CalendarExtender ID="CalendarExtender1" EnabledOnClient="true"
                                                runat="server" Format="dd/MM/yyyy" PopupButtonID="btnCalender"
                                             TargetControlID="txtDate" OnClientDateSelectionChanged="checkDate();">
                                            </cc1:CalendarExtender>
My problem is that the calendar is not displaying whenever i use 'OnClientDateSelectionChanged', otherwise its fine. Any solution??? Thanks......
Comment posted by Vineesha on Thursday, February 17, 2011 4:59 AM
Hi.....
I have solved my problem..its about 'checkDate' and position in javascript validation... Thank u...
Comment posted by Kkabir on Thursday, March 24, 2011 12:58 AM
You can find the similar article from the link given below
http://forum.evostract.com/default.aspx?g=posts&t=1
Comment posted by Avinash on Friday, April 1, 2011 5:29 AM
thanks 4 this article.
i also learm abt JS(checkDate(fn))
Comment posted by Ganesh on Friday, April 15, 2011 8:01 AM
CalendarExtender date values not displaying in the textbox control when i click multi view tab in asp.net
Comment posted by Michele on Monday, May 9, 2011 12:01 PM
Very well! Now, I have two textbox (asp.net) associated with two calendar extenders for reservations: one for the check-in date and the other for the check-out date. If I put august 18, 2011 into the first textbox, I'd like the second calendar with the same date and not with today.
If I use the selectedvalue for the second calendar, I get the second textbox filled.
Any solution?
Many thanks
Comment posted by Prabhat on Friday, July 22, 2011 3:42 PM
Dear sir, i am facing problem with ajax asp.net control.
Server Error in '/' Application.
Could not load type 'System.Web.UI.ScriptReferenceBase' from assembly 'System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35'.
]code
   <asp:ToolkitScriptManager ID="ToolkitScriptManager1" EnableScriptGlobalization="true" EnableScriptLocalization="true"  runat="server">
        </asp:ToolkitScriptManager>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:CalendarExtender  ID="CalendarExtender1"
            TargetControlID="TextBox1" runat="server">
        </asp:CalendarExtender>
Comment posted by Chen on Tuesday, July 26, 2011 8:49 PM
I'm using VS2008,Here comes a problem.I use CalendarExtender to control a textbox,requring select date greater than today.Than select a date less than today and than lose the focus,but the CalendarExtender pops up which is not expected.Could anyone help?
Comment posted by vanita on Friday, October 28, 2011 5:35 AM
Its good but at present it is not useful to me.................. I wana do it by adding the ajaxtoolkit.dll to my project If you know the method tell me how to add the dlls to the project Hope for the reply.....
Comment posted by selvi on Wednesday, December 14, 2011 6:08 AM
how to convert a calender in  to a text box using asp.net c# .



Thanks............
Comment posted by venkat on Wednesday, February 1, 2012 12:44 AM
those sourcecode is very usefull to me i need some of the control emample on ajax in .net
Comment posted by Alamin on Wednesday, February 29, 2012 3:00 AM
nice article ..keep it up..
Comment posted by Alamin on Wednesday, February 29, 2012 3:03 AM
Can anyone showme how can i show today date in ASP.net gridview when gridview will be load.
Comment posted by Afzal on Thursday, March 29, 2012 6:43 AM
I prefer the one with java script......
Comment posted by Darko on Tuesday, April 17, 2012 7:05 AM
Hello, very nice article. I have one question: Is it possible to have week numbers on calendar, that user can see number of week on the start of the week?
Comment posted by sumit on Friday, April 27, 2012 1:30 AM
calendar is not hide after select date. when i click outside then hide..
Comment posted by sumit on Friday, April 27, 2012 1:30 AM
calendar is not hide after select date. when i click outside then hide..
Comment posted by k on Friday, May 4, 2012 4:51 AM
sdf
Comment posted by Sam on Saturday, May 5, 2012 7:25 AM
Can i use the if not page ispostback to use the code?
thanks~
Comment posted by Dakshal on Monday, July 2, 2012 3:45 AM
Thank you Very Much mate!! Great post
Comment posted by Bikram Panjikar on Tuesday, July 3, 2012 10:57 AM
(1)Calendar.aspx

In asp calender tag use : OnDayRender="Cal_DayRender" event.
Capture the OnDayRender event on code behind.

(2)Calender.aspx.cs

protected void Cal_DayRender(object sender, DayRenderEventArgs e)  
{  
   if (e.Day.Date < DateTime.Today)  
      {  
         e.Cell.Font.Italic = true;    
         e.Day.IsSelectable = false;    
         e.Cell.ForeColor = System.Drawing.Color.Red;    
   /*Here use another property to set
         *the cell back color as disable.*/
      }  
}
Comment posted by Jaskirat on Wednesday, July 11, 2012 3:34 AM
awesome man thanks alot
Comment posted by Bala on Wednesday, August 29, 2012 4:10 AM
Thank you Sir :) for giving a detail information in AJAX Calender, Sir could you please tell me how can i display in "yyyy-MM-dd hh:mm:ss tt" that is with TIME also ??????????????
i want to display current time :)
Pls Guide me :)

Thank You
Bala.k
Comment posted by Isaac on Thursday, November 8, 2012 2:38 AM
Thanks for this post, it really helped.
Comment posted by sandeep on Wednesday, December 26, 2012 5:35 AM
Nice artical.thanks for posting.keep post these types of artical.
Comment posted by asha on Monday, January 7, 2013 12:52 AM
Very nice article.

Thank you.
Comment posted by sanjay on Friday, January 18, 2013 12:25 AM
thank you very much for the code
Comment posted by Kamna on Friday, February 8, 2013 5:39 AM
i hv 2textboxes and txtbox1 is hving date from ajax calender wht i want on text change or date selection from calender txtbox shows the date after 4 days cn u plz help me its very urgent thx in advance
Comment posted by dimpu on Thursday, February 14, 2013 9:56 PM
if the user selects the date it is inserting into db correct but txtbox is empty then it is inserting as default date as 1900-01-01. How to insert the dbnull avoiding defaultdate of the column datatype.
Any suggestions........?
Comment posted by satwant on Wednesday, May 1, 2013 1:53 AM
NICE POST
Comment posted by Raghu on Wednesday, May 15, 2013 4:28 AM
Sir,

I have a table that holds all the holiday dates.

In my project I have to disable them on the Calendar Extender Control.

Please help me out.
Comment posted by etil on Wednesday, May 29, 2013 1:45 AM
Oh Thank you,this ASP.NET AJAX Calendar Extender – Tips and Tricks solved my problem!
Comment posted by yoges on Monday, August 5, 2013 11:59 PM
ajax calender control is not working in asp.net gridview second row..kindly help me
Comment posted by Dave on Thursday, October 10, 2013 2:15 AM
Great article

Ajax calendar control does not work.
The calendar does not appear upon clicking on the image or textbox.
Please advise of any solution thanks
Comment posted by MTH on Thursday, October 10, 2013 3:52 PM
Is there a way to highlight only certain days, for the month selected for an AJAX calendar extender using VB? The days to be bolded, for example, would results from a database indicating some event exists on the date.