Javascript on textbox changed question

[MikeMoschella]

Hello

I was at the javascriptkit.com and was to use one of there Javascript calenders in my web page the "Popup Date Picker" and the "Date Time Picker". I have the calenders working fine and after the date is selected it fills in the correct textbox with the date. The problem is after the user selects the date in the calender popup window I would like it to run another javascript function. But I cannot see in the calender code how to have it call my javascript code. I also tried the OnChange event with the Textbox that the Calenders are filling in with the date but it only fires when I click in the textbox. I call the Calenders JavaScript functions from my JavaScript script function that is tied to an aspropDownList OnChange Event. Is there any way I can have these calenders call a javascript function
when the date is selected in there window? Or could I try to catch when the
textbox is filled in with the date and call my function then?

Thanks
Mike

[Kor]

It is hard to say without seeing the codes. Can you post a link to a test page? And detail a little bit more your aim, please.

[MikeMoschella]

Kor

I have posted a good example of what I am trying to do at this link
http://www.yousendit.com/download/T1...TXZVbSt4dnc9PQ

I have a Calander created using JavaScript by TengYong Ng.

I have a TestCalender.aspx
<asp:TextBox ID="txtEndTime" runat="server" BackColor="GhostWhite" style="text-align:center">
</asp:TextBox>
<asp:TextBox ID="TextBox1" runat="server" BackColor="GhostWhite" style="text-align:center">
</asp:TextBox>

I added the OnChange event using Attribute.Add command for the txtEndTime textbox in TestCalender.aspx
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
txtEndTime.Attributes.Add("OnChange", "txtEndTime_CalWithNewDate()");
}
}

So if I enter "12/14/2009" in txtEndTime and then click in the TextBox1 box the OnChange calls the JavaScript function

function txtEndTime_CalWithNewDate()
{
//this is how I call the calender when button is clicked
NewCssCal('txtEndTime','mmddyyyy','arrow');
}
Which calls NewCssCal to Display the Calender which is in the file
datetimepicker_css.js
What I want to do is to be able to call the other function
function ProcessDate()
{
//Want to call this fucntion after the calander is closed
var j = document.getElementById("txtEndTime");
var Date = j.value
alert("My New Date is:" + Date);
}
when a date is select in the Calander.
I cannot figure out how to do the in the JavaScript.

Thanks
Mike

[Old Pedant]

Pardon me, but that's not an example of what you are using. That's code we have to download and unzip and install, just to see what you are talking about.

Can't you show this "live" someplace? Would be more likely to get people to look at it.

Anyway, for what you want to do, you'll need to modify the JavaScript calendar code. Shouldn't be hard, at all. Whatever code is used to close the calendar and/or put the selected date into your <form> field should be easy to identify. So, then, you just call your function from within that code.

Likely if you pointed us to the "datetimepicker_css.js" code we could show you where to do that.

[MikeMoschella]

Hi
A working example is located at

http://rainforestnet.com/demo_datetimepicker.htm

I have attached the fileDateTimePicker_css.txt which holds the javascript code for the calender.

I call the function NewCssCal which sets the settings for the control
function NewCssCal(pCtrl,pFormat,pScroller,pShowTime,pTimeMode,pHideSeconds)

NewCssCal calls function RenderCssCal(bNewCal) to build the calender
NewCssCal also calls function Calendar(pDate,pCtrl) to create a calender object with a date.

RenderCssCal calls the function GenCell(pValue,pHighLight,pColor) to Generate each of the cells of the calender table cell with values.

I think RenderCssCal is where I need to call my javascript function but I cannot understand how it closes. I know it calls itself recursion to rebuild the calendar.

Inside RenderCssCal it fills a variable with function callback
var funcCalback="function callback(id, datum) {\n";
funcCalback+=" var CalId = document.getElementById(id); if (datum== 'undefined') { var d = new Date(); datum = d.getDate() + '/' +(d.getMonth()+1) + '/' + d.getFullYear(); } window.calDatum=datum;CalId.value=datum;\n";
funcCalback+=" if (Cal.ShowTime) {\n";
funcCalback+=" CalId.value+=' '+Cal.getShowHour()+':'+Cal.Minutes;\n";
funcCalback+=" if (Cal.ShowSeconds)\n CalId.value+=':'+Cal.Seconds;\n";
funcCalback+=" if (TimeMode==12)\n CalId.value+=''+Cal.getShowAMorPM();\n";
funcCalback+="}\n winCal.style.visibility='hidden';\n}\n";

This fills the attached textbox with the selected date from the calender and closes the calendar. I tried adding my function to the end of this variable but it only called my function once at the beginning.

Thanks
Mike

[MikeMoschella]

First because it the calander used recursion I new it had to do with the CallBack script the calander code was creating.

So I edit the CallBack Script and Added a call to new function I added called
Cal.OnDateSelected(CalId.value); passing the date selected.

//end time picker
var funcCalback="function callback(id, datum) {\n";
funcCalback+=" var CalId = document.getElementById(id); if (datum== 'undefined') { var d = new Date(); datum = d.getDate() + '/' +(d.getMonth()+1) + '/' + d.getFullYear(); } window.calDatum=datum;CalId.value=datum;\n";
funcCalback+=" if (Cal.ShowTime) {\n";
funcCalback+=" CalId.value+=' '+Cal.getShowHour()+':'+Cal.Minutes;\n";
funcCalback+=" if (Cal.ShowSeconds)\n CalId.value+=':'+Cal.Seconds;\n";
funcCalback+=" if (TimeMode==12)\n CalId.value+=''+Cal.getShowAMorPM();\n";
funcCalback+="}\n Cal.OnDateSelected(CalId.value); winCal.style.visibility='hidden';\n}\n";

This function calls a Javascript function on my webpage with the date.
function OnDateSelected(strDate)
{
CallBack_WithNewDateSelected(strDate);
}

Calendar.prototype.OnDateSelected=OnDateSelected;

[Old Pedant]

Sorry I didn't see your answer to me before today. Yep, you did exactly right. Great.