Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment

Locations of visitors to this page

Latest Articles

Move to top
Tips and tricks with ajax calendar
Posted By Sarin on Apr 24, 2012     RSS Feeds     Latest Hinduism news

Ajax Calendar is an ASP.NET AJAX extender that is generally attached ASP.NET Textbox control. The ASP.NET AJAX Control Toolkit's Calendar is a very nice control that allows you implement a client side dynamic calendar for date-picking functionality. One interesting feature is the ability to change the calendar from the default "days" mode (shows the days in one month) to "months" mode (showing all of the months in the current year) by clicking on the calendar title. Another click on the title will change the calendar into "years" mode, which shows 12 years at a time.
In addition, the left and right arrows can be used to move forward or back a month. By clicking on the title of the calendar you can change the view from Days to months and from months to year. This action allows you to easily jump to dates in the past or the future from using the calendar control.  

Below are some of the important properties of calendar control
PopupButtonID- Add the control name on the click of which you want to display the calendar control

- set  the Postion for the calendar popup control

TargetControlID=control  on which the selected date of the calendar control should be shown

<asp:TextBox ID="txtDate4" runat="server" Width="70"></asp:TextBox>
<AjaxToolkit:CalendarExtender ID="calExtender4" runat="server" PopupButtonID="btnDate4" PopupPosition="TopRight" TargetControlID="txtDate4" OnClientDateSelectionChanged="CheckEarlierDate">
<asp:ImageButton ID="btnDate4" ImageUrl="~/Calendar.png" Width="20px" runat="server" /> page uses the culture setting specified by the browser which is Eng-Us by default.  If there is a case where your client setting may not be eng-Us then set both  EnableScriptGlobalization="true" and EnableScriptLocalization="true" properties of
scriptmanager or ToolkitScriptManager
Below are some of the tricks and tips on working  with ajax calendar control
selecting older dates
In Some case , You might require to select dates that are a few years old.  
For example, your project might require entering employees birth date and these birth dates are expected to at least 25 years older than the current date
You can easily accomplish it by handling the Calendar's
OnClientShown event.
Step 1 -- Add a callback javascript function to the
OnClientShown event  
<AjaxToolkit:CalendarExtender ID="calExtender5" runat="server" TargetControlID="txtDate5" PopupButtonID="btnDate5" PopupPosition="Right" OnClientShown="calendarShown">
Step 2 - Handle the OnClientShown event by setting the calendar control’s _switchMode() method
function calendarShown(sender, e)  {sender._switchMode("years"); }
Step 3:
<asp:TextBox ID="txtDate5" runat="server" Text="11/01/1980"></asp:TextBox>
set the default date in the bounded textbox to be around 25 years ago so that when you click on calendar control, years of that decades will be shown
.Today’s date selected:
Whenever user clicks on calendar control, you may always want to show the today’s date to be selected
Step 1 -- Add a callback javascript function to the OnClientShowing event
<AjaxToolkit:CalendarExtender ID="calExtender4" runat="server" PopupPosition="Right" PopupButtonID="btnDate4"  OnClientShowing="DisplayDateToday" TargetControlID="txtDate4">
Step 2 - Handle the OnClientShowing event by setting the calendar control’s  _selectedDate
  Method to today’s date
function calendarShown(sender, e)  {sender._switchMode("years"); }

No date before today’s date to be selected
Step 1 -- Add a callback javascript function to the
OnClientDateSelectionChanged event
<AjaxToolkit:CalendarExtender ID="calExtender3" runat="server" PopupButtonID="btnDate3" PopupPosition="TopRight" TargetControlID="txtDate3" OnClientDateSelectionChanged="CheckEarlierDate">
Step 2 - Handle the OnClientDateSelectionChanged event to checking the calendar control’s _ _selectedDate and modify it if date is earlier than today.
 CheckEarlierDate(sender, args)  {
if (sender._selectedDate < new Date())  {
"You cannot select a day before today!");
                sender._selectedDate =
new Date();
// set the date back to the today
Note: Images used on this website are either a production of Bhaktivedanta Book Trust(, Iskcon Foundation or were found in google search under "Free to use and share". If any of the images presented here violates copyright issues or infringes anyone copyright or are not under "Fair use", then please bring it to our notice. Read Disclaimer for more.

Share this to your friends. One of your friend is waiting for your share.
Share on Google+ Share on Tumblr Print Browser Favorite
Related Articles
Generating unique random numbers and date
How AJAX Works, advantages and disadvantages
Tips and tricks with Ajax Collapsible panel
Get Data of other page on current page
Symbolism of story behind kumbh mela-world largest gathering on earth
Advanced JQuery Fading Effects
Simple Ajax client server Example
Tips and tricks with ajax calendar
Working with forms-Jquery form selector
Hinduism greatness quotes by famous philosophers and scientists

Post Comment