This should be easy. I'm not sure what I'm missing here. The Javascript is really basic (it works), but the CalendarPopupExtender's event calls it and it bombs even with a return value at the end of it (currently null).
Any help would be greatly appreciated. Thanks in advance
Here's the code:
<%
@dotnet.itags.org.PageLanguage="C#"AutoEventWireup="true"CodeFile="AjaxCalendarTest.aspx.cs"Inherits="AjaxCalendarTest" %><%
@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %><!
DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><
htmlxmlns="http://www.w3.org/1999/xhtml"><
headrunat="server"><title>Date Label Text</title><scriptlanguage="javascript">function ChangeRelativeDateLabelText(){
//var testLabel = Sys.UI.Label($get('MyLabel'));var relativeDateDiv = document.getElementById('RelativeDateDiv');//var selectedDateTextBox = new Sys.UI.TextBox();//selectedDateTextBox = $get('DateTextBox');var selectedDateText = document.getElementById('DateTextBox').value//var textBoxString = document.getElementById('SelectedDateTextBox').value;var dateTokens = selectedDateText.split('/');var month = dateTokens[0];var day = dateTokens[1];var year = dateTokens[2];
var currentDate =new Date()// current datevar dateToCompare =new Date()
dateToCompare.setMonth(month )
dateToCompare.setDate(day)
dateToCompare.setYear(year)
currentDate.setMonth(month);
function GetDaysDelta(value1,value2) {var delta = 0;var date1 = value1;var date2 = value2;if (value1.getTime() < value2.getTime()) {
date1 = value2;
date2 = value1;
}
delta = date1.getTime() - date2.getTime();
// in msecsdelta /= (1000 * 60 * 60 * 24);
// daysif (value1.getTime() > value2.getTime()) {delta = delta * -1;
}
return delta;}
function GetDateLabelString(delta)
{
if (delta < 0){
return''}
elseif (delta >= 0 && delta < 1){
return'(Today)';}
elseif (delta >= 1 && delta < 2){
return'(Yesterday)'}
else{
return'(' + delta +' Days Ago)'}
}
var _X = 4.5// in thousands!var delta = GetDaysDelta(dateToCompare,currentDate);
var dateLabelString = GetDateLabelString(delta);
relativeDateDiv.innerHTML = dateLabelString;
returnnull;
}
</script></
head><
body><formid="form1"runat="server"><div><asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager></div><asp:TextBoxID="DateTextBox"runat="server"></asp:TextBox><asp:LabelID="MyLabel"runat="server"Text="Label"></asp:Label><divID="RelativeDateDiv"style="width: 100px; height: 100px"></div><cc1:CalendarExtenderID="CalendarExtender1"runat="server"OnClientDateSelectionChanged="ChangeRelativeDateLabelText()"TargetControlID="DateTextBox"></cc1:CalendarExtender></form>
</
body></
html>I have rearranged(functions "GetDaysDelta" and"GetDateLabelString", where within "ChangeRelativeDateLabelText", I moved it outside.) your code now it seems to be working(atleaset no error message). Still seems to be having some logical errors.
The error " Handler must be a function" is becasuse
OnClientDateSelectionChanged="ChangeRelativeDateLabelText()"
correct one is OnClientDateSelectionChanged="ChangeRelativeDateLabelText" (with out brackets)
<%@. Page Language="C#" AutoEventWireup="true" CodeFile="AjaxCalendarTest.aspx.cs" Inherits="AjaxCalendarTest" %
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %
<%
@. 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 id="Head1" runat="server"
<title>Date Label Text</title>
<script language="javascript" >
function ChangeRelativeDateLabelText()
{
//var testLabel = Sys.UI.Label($get('MyLabel'));
var relativeDateDiv = document.getElementById('RelativeDateDiv');
//var selectedDateTextBox = new Sys.UI.TextBox();
//selectedDateTextBox = $get('DateTextBox');
var selectedDateText = document.getElementById('DateTextBox').value
//var textBoxString = document.getElementById('SelectedDateTextBox').value;
var dateTokens = selectedDateText.split('/');
var month = dateTokens[0];
var day = dateTokens[1];
var year = dateTokens[2];
var currentDate = new Date() // current date
var dateToCompare = new Date()
dateToCompare.setMonth(month )
dateToCompare.setDate(day)
dateToCompare.setYear(year)
currentDate.setMonth(month);
var _X = 4.5 // in thousands!
var delta = GetDaysDelta(dateToCompare,currentDate);
var dateLabelString = GetDateLabelString(delta);
relativeDateDiv.innerHTML = dateLabelString;
return true;
}
function GetDaysDelta(value1,value2) {
var delta = 0;
var date1 = value1;
var date2 = value2;
if (value1.getTime() < value2.getTime()) {
date1 = value2;
date2 = value1;
}
delta = date1.getTime() - date2.getTime();
// in msecs
delta /= (1000 * 60 * 60 * 24);
// days
if (value1.getTime() > value2.getTime()) {
delta = delta * -1;
}
return delta;
}
function GetDateLabelString(delta)
{
if (delta < 0)
{
return ''
}
else if (delta >= 0 && delta < 1)
{
return '(Today)';
}
else if (delta >= 1 && delta < 2)
{
return '(Yesterday)'
}
else
{
return '(' + delta + ' Days Ago)'
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
<asp:TextBox ID="DateTextBox" runat="server"></asp:TextBox>
<asp:Label ID="MyLabel" runat="server" Text="Label"></asp:Label>
<div ID="RelativeDateDiv" style="width: 100px; height: 100px"></div>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server"OnClientDateSelectionChanged="ChangeRelativeDateLabelText"TargetControlID="DateTextBox">
</cc1:CalendarExtender>
</form>
</body>
</html>
That was it. It works perfectly. Thanks for your help.
No comments:
Post a Comment