CalendarExtender to my textbox. However i want to only be able to select month year. Not day month year. The end user should not be able to select dates. Furthermore i'd want by default my "from date" textbox to always select the 1st day of the month and
"to date" to always be the last day of the month. I'm sure this is a common requirement of certain systems.
From your description, I understand that there are two TextBoxes bound to the CalendarExtender. Both of the Calendar should only be selected in the Year/Month mode. The From Calendar has a default date as the first day of selected month. In contrast, the
To Calendar has the last day of selected month as the default date.
If I have not misunderstood you, please refer to my sample code about this scenario:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestOnlyChangeMonthAndSetDefaultDay.aspx.vb"
Inherits="SoluTest_CalendarUserControl.TestOnlyChangeMonthAndSetDefaultDay" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var cal1;
var cal2;
function pageLoad() {
cal1 = $find("calendar1");
cal2 = $find("calendar2");
modifyCalDelegates(cal1);
modifyCalDelegates(cal2);
}
function modifyCalDelegates(cal) {
//we need to modify the original delegate of the month cell.
cal._cell$delegates = {
mouseover: Function.createDelegate(cal, cal._cell_onmouseover),
mouseout: Function.createDelegate(cal, cal._cell_onmouseout),
click: Function.createDelegate(cal, function(e) {
/// <summary>
/// Handles the click event of a cell
/// </summary>
/// <param name="e" type="Sys.UI.DomEvent">The arguments for the event</param>
e.stopPropagation();
e.preventDefault();
if (!cal._enabled) return;
var target = e.target;
var visibleDate = cal._getEffectiveVisibleDate();
Sys.UI.DomElement.removeCssClass(target.parentNode, "ajax__calendar_hover");
switch (target.mode) {
case "prev":
case "next":
cal._switchMonth(target.date);
break;
case "title":
switch (cal._mode) {
case "days": cal._switchMode("months"); break;
case "months": cal._switchMode("years"); break;
}
break;
case "month":
//if the mode is month, then stop switching to day mode.
if (target.month == visibleDate.getMonth()) {
//this._switchMode("days");
} else {
cal._visibleDate = target.date;
//this._switchMode("days");
}
cal.set_selectedDate(target.date);
cal._switchMonth(target.date);
cal._blur.post(true);
cal.raiseDateSelectionChanged();
break;
case "year":
if (target.date.getFullYear() == visibleDate.getFullYear()) {
cal._switchMode("months");
} else {
cal._visibleDate = target.date;
cal._switchMode("months");
}
break;
// case "day":
// this.set_selectedDate(target.date);
// this._switchMonth(target.date);
// this._blur.post(true);
// this.raiseDateSelectionChanged();
// break;
case "today":
cal.set_selectedDate(target.date);
cal._switchMonth(target.date);
cal._blur.post(true);
cal.raiseDateSelectionChanged();
break;
}
})
}
}
function onCalendarShown(sender, args) {
//set the default mode to month
sender._switchMode("months", true);
changeCellHandlers(cal1);
}
function changeCellHandlers(cal) {
if (cal._monthsBody) {
//remove the old handler of each month body.
for (var i = 0; i < cal._monthsBody.rows.length; i++) {
var row = cal._monthsBody.rows[i];
for (var j = 0; j < row.cells.length; j++) {
$common.removeHandlers(row.cells[j].firstChild, cal._cell$delegates);
}
}
//add the new handler of each month body.
for (var i = 0; i < cal._monthsBody.rows.length; i++) {
var row = cal._monthsBody.rows[i];
for (var j = 0; j < row.cells.length; j++) {
$addHandlers(row.cells[j].firstChild, cal._cell$delegates);
}
}
}
}
function onCalendarHidden(sender, args) {
if (sender.get_selectedDate()) {
if (cal1.get_selectedDate() && cal2.get_selectedDate() && cal1.get_selectedDate() > cal2.get_selectedDate()) {
alert('The "From" Date should smaller than the "To" Date, please reselect!');
sender.show();
return;
}
//get the final date
var finalDate = new Date(sender.get_selectedDate());
var selectedMonth = finalDate.getMonth();
finalDate.setDate(1);
if (sender == cal2) {
// set the calender2's default date as the last day
finalDate.setMonth(selectedMonth + 1);
finalDate = new Date(finalDate - 1);
}
//set the date to the TextBox
sender.get_element().value = finalDate.format(sender._format);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
From :
<asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="Disabled"></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender1" BehaviorID="calendar1" runat="server"
Enabled="True" Format="yyyy/MM/dd" TargetControlID="TextBox1" OnClientShown="onCalendarShown"
OnClientHidden="onCalendarHidden">
</cc1:CalendarExtender>
To :
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender2" BehaviorID="calendar2" runat="server"
Enabled="True" Format="yyyy/MM/dd" TargetControlID="TextBox2" OnClientShown="onCalendarShown"
OnClientHidden="onCalendarHidden">
</cc1:CalendarExtender>
</div>
</form>
</body>
</html>
Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
Answer” if a marked post does not actually answer your question.
Marked as answer by mongoose_za on Nov 20, 2008 07:19 AM
Hey, That works too but it is little lengthy as well as on body unload it is also giving an error to me. How ever, I got the exact idea from your post. So thanks alot
Zhi-Qiang Ni
and see this post : http://www.aghausman.net/asp/how-to-show-and-select-monthyear-in-calendar-extender.html
cheers
Dont forget to click "Mark as Answer" on the post that helped you. This credits that member, earns you a point and marks your thread as Resolved so we will all know you have been helped.
http://www.aghausman.net
Hey, That works too but it is little lengthy as well as on body unload it is also giving an error to me. How ever, I got the exact idea from your post. So thanks alot
Zhi-Qiang Ni
and see this post : http://www.aghausman.net/asp/how-to-show-and-select-monthyear-in-calendar-extender.html
cheers
Hi,
Your solution is good and is working perfectly . Thanks and keep up the good work
Would you possible know how to add week number to the calendar? Have tried to modify the CalendarBehavior.js by calculating the week number and setting the dayCell.title with no success.
I used your javascript code above and it works well. I have the ability to select previous yrs back just a click of the mouse.
I have a query on how to calculate a certain age using the CalendarExtender tool. If a user selects a certain MM/DD/YYYY
it will automatically calculates the age result from that calendar. For instance, if a user selects a date of 06/26/1977 that system will display the age of "34" on a separate textbox.
mongoose_za
Member
61 Points
95 Posts
cc1:CalendarExtender month/year only?
Nov 17, 2008 12:56 PM|LINK
Hi,
CalendarExtender to my textbox. However i want to only be able to select month year. Not day month year. The end user should not be able to select dates. Furthermore i'd want by default my "from date" textbox to always select the 1st day of the month and "to date" to always be the last day of the month. I'm sure this is a common requirement of certain systems.
Please help me out. Thanks in advance,
Zhi-Qiang Ni...
All-Star
33491 Points
2952 Posts
Microsoft
Re: cc1:CalendarExtender month/year only?
Nov 20, 2008 04:02 AM|LINK
Hi,
From your description, I understand that there are two TextBoxes bound to the CalendarExtender. Both of the Calendar should only be selected in the Year/Month mode. The From Calendar has a default date as the first day of selected month. In contrast, the To Calendar has the last day of selected month as the default date.
If I have not misunderstood you, please refer to my sample code about this scenario:
Have my code helped? Here is another thread which is similar to yours: http://forums.asp.net/t/1342938.aspx.Best regards,
Zhi-Qiang Ni
Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
Answer” if a marked post does not actually answer your question.
mongoose_za
Member
61 Points
95 Posts
Re: cc1:CalendarExtender month/year only?
Nov 20, 2008 07:08 AM|LINK
Your fantastic!! Xiexie ^_^
I don't know how you knew what to do.. But your genius.
aghausman12
Contributor
3035 Points
550 Posts
Re: cc1:CalendarExtender month/year only?
May 30, 2009 10:18 PM|LINK
Hey, That works too but it is little lengthy as well as on body unload it is also giving an error to me. How ever, I got the exact idea from your post. So thanks alot Zhi-Qiang Ni
and see this post : http://www.aghausman.net/asp/how-to-show-and-select-monthyear-in-calendar-extender.html
cheers
http://www.aghausman.net
sparco01
Member
3 Points
5 Posts
Re: cc1:CalendarExtender month/year only?
Jul 24, 2009 04:24 AM|LINK
Hi,
Your solution is good and is working perfectly . Thanks and keep up the good work
Cheers.
Lee Harvey
Member
31 Points
23 Posts
Re: cc1:CalendarExtender month/year only?
Sep 29, 2009 09:32 AM|LINK
Hello,
Would you possible know how to add week number to the calendar? Have tried to modify the CalendarBehavior.js by calculating the week number and setting the dayCell.title with no success.
Thankful for any help.
xlfg
Member
4 Points
9 Posts
Re: cc1:CalendarExtender month/year only?
Nov 06, 2009 02:20 AM|LINK
what's the function pageload() usage? It will run automatically on page load?
rajeshframew...
Member
4 Points
2 Posts
Re: cc1:CalendarExtender month/year only? it is workin
Aug 18, 2010 05:57 AM|LINK
it is working good .but i want date in mm/dd/yyyy format
sheen_buhay
Member
712 Points
544 Posts
Re: cc1:CalendarExtender month/year only? it is workin
Jul 18, 2011 02:51 AM|LINK
@rajeshframework,
please check out this code i worked on,
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
SheenBuhay
sheen_buhay
Member
712 Points
544 Posts
Re: cc1:CalendarExtender month/year only?
Jul 18, 2011 02:58 AM|LINK
Hi Zhi-Qiang Ni,
I used your javascript code above and it works well. I have the ability to select previous yrs back just a click of the mouse.
I have a query on how to calculate a certain age using the CalendarExtender tool. If a user selects a certain MM/DD/YYYY
it will automatically calculates the age result from that calendar. For instance, if a user selects a date of 06/26/1977 that system will display the age of "34" on a separate textbox.
Please help. Thanks.
SheenBuhay