JavaScript Forum

**kani alavi** · 04:26 AM

the below is supposed to fire an onchange event associated with a textbox when the value of the textbox is change by selecting a date from a calendar generated by a script attached to the to textbox onclick event.
but when the date is selected, the onchange event is not fired. i am using IE 7. Please help.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

Code:

<script type="text/javascript">
function validateAppointmentDate(date){
var today = new Date;
var appdate= date.value;
 alert('Appointment date must be later than today');
}
 
</script>
<script language="javascript" type="text/javascript" src="datetimepick/datetimepicker.js">
//Date Time Picker script- by TengYong Ng of http://www.rainforestnet.com
//Script featured on JavaScript Kit (http://www.javascriptkit.com)
//For this script, visit http://www.javascriptkit.com 
</script>

</head>
<body>
<form action="" method="get">
Date/Time:<input type="text" name="schedule" id="datetime" onclick="javascript:NewCal('datetime','ddmmmyyyy', true,12);" onChange="validateAppointmentDate(this);"/><span class="descriptions">click to pick a date..</span>
<input name="" type="text" />
<input name="" type="text" />
<input name="send" type="submit" value="send" />
</form>
</body>
</html

**chrishirst** · 04-01-2010, 04:54 AM

onchange only triggers from key board input. Fire the required event when the script inserts the value.

**kani alavi** · 04-02-2010, 05:56 AM

thank you chris for educating me. i will try embedding the required event in the calendar script and i will let you know whatever the result is.

**kani alavi** · 04-02-2010, 04:11 PM

below is the date-time-picker script i am using.i got it from the net. please i am new to javascript could you please help me to identify where i should place or call my onchange event script in the date-time-picker script so that when the date-time-picker script set the value of the textbox to the user selected date and time from the calendar popup, my onchange event will be fired.

Code:

//Javascript name: My Date Time Picker
//Date created: 16-Nov-2003 23:19
//Scripter: TengYong Ng
//Website: http://www.rainforestnet.com
//Copyright (c) 2003 TengYong Ng
//FileName: DateTimePicker.js
//Version: 0.8
//Contact: contact@rainforestnet.com
// Note: Permission given to use this script in ANY kind of applications if
//       header lines are left unchanged.
//Global variables
var winCal;
var dtToday=new Date();
var Cal;
var docCal;
var MonthName=["January", "February", "March", "April", "May", "June","July", 
 "August", "September", "October", "November", "December"];
