Rank: Advanced Member
Groups: Member
Joined: 8/21/2008
Posts: 37
|
Hi, In our old application, we were using javascript calendar control. We had a functionality, when user selects the date from the calendar, automatically it would add one year to the selected date and display in a label control. Since we are using the EO date picker now, we tried to achieve the same. But nothing could work!! The event is not firing. Could you please tell us what event should we use? Please see below code and help me. Datepicker.ascx
Code: HTML/ASPX
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<%@ Control AutoEventWireup="true" CodeFile="DatePicker.ascx.cs" Inherits="DatePicker" Language="C#" %>
<script type="text/javascript">
var g_curCalendar = null;
function ShowMonthPopup(id)
{
g_curCalendar = eo_GetObject(id);
var menuId = id + "_mnuMonth";
var ref = document.getElementById(id);
g_curCalendar.showContextMenu(ref, menuId);
}
function MonthMenuClicked(e, info)
{
var month = info.getItem().getIndex();
var calendar = g_curCalendar;
//Get the current month
var curMonth = calendar.getVisibleDate();
//Change the month
curMonth.setMonth(month);
//Set the new current month
calendar.goTo(curMonth);
}
function ShowYearPopup(id)
{
g_curCalendar = eo_GetObject(id);
var menuId = id + "_mnuYear";
var ref = document.getElementById(id);
g_curCalendar.showContextMenu(ref, menuId);
}
function YearMenuClicked(e, info)
{
var year = info.getItem().getIndex();
var calendar = g_curCalendar;
//Get the current month
var curMonth = calendar.getVisibleDate();
//Set the new year
curMonth.setFullYear(year + 1950);
//Set the new current month
calendar.goTo(curMonth);
}
function ValidateDates(clientID)
{
//Clear the message first
var errorDiv = document.getElementById("errordiv");
errorDiv.innerHTML = "";
//Get the date
var date = eo_GetObject(clientID).getSelectedDate();
//Check if date is provided
if ((date == null))
{
errorDiv.innerHTML = "Please select date";
errordiv.className = "validator_text";
return false;
}
}
function ValidateWithCurrentDate(sender, args)
{
var ctrltova = sender.getAttribute('ControlToValidate');
var givenDate = eo_GetObject(ctrltova).getSelectedDate();
var operator = parseInt(sender.getAttribute('operatorID'), 10);
var currentDateString = sender.getAttribute('CurrentDate');
var Day = currentDateString.split('/')[0];
var Month = currentDateString.split('/')[1];
var Year = currentDateString.split('/')[2];
var iDay = eval(Day);
var iMonth = eval(Month);
var iYear = eval(Year);
var currentDate = new Date(iYear, iMonth - 1, iDay);
switch(operator)
{
case 1:
args.IsValid = givenDate == currentDate;
break;
case 2:
args.IsValid = givenDate != currentDate;
break;
case 3:
args.IsValid = givenDate > currentDate;
break;
case 4:
args.IsValid = givenDate >= currentDate;
break;
case 5:
args.IsValid = givenDate < currentDate;
break;
case 6:
args.IsValid = givenDate <= currentDate;
break;
}
}
eo:DatePicker ID="DatePicker1" runat="server" DayCellHeight="15" DayCellWidth="31" DayHeaderFormat="FirstLetter" GridLineColor="207, 217, 227"
GridLineFrameVisible="False" GridLineVisible="True" PickerFormat="dd/MM/yyyy" TitleFormat="MMM yyyy" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
TitleRightArrowImageUrl="DefaultSubMenuIcon" TitleTemplateScope="TextOnly" Width="100px">
<TitleTemplate>
{var:visible_date:MMMM} <a id="month_picker2" href="javascript:ShowMonthPopup({var:this}.getId());">
<img border="0" src="{img:00020012}" /></a> {var:visible_date:yyyy} <a id="year_picker2" href="javascript:ShowYearPopup({var:this}.getId());">
<img border="0" src="{img:00020012}" /></a>
</TitleTemplate>
<SelectedDayStyle CssText="background-color:White;border-bottom-color:Black;bor der-bottom-style:solid;border-bottom-width:1px;border-left-co lor:Black;border-left-style:solid;border-left-width:1px;borde r-right-color:Black;border-right-style:solid;border-right-wid th:1px;border-top-color:Black;border-top-style:solid;border-t op-width:1px;" />
<DisabledDayStyle CssText="border-bottom-color:#CFD9C0;border-bottom-style:soli d;border-bottom-width:1px;border-left-color:#CFD9C0;border-le ft-style:solid;border-left-width:1px;border-right-color:#CFD9 C0;border-right-style:solid;border-right-width:1px;border-top -color:#CFD9C0;border-top-style:solid;border-top-width:1px;co lor:gray;" />
<CalendarStyle CssText="border-right: #555566 1px solid; border-top: #555566 1px solid; border-left: #555566 1px solid; border-bottom: #555566 1px solid; background-color: #ebe9ed" />
<DayHoverStyle CssText="border-right: #bbbbbb 1px solid; border-top: #bbbbbb 1px solid; border-left: #bbbbbb 1px solid; border-bottom: #bbbbbb 1px solid; background-color: #ddeeff" />
<MonthStyle CssText="font-size: 8pt; cursor: hand; font-family: verdana; background-color: #cfd9c0" />
<DayStyle CssText="border-bottom-color:#CFD9C0;border-bottom-style:soli d;border-bottom-width:1px;border-left-color:#CFD9C0;border-le ft-style:solid;border-left-width:1px;border-right-color:#CFD9 C0;border-right-style:solid;border-right-width:1px;border-top -color:#CFD9C0;border-top-style:solid;border-top-width:1px;" />
<DayHeaderStyle CssText="font-weight: bold; font-size: 11px; color: black; border-bottom: #555566 1px solid; font-family: verdana; background-color: #ae9c86" />
<PickerStyle CssText="background-color:pink" />
<TodayStyle CssText="background-image:url('00040401');color:#1176db;" />
<DayHeaderStyle CssText="border-bottom: #f5f5f5 1px solid" />
</eo:DatePicker>
<eo:ContextMenu ID="DatePicker1_mnuMonth" runat="server" ClientSideOnItemClick="MonthMenuClicked" ControlSkinID="None" Width="80px">
<TopGroup OffsetX="0" OffsetY="-100" Style-CssText="border-left-color:#e0e0e0;border-left-style:solid;border-left-width:1px;border-right-color:#e0e0e0;border-right-style:solid;border-right-width:1px;border-top-color:#e0e0e0;border-top-style:solid;border-top-width:1px;cursor:hand;font-family:arial;font-size:12px;padding-bottom:3px;padding-left:10px;padding-right:10px;padding-top:3px;">
<Items>
<eo:MenuItem Text-Html="January">
</eo:MenuItem>
<eo:MenuItem Text-Html="February">
</eo:MenuItem>
<eo:MenuItem Text-Html="March">
</eo:MenuItem>
<eo:MenuItem Text-Html="April">
</eo:MenuItem>
<eo:MenuItem Text-Html="May">
</eo:MenuItem>
<eo:MenuItem Text-Html="June">
</eo:MenuItem>
<eo:MenuItem Text-Html="July">
</eo:MenuItem>
<eo:MenuItem Text-Html="August">
</eo:MenuItem>
<eo:MenuItem Text-Html="September">
</eo:MenuItem>
<eo:MenuItem Text-Html="October">
</eo:MenuItem>
<eo:MenuItem Text-Html="November">
</eo:MenuItem>
<eo:MenuItem Text-Html="December">
</eo:MenuItem>
</Items>
</TopGroup>
<LookItems>
<eo:MenuItem HoverStyle-CssText="color:#1C7CDC;padding-left:5px;padding-right:5px;" ItemID="_Default" NormalStyle-CssText="color:#2C0B1E;padding-left:5px;padding-right:5px;">
<SubMenu ItemSpacing="5" ShadowDepth="0" Style-CssText="background-color:White;border-bottom-color:#e0e0e0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#e0e0e0;border-left-style:solid;border-left-width:1px;border-right-color:#e0e0e0;border-right-style:solid;border-right-width:1px;border-top-color:#e0e0e0;border-top-style:solid;border-top-width:1px;color:#606060;cursor:hand;font-family:arial;font-size:12px;padding-bottom:3px;padding-left:3px;padding-right:3px;padding-top:3px;">
</SubMenu>
</eo:MenuItem>
</LookItems>
</eo:ContextMenu>
<eo:ContextMenu ID="DatePicker1_mnuYear" runat="server" ClientSideOnItemClick="YearMenuClicked" ControlSkinID="None" EnableScrolling="True"
ScrollDownLookID="scroll_down" ScrollUpLookID="scroll_up" Width="80px">
<TopGroup Height="150" OffsetX="0" OffsetY="-50" Style-CssText="border-left-color:#e0e0e0;border-left-style:solid;border-left-width:1px;border-right-color:#e0e0e0;border-right-style:solid;border-right-width:1px;border-top-color:#e0e0e0;border-top-style:solid;border-top-width:1px;cursor:hand;font-family:arial;font-size:12px;padding-bottom:3px;padding-left:10px;padding-right:10px;padding-top:3px;">
<Items>
<eo:MenuItem Text-Html="1950">
</eo:MenuItem>
<eo:MenuItem Text-Html="1951">
</eo:MenuItem>
<eo:MenuItem Text-Html="1952">
</eo:MenuItem>
<eo:MenuItem Text-Html="1953">
</eo:MenuItem>
<eo:MenuItem Text-Html="1954">
</eo:MenuItem>
<eo:MenuItem Text-Html="1955">
</eo:MenuItem>
<eo:MenuItem Text-Html="1956">
</eo:MenuItem>
<eo:MenuItem Text-Html="1957">
</eo:MenuItem>
<eo:MenuItem Text-Html="1958">
</eo:MenuItem>
<eo:MenuItem Text-Html="1959">
</eo:MenuItem>
<eo:MenuItem Text-Html="1960">
</eo:MenuItem>
<eo:MenuItem Text-Html="1961">
</eo:MenuItem>
<eo:MenuItem Text-Html="1962">
</eo:MenuItem>
<eo:MenuItem Text-Html="1963">
</eo:MenuItem>
<eo:MenuItem Text-Html="1964">
</eo:MenuItem>
<eo:MenuItem Text-Html="1965">
</eo:MenuItem>
<eo:MenuItem Text-Html="1966">
</eo:MenuItem>
<eo:MenuItem Text-Html="1967">
</eo:MenuItem>
<eo:MenuItem Text-Html="1968">
</eo:MenuItem>
<eo:MenuItem Text-Html="1969">
</eo:MenuItem>
<eo:MenuItem Text-Html="1970">
</eo:MenuItem>
<eo:MenuItem Text-Html="1971">
</eo:MenuItem>
<eo:MenuItem Text-Html="1972">
</eo:MenuItem>
<eo:MenuItem Text-Html="1973">
</eo:MenuItem>
<eo:MenuItem Text-Html="1974">
</eo:MenuItem>
<eo:MenuItem Text-Html="1975">
</eo:MenuItem>
<eo:MenuItem Text-Html="1976">
</eo:MenuItem>
<eo:MenuItem Text-Html="1977">
</eo:MenuItem>
<eo:MenuItem Text-Html="1978">
</eo:MenuItem>
<eo:MenuItem Text-Html="1979">
</eo:MenuItem>
<eo:MenuItem Text-Html="1980">
</eo:MenuItem>
<eo:MenuItem Text-Html="1981">
</eo:MenuItem>
<eo:MenuItem Text-Html="1982">
</eo:MenuItem>
<eo:MenuItem Text-Html="1983">
</eo:MenuItem>
<eo:MenuItem Text-Html="1984">
</eo:MenuItem>
<eo:MenuItem Text-Html="1985">
</eo:MenuItem>
<eo:MenuItem Text-Html="1986">
</eo:MenuItem>
<eo:MenuItem Text-Html="1987">
</eo:MenuItem>
<eo:MenuItem Text-Html="1988">
</eo:MenuItem>
<eo:MenuItem Text-Html="1989">
</eo:MenuItem>
<eo:MenuItem Text-Html="1990">
</eo:MenuItem>
<eo:MenuItem Text-Html="1991">
</eo:MenuItem>
<eo:MenuItem Text-Html="1992">
</eo:MenuItem>
<eo:MenuItem Text-Html="1993">
</eo:MenuItem>
<eo:MenuItem Text-Html="1994">
</eo:MenuItem>
<eo:MenuItem Text-Html="1995">
</eo:MenuItem>
<eo:MenuItem Text-Html="1996">
</eo:MenuItem>
<eo:MenuItem Text-Html="1997">
</eo:MenuItem>
<eo:MenuItem Text-Html="1998">
</eo:MenuItem>
<eo:MenuItem Text-Html="1999">
</eo:MenuItem>
<eo:MenuItem Text-Html="2000">
</eo:MenuItem>
<eo:MenuItem Text-Html="2001">
</eo:MenuItem>
<eo:MenuItem Text-Html="2002">
</eo:MenuItem>
<eo:MenuItem Text-Html="2003">
</eo:MenuItem>
<eo:MenuItem Text-Html="2004">
</eo:MenuItem>
<eo:MenuItem Text-Html="2005">
</eo:MenuItem>
<eo:MenuItem Text-Html="2006">
</eo:MenuItem>
<eo:MenuItem Text-Html="2007">
</eo:MenuItem>
<eo:MenuItem Text-Html="2008">
</eo:MenuItem>
<eo:MenuItem Text-Html="2009">
</eo:MenuItem>
</Items>
</TopGroup>
<LookItems>
<eo:MenuItem HoverStyle-CssText="color:#1C7CDC;padding-left:5px;padding-right:5px;" ItemID="_Default" NormalStyle-CssText="color:#2C0B1E;padding-left:5px;padding-right:5px;">
<SubMenu ItemSpacing="5" ShadowDepth="0" Style-CssText="background-color:White;border-bottom-color:#e0e0e0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#e0e0e0;border-left-style:solid;border-left-width:1px;border-right-color:#e0e0e0;border-right-style:solid;border-right-width:1px;border-top-color:#e0e0e0;border-top-style:solid;border-top-width:1px;color:#606060;cursor:hand;font-family:arial;font-size:12px;padding-bottom:3px;padding-left:3px;padding-right:3px;padding-top:3px;">
</SubMenu>
</eo:MenuItem>
<eo:MenuItem Height="14" Image-Url="00020001" ItemID="scroll_down" NormalStyle-CssText="background-image:url('00020005');border-bottom-color:#E0E0E0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#E0E0E0;border-left-style:solid;border-left-width:1px;border-right-color:#E0E0E0;border-right-style:solid;border-right-width:1px;border-top-color:#E0E0E0;border-top-style:solid;border-top-width:1px;">
</eo:MenuItem>
<eo:MenuItem Height="14" Image-Url="00020000" ItemID="scroll_up" NormalStyle-CssText="background-image:url('00020005');border-bottom-color:#E0E0E0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#E0E0E0;border-left-style:solid;border-left-width:1px;border-right-color:#E0E0E0;border-right-style:solid;border-right-width:1px;border-top-color:#E0E0E0;border-top-style:solid;border-top-width:1px;">
</eo:MenuItem>
</LookItems>
</eo:ContextMenu>
<input id="hdnMessage" runat="server" type="text" visible="false" />
<asp:RequiredFieldValidator ID="rfvDatePicker" runat="server" CssClass="validator_text" Display="Dynamic" ForeColor=""></asp:RequiredFieldValidator>
<%--<asp:CustomValidator ID="cvDatePickerWithCurrentDate" runat="server" ClientValidationFunction="ValidateWithCurrentDate" ControlToValidate="DatePicker1"
CssClass="validator_text" Display="dynamic" Enabled="false" ForeColor=""> </asp:CustomValidator>
--%><input id="hdnCalendarDate" runat="server" type="hidden" />
<asp:RangeValidator ID="rngValDatePicker" runat="server" ControlToValidate="DatePicker1"
CssClass="validator_text" ForeColor="" Enabled="false" Visible="false" ErrorMessage="Invalid Date" Type="date"></asp:RangeValidator>
We've added a OnDateChange property in the cs file. DatePicker.ascx.cs
Code: C#
public string OnDateChange
{
get
{
return DatePicker1.Attributes["ClientSideOnChange"];
}
set
{
DatePicker1.Attributes.Add("ClientSideOnChange", value);
}
}
Sample.aspx
Code: HTML/ASPX
<script language="javascript" type="text/javascript">
function UpdateNextReviewDate()
{
var reviewDate = eo_GetObject("ctl00_middleContent_dsDateOfOccurence_DatePicker1").getSelectedDate();
if(reviewDate.value != null && reviewDate.value !="")
{
var reviewDay = eval(reviewDate.value.split('/')[0]);
var reviewMonth = eval(reviewDate.value.split('/')[1])
var reviewYear = eval(reviewDate.value.split('/')[2])
var nextReviewDateObj = new Date(reviewYear + 1,reviewMonth-1,reviewDay);
//Constructing Review date for display
var displayDate = String(nextReviewDateObj.getDate()).length > 1 ? String(nextReviewDateObj.getDate()) : '0'+ String(nextReviewDateObj.getDate());
var displayMonth = String(nextReviewDateObj.getMonth()+1).length > 1 ? String(nextReviewDateObj.getMonth()+1) : '0'+ String(nextReviewDateObj.getMonth()+1);
var formatedTxtnextReviewDate = displayDate + '/' + displayMonth + '/' + nextReviewDateObj.getFullYear();
alert(formatedTxtnextReviewDate);
}
else
{
alert('nothing');
}
}
</script>
<table><tr class="trbgcolor">
<td align="right" class="text01">
Date of entry </td>
<td class="text03">
<asp:Label ID="lblDateOfEntry" runat="server" CssClass="verdana10"></asp:Label></td>
<td align="right" class="text01">
Date of occurance <span class="required">*</span>
</td>
<td class="text03">
<ucDate:DatePicker ID="dsDateOfOccurence" runat="server" ErrorMessage="Enter date." />
</td>
</tr></table>
Sample.aspx.cs
Code: C#
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
dsDateOfOccurence.OnDateChange = "UpdateNextReviewDate();";
}
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, All our client side event handler takes a function name. Not a function call. So this is correct:
Code: C#
dsDateOfOccurence.OnDateChange = "UpdateNextReviewDate";
This is wrong:
Code: C#
dsDateOfOccurence.OnDateChange = "UpdateNextReviewDate()";
Thanks!
|
Rank: Advanced Member
Groups: Member
Joined: 8/21/2008
Posts: 37
|
Hi,
I tried the above solution. But its not working. Could you please give me an alternate solution? Any help would be highly
appreciated.
Thanks & Regards,
Raghav
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
This is the solution. We verified it works fine:
Code: HTML/ASPX
<script type="text/javascript">
function test()
{
window.alert("changed!");
}
</script>
<eo:DatePicker id="DatePicker1" runat="server" DayCellHeight="16" OtherMonthDayVisible="True" TitleRightArrowImageUrl="DefaultSubMenuIcon"
TitleLeftArrowImageUrl="DefaultSubMenuIconRTL" DayHeaderFormat="FirstLetter" ControlSkinID="None"
VisibleDate="2009-04-01" DayCellWidth="19" ClientSideOnChange="test">
<CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-size: 9px; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid; font-family: tahoma"></CalendarStyle>
<SelectedDayStyle CssText="font-family: tahoma; font-size: 12px; background-color: #fbe694; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid"></SelectedDayStyle>
<TitleArrowStyle CssText="cursor:hand"></TitleArrowStyle>
<PickerStyle CssText="font-family:Courier New; padding-left:5px; padding-right: 5px;"></PickerStyle>
<TodayStyle CssText="font-family: tahoma; font-size: 12px; border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid"></TodayStyle>
<MonthStyle CssText="font-family: tahoma; font-size: 12px; margin-left: 14px; cursor: hand; margin-right: 14px"></MonthStyle>
<DayHoverStyle CssText="font-family: tahoma; font-size: 12px; border-right: #fbe694 1px solid; border-top: #fbe694 1px solid; border-left: #fbe694 1px solid; border-bottom: #fbe694 1px solid"></DayHoverStyle>
<DisabledDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid"></DisabledDayStyle>
<DayHeaderStyle CssText="font-family: tahoma; font-size: 12px; border-bottom: #aca899 1px solid"></DayHeaderStyle>
<OtherMonthDayStyle CssText="font-family: tahoma; font-size: 12px; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid"></OtherMonthDayStyle>
<DayStyle CssText="font-family: tahoma; font-size: 12px; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid"></DayStyle>
<TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;"></TitleStyle>
</eo:DatePicker>
The DatePicker is created from the default Outlook2003 template.
|