Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment




Latest Articles


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

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

PopupPosition
- set  the Postion for the calendar popup control

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

Example:
<asp:TextBox ID="txtDate4" runat="server" Width="70"></asp:TextBox>
   
<AjaxToolkit:CalendarExtender ID="calExtender4" runat="server" PopupButtonID="btnDate4" PopupPosition="TopRight" TargetControlID="txtDate4" OnClientDateSelectionChanged="CheckEarlierDate">
     
</AjaxToolkit:CalendarExtender>
   
<asp:ImageButton ID="btnDate4" ImageUrl="~/Calendar.png" Width="20px" runat="server" />

Asp.net 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">
       
</AjaxToolkit:CalendarExtender>
  
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">
       
</AjaxToolkit:CalendarExtender>
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">
  
</AjaxToolkit:CalendarExtender>
Step 2 - Handle the OnClientDateSelectionChanged event to checking the calendar control’s _ _selectedDate and modify it if date is earlier than today.
function
 CheckEarlierDate(sender, args)  {
           
if (sender._selectedDate < new Date())  {
                alert(
"You cannot select a day before today!");
                sender._selectedDate =
new Date();
               
// set the date back to the today
                sender._textbox.set_Value(sender._selectedDate.format(sender._format))
            }
        }
here
Note: Images used on this website are either a production of Bhaktivedanta Book Trust(http://www.krishna.com), 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.

Related Articles
Ways of implementing AJAX
Working with forms-Jquery form selector
Tips and Tricks with ajax accordion control
Hinduism greatness quotes by famous philosophers and scientists
Performance and optimization tips-part 2
Symbolism of story behind kumbh mela-world largest gathering on earth
Generating unique random numbers and date
Get Data of other page on current page
Jquery features, Advantages and disadvantages
Show Update Progress Animation-Ajax

Post Comment




Software developer by profession,
Poet by hobby,
Blogger by Passion
Birth Place: Munger, Bihar
Residence: Mumbai, Maharashtra
Prof exp: 8 years

Read More about me

Read my daily what'sapp quotes
Most Viewed Articles

Latest Spiritual Videos


Latest Funny Videos

Latest News

Latest Social Post
Latest WhatsApp Quotes