Tips and tricks with ajax calendar
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(https://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
Tips and tricks with ajax calendar
Performance and optimization tips-part 2
Tips and Tricks with ajax accordion control
Ways of implementing AJAX
Jquery features, Advantages and disadvantages
Advanced JQuery Fading Effects
Working with forms-Jquery form selector
Performance and optimization tips(ASP.Net)
Who invented snakes and ladders
Tips and tricks with Ajax Collapsible panel
Post Comment