var WeekDayName=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; 
var exDateTime;//Existing Date and Time
//Configurable parameters
var cnTop="200";//top coordinate of calendar window.
var cnLeft="500";//left coordinate of calendar window
var WindowTitle ="DateTime Picker";//Date Time Picker title.
var WeekChar=2;//number of character for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed.
var CellWidth=20;//Width of day cell.
var DateSeparator="-";//Date Separator, you can change it to "/" if you want.
var TimeMode=24;//default TimeMode value. 12 or 24
var ShowLongMonth=true;//Show long month name in Calendar header. example: "January".
var ShowMonthYear=true;//Show Month and Year in Calendar header.
var MonthYearColor="#cc0033";//Font Color of Month and Year in Calendar header.
var WeekHeadColor="#0099CC";//Background Color in Week header.
var SundayColor="#6699FF";//Background color of Sunday.
var SaturdayColor="#CCCCFF";//Background color of Saturday.
var WeekDayColor="white";//Background color of weekdays.
var FontColor="blue";//color of font in Calendar day cell.
var TodayColor="#FFFF33";//Background color of today.
var SelDateColor="#FFFF99";//Backgrond color of selected date in textbox.
var YrSelColor="#cc0033";//color of font of Year selector.
var ThemeBg="";//Background image of Calendar window.
//end Configurable parameters
//end Global variable
function NewCal(pCtrl,pFormat,pShowTime,pTimeMode)
{
 Cal=new Calendar(dtToday);
 if ((pShowTime!=null) && (pShowTime))
 {
  Cal.ShowTime=true;
  if ((pTimeMode!=null) &&((pTimeMode=='12')||(pTimeMode=='24')))
  {
   TimeMode=pTimeMode;
  }  
 } 
 if (pCtrl!=null)
  Cal.Ctrl=pCtrl;
 if (pFormat!=null)
  Cal.Format=pFormat.toUpperCase();
 
 exDateTime=document.getElementById(pCtrl).value;
 if (exDateTime!="")//Parse Date String
 {
  var Sp1;//Index of Date Separator 1
  var Sp2;//Index of Date Separator 2 
  var tSp1;//Index of Time Separator 1
  var tSp1;//Index of Time Separator 2
  var strMonth;
  var strDate;
  var strYear;
  var intMonth;
  var YearPattern;
  var strHour;
  var strMinute;
  var strSecond;
  //parse month
  Sp1=exDateTime.indexOf(DateSeparator,0)
  Sp2=exDateTime.indexOf(DateSeparator,(parseInt(Sp1)+1));
  
  if ((Cal.Format.toUpperCase()=="DDMMYYYY") || (Cal.Format.toUpperCase()=="DDMMMYYYY"))
  {
   strMonth=exDateTime.substring(Sp1+1,Sp2);
   strDate=exDateTime.substring(0,Sp1);
  }
  else if ((Cal.Format.toUpperCase()=="MMDDYYYY") || (Cal.Format.toUpperCase()=="MMMDDYYYY"))
  {
   strMonth=exDateTime.substring(0,Sp1);
   strDate=exDateTime.substring(Sp1+1,Sp2);
  }
  if (isNaN(strMonth))
   intMonth=Cal.GetMonthIndex(strMonth);
  else
   intMonth=parseInt(strMonth,10)-1; 
  if ((parseInt(intMonth,10)>=0) && (parseInt(intMonth,10)<12))
   Cal.Month=intMonth;
  //end parse month
  //parse Date
  if ((parseInt(strDate,10)<=Cal.GetMonDays()) && (parseInt(strDate,10)>=1))
   Cal.Date=strDate;
  //end parse Date
  //parse year
  strYear=exDateTime.substring(Sp2+1,Sp2+5);
  YearPattern=/^\d{4}$/;
  if (YearPattern.test(strYear))
   Cal.Year=parseInt(strYear,10);
  //end parse year
  //parse time
  if (Cal.ShowTime==true)
  {
   tSp1=exDateTime.indexOf(":",0)
   tSp2=exDateTime.indexOf(":",(parseInt(tSp1)+1));
   strHour=exDateTime.substring(tSp1,(tSp1)-2);
   Cal.SetHour(strHour);
   strMinute=exDateTime.substring(tSp1+1,tSp2);
   Cal.SetMinute(strMinute);
   strSecond=exDateTime.substring(tSp2+1,tSp2+3);
   Cal.SetSecond(strSecond);
  } 
 }
 winCal=window.open("","DateTimePicker","toolbar=0,status=0,menubar=0,fullscreen=no,width=195,height=245,resizable=0,top="+cnTop+",left="+cnLeft);
 docCal=winCal.document;
 RenderCal();
}
function RenderCal()
{
 var vCalHeader;
 var vCalData;
 var vCalTime;
 var i;
 var j;
 var SelectStr;
 var vDayCount=0;
 var vFirstDay;
 docCal.open();
 docCal.writeln("<html><head><title>"+WindowTitle+"</title>");
 docCal.writeln("<script>var winMain=window.opener;</script>");
 docCal.writeln("</head><body background='"+ThemeBg+"' link="+FontColor+" vlink="+FontColor+"><form name='Calendar'>");
 vCalHeader="<table border=1 cellpadding=1 cellspacing=1 width='100%' align=\"center\" valign=\"top\">\n";
 //Month Selector
 vCalHeader+="<tr>\n<td colspan='7'><table border=0 width='100%' cellpadding=0 cellspacing=0><tr><td align='left'>\n";
 vCalHeader+="<select name=\"MonthSelector\" onChange=\"javascript:winMain.Cal.SwitchMth(this.selectedIndex);winMain.RenderCal();\">\n";
 for (i=0;i<12;i++)
 {
  if (i==Cal.Month)
   SelectStr="Selected";
  else
   SelectStr=""; 
  vCalHeader+="<option "+SelectStr+" value >"+MonthName[i]+"\n";
 }
 vCalHeader+="</select></td>";
 //Year selector
 vCalHeader+="\n<td align='right'><a href=\"javascript:winMain.Cal.DecYear();winMain.RenderCal()\"><b><font color=\""+YrSelColor+"\"><</font></b></a><font face=\"Verdana\" color=\""+YrSelColor+"\" size=2><b> "+Cal.Year+" </b></font><a href=\"javascript:winMain.Cal.IncYear();winMain.RenderCal()\"><b><font color=\""+YrSelColor+"\">></font></b></a></td></tr></table></td>\n"; 
 vCalHeader+="</tr>";
 //Calendar header shows Month and Year
 if (ShowMonthYear)
  vCalHeader+="<tr><td colspan='7'><font face='Verdana' size='2' align='center' color='"+MonthYearColor+"'><b>"+Cal.GetMonthName(ShowLongMonth)+" "+Cal.Year+"</b></font></td></tr>\n";
 //Week day header
 vCalHeader+="<tr bgcolor="+WeekHeadColor+">";
 for (i=0;i<7;i++)
 {
  vCalHeader+="<td align='center'><font face='Verdana' size='2'>"+WeekDayName[i].substr(0,WeekChar)+"</font></td>";
 }
 vCalHeader+="</tr>"; 
 docCal.write(vCalHeader);
 
 //Calendar detail
 CalDate=new Date(Cal.Year,Cal.Month);
 CalDate.setDate(1);
 vFirstDay=CalDate.getDay();
 vCalData="<tr>";
 for (i=0;i<vFirstDay;i++)
 {
  vCalData=vCalData+GenCell();
  vDayCount=vDayCount+1;
 }
 for (j=1;j<=Cal.GetMonDays();j++)
 {
  var strCell;
  vDayCount=vDayCount+1;
  if ((j==dtToday.getDate())&&(Cal.Month==dtToday.getMonth())&&(Cal.Year==dtToday.getFullYear()))
   strCell=GenCell(j,true,TodayColor);//Highlight today's date
  else
  {
   if (j==Cal.Date)
   {
    strCell=GenCell(j,true,SelDateColor);
   }
   else
   {  
    if (vDayCount%7==0)
     strCell=GenCell(j,false,SaturdayColor);
    else if ((vDayCount+6)%7==0)
     strCell=GenCell(j,false,SundayColor);
    else
     strCell=GenCell(j,null,WeekDayColor);
   }  
  }      
  vCalData=vCalData+strCell;
  if((vDayCount%7==0)&&(j<Cal.GetMonDays()))
  {
   vCalData=vCalData+"</tr>\n<tr>";
  }
 }
 docCal.writeln(vCalData); 
 //Time picker
 if (Cal.ShowTime)
 {
  var showHour;
  showHour=Cal.getShowHour();  
  vCalTime="<tr>\n<td colspan='7' align='center'>";
  vCalTime+="<input type='text' name='hour' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+showHour+" onchange=\"javascript:winMain.Cal.SetHour(this.value)\">";
  vCalTime+=" : ";
  vCalTime+="<input type='text' name='minute' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+Cal.Minutes+" onchange=\"javascript:winMain.Cal.SetMinute(this.value)\">";
  vCalTime+=" : ";
  vCalTime+="<input type='text' name='second' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+Cal.Seconds+" onchange=\"javascript:winMain.Cal.SetSecond(this.value)\">";
  if (TimeMode==12)
  {
   var SelectAm =(parseInt(Cal.Hours,10)<12)? "Selected":"";
   var SelectPm =(parseInt(Cal.Hours,10)>=12)? "Selected":"";
   vCalTime+="<select name=\"ampm\" onchange=\"javascript:winMain.Cal.SetAmPm(this.options[this.selectedIndex].value);\">";
   vCalTime+="<option "+SelectAm+" value=\"AM\">AM</option>";
   vCalTime+="<option "+SelectPm+" value=\"PM\">PM<option>";
   vCalTime+="</select>";
  } 
  vCalTime+="\n</td>\n</tr>";
  docCal.write(vCalTime);
 } 
 //end time picker
 docCal.writeln("\n</table>");
 docCal.writeln("</form></body></html>");
 docCal.close();
}
function GenCell(pValue,pHighLight,pColor)//Generate table cell with value
{
 var PValue;
 var PCellStr;
 var vColor;
 var vHLstr1;//HighLight string
 var vHlstr2;
 var vTimeStr;
 
 if (pValue==null)
  PValue="";
 else
  PValue=pValue;
 
 if (pColor!=null)
  vColor="bgcolor=\""+pColor+"\"";
 else
  vColor=""; 
 if ((pHighLight!=null)&&(pHighLight))
  {vHLstr1="color='red'><b>";vHLstr2="</b>";}
 else
  {vHLstr1=">";vHLstr2="";} 
 
 if (Cal.ShowTime)
 {
  vTimeStr="winMain.document.getElementById('"+Cal.Ctrl+"').value+=' '+"+"winMain.Cal.getShowHour()"+"+':'+"+"winMain.Cal.Minutes"+"+':'+"+"winMain.Cal.Seconds";
  if (TimeMode==12)
   vTimeStr+="+' '+winMain.Cal.AMorPM";
 } 
 else
  vTimeStr="";  
 PCellStr="<td "+vColor+" width="+CellWidth+" align='center'><font face='verdana' size='2'"+vHLstr1+"<a href=\"javascript:winMain.document.getElementById('"+Cal.Ctrl+"').value='"+Cal.FormatDate(PValue)+"';"+vTimeStr+";window.close();\">"+PValue+"</a>"+vHLstr2+"</font></td>";
 return PCellStr;
}
function Calendar(pDate,pCtrl)
{
 //Properties
 this.Date=pDate.getDate();//selected date
 this.Month=pDate.getMonth();//selected month number
 this.Year=pDate.getFullYear();//selected year in 4 digits
 this.Hours=pDate.getHours(); 
 
 if (pDate.getMinutes()<10)
  this.Minutes="0"+pDate.getMinutes();
 else
  this.Minutes=pDate.getMinutes();
 
 if (pDate.getSeconds()<10)
  this.Seconds="0"+pDate.getSeconds();
 else  
  this.Seconds=pDate.getSeconds();
  
 this.MyWindow=winCal;
 this.Ctrl=pCtrl;
 this.Format="ddMMyyyy";
 this.Separator=DateSeparator;
 this.ShowTime=false;
 if (pDate.getHours()<12)
  this.AMorPM="AM";
 else
  this.AMorPM="PM"; 
}
function GetMonthIndex(shortMonthName)
{
 for (i=0;i<12;i++)
 {
  if (MonthName[i].substring(0,3).toUpperCase()==shortMonthName.toUpperCase())
  { return i;}
 }
}
Calendar.prototype.GetMonthIndex=GetMonthIndex;
function IncYear()
{ Cal.Year++;}
Calendar.prototype.IncYear=IncYear;
function DecYear()
{ Cal.Year--;}
Calendar.prototype.DecYear=DecYear;
 
function SwitchMth(intMth)
{ Cal.Month=intMth;}
Calendar.prototype.SwitchMth=SwitchMth;
function SetHour(intHour)
{ 
 var MaxHour;
 var MinHour;
 if (TimeMode==24)
 { MaxHour=23;MinHour=0}
 else if (TimeMode==12)
 { MaxHour=12;MinHour=1}
 else
  alert("TimeMode can only be 12 or 24");  
 var HourExp=new RegExp("^\\d\\d$");
 if (HourExp.test(intHour) && (parseInt(intHour,10)<=MaxHour) && (parseInt(intHour,10)>=MinHour))
 { 
  if ((TimeMode==12) && (Cal.AMorPM=="PM"))
  {
   if (parseInt(intHour,10)==12)
    Cal.Hours=12;
   else 
    Cal.Hours=parseInt(intHour,10)+12;
  } 
  else if ((TimeMode==12) && (Cal.AMorPM=="AM"))
  {
   if (intHour==12)
    intHour-=12;
   Cal.Hours=parseInt(intHour,10);
  }
  else if (TimeMode==24)
   Cal.Hours=parseInt(intHour,10); 
 }
}
Calendar.prototype.SetHour=SetHour;
function SetMinute(intMin)
{
 var MinExp=new RegExp("^\\d\\d$");
 if (MinExp.test(intMin) && (intMin<60))
  Cal.Minutes=intMin;
}
Calendar.prototype.SetMinute=SetMinute;
function SetSecond(intSec)
{ 
 var SecExp=new RegExp("^\\d\\d$");
 if (SecExp.test(intSec) && (intSec<60))
  Cal.Seconds=intSec;
}
Calendar.prototype.SetSecond=SetSecond;
function SetAmPm(pvalue)
{
 this.AMorPM=pvalue;
 if (pvalue=="PM")
 {
  this.Hours=(parseInt(this.Hours,10))+12;
  if (this.Hours==24)
   this.Hours=12;
 } 
 else if (pvalue=="AM")
  this.Hours-=12; 
}
Calendar.prototype.SetAmPm=SetAmPm;
function getShowHour()
{
 var finalHour;
    if (TimeMode==12)
    {
     if (parseInt(this.Hours,10)==0)
  {
   this.AMorPM="AM";
   finalHour=parseInt(this.Hours,10)+12; 
  }
  else if (parseInt(this.Hours,10)==12)
  {
   this.AMorPM="PM";
   finalHour=12;
  }  
  else if (this.Hours>12)
  {
   this.AMorPM="PM";
   if ((this.Hours-12)<10)
    finalHour="0"+((parseInt(this.Hours,10))-12);
   else
    finalHour=parseInt(this.Hours,10)-12; 
  }
  else
  {
   this.AMorPM="AM";
   if (this.Hours<10)
    finalHour="0"+parseInt(this.Hours,10);
   else
    finalHour=this.Hours; 
  }
 }
 else if (TimeMode==24)
 {
  if (this.Hours<10)
   finalHour="0"+parseInt(this.Hours,10);
  else 
   finalHour=this.Hours;
 } 
 return finalHour; 
}    
Calendar.prototype.getShowHour=getShowHour;  
function GetMonthName(IsLong)
{
 var Month=MonthName[this.Month];
 if (IsLong)
  return Month;
 else
  return Month.substr(0,3);
}
Calendar.prototype.GetMonthName=GetMonthName;
function GetMonDays()//Get number of days in a month
{
 var DaysInMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 if (this.IsLeapYear())
 {
  DaysInMonth[1]=29;
 } 
 return DaysInMonth[this.Month]; 
}
Calendar.prototype.GetMonDays=GetMonDays;
function IsLeapYear()
{
 if ((this.Year%4)==0)
 {
  if ((this.Year%100==0) && (this.Year%400)!=0)
  {
   return false;
  }
  else
  {
   return true;
  }
 }
 else
 {
  return false;
 }
}
Calendar.prototype.IsLeapYear=IsLeapYear;
function FormatDate(pDate)
{
 if (this.Format.toUpperCase()=="DDMMYYYY")
  return (pDate+DateSeparator+(this.Month+1)+DateSeparator+this.Year);
 else if (this.Format.toUpperCase()=="DDMMMYYYY")
  return (pDate+DateSeparator+this.GetMonthName(false)+DateSeparator+this.Year);
 else if (this.Format.toUpperCase()=="MMDDYYYY")
  return ((this.Month+1)+DateSeparator+pDate+DateSeparator+this.Year);
 else if (this.Format.toUpperCase()=="MMMDDYYYY")
  return (this.GetMonthName(false)+DateSeparator+pDate+DateSeparator+this.Year);   
}
Calendar.prototype.FormatDate=FormatDate;

this is the onchange event script i wrote. it supposed to check whether the date selected above is not earlier than the current date.

Code:

function validateAppointmentDate(txtboxID){
var today = new Date;
var appdate= document.getElementById(txtboxID).value;
if(today>appdate)
 alert('Appointment date must be later than today');

and this is the html code

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function validateAppointmentDate(txtboxID){
var today = new Date;
var appdate= document.getElementById(txtboxID).value;
if(today>appdate)
 alert('Appointment date must be later than today');
}
  
</script>
<script language="javascript" type="text/javascript" src="datetimepick/datetimepicker.js">
//Date Time Picker script- by TengYong Ng of http://www.rainforestnet.com
//Script featured on JavaScript Kit (http://www.javascriptkit.com)
//For this script, visit http://www.javascriptkit.com 
</script>
</head>
<body>
<form action="" method="get">
Date/Time:<input type="text" name="schedule" id="datetime" class="DEPENDS ON needs BEING appointment" onclick="javascript:NewCal('datetime','ddmmmyyyy',true,12);"  onkeydown="validateAppointmentDate('datetime');"/><span class="descriptions">click to pick a date..</span>
<input name="" type="text" />
<input name="" type="text" />
<input name="send" type="submit" value="send" />
</form>
</body>
</html>