Jasbir21
asked on
POP-UP calender in html and javascript
Hi,
I need a pop up calender code in html, but i guess javascript would be needed for event handling .
I need a code which would display the value in the textbox area.
I mean, when the user clicks a butoon , a popup calendar pops-up and sends the value to the textbox. The background and foreground color of the pop-calender should be able tochange
I have tried many samples, but at the end i get the error ..something is not an object.
Thanks
I need a pop up calender code in html, but i guess javascript would be needed for event handling .
I need a code which would display the value in the textbox area.
I mean, when the user clicks a butoon , a popup calendar pops-up and sends the value to the textbox. The background and foreground color of the pop-calender should be able tochange
I have tried many samples, but at the end i get the error ..something is not an object.
Thanks
ASKER
Hi,
Actually, when i was looking for the calender, i did find this one .It's your code.
/************************* ********** *********/
<html>
<head>
<title>Date Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--Calendar Scripts -->
<script language="javascript" src="/scripts/cal2.js"></s cript>
<script language="javascript" src="/scripts/cal_conf2.js "></script >
<!--End Calendar Scripts-->
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<table width="21%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="83%">
<div align="center">Date</div>
</td>
<td width="17%">
<div align="center"></div>
</td>
</tr>
<tr>
<td width="83%">
<div align="center">
<input type="text" name="timestamp">
</div>
</td>
<td width="17%">
<div align="center"> <a href="javascript:showCal(' Calendar1' )"><img src="/images/cal.gif" width="16" height="16" border="0" alt="Click here and select your date"></a></div>
</td>
</tr>
</table>
</form>
<p> </p>
</body>
</html>
/************************* ********** ********/
cal_conf2.js
//Define calendar(s): addCalendar ("Unique Calendar Name", "Window title", "Form element's name", Form name")
addCalendar("Calendar1", "Select Date", "timestamp", "form1");
addCalendar("Calendar2", "Select Date", "divTimeStamp", "form2");
// default settings for English
setFont("verdana", 9);
setWidth(90, 1, 15, 1);
setColor("#cccccc", "#cccccc", "#ffffff", "#ffffff", "#333333", "#cccccc", "#333333");
setFontColor("#333333", "#333333", "#333333", "#ffffff", "#333333");
setFormat("mm/dd/yyyy"); //Change the format as you wish
setSize(200, 200, -200, 16);
setWeekDay(0);
setMonthNames("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
setDayNames("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
setLinkNames("[Close]", "[Clear]");
/************************* ********** ********** /
cal2.js
var fontFace="verdana";
var fontSize=9;
var titleWidth=90;
var titleMode=1;
var dayWidth=12;
var dayDigits=1;
var titleColor="#cccccc";
var daysColor="#cccccc";
var bodyColor="##3300CC";
var dayColor="#ffffff";
var currentDayColor="#333333";
var footColor="#cccccc";
var borderColor="#333333";
var titleFontColor = "#333333";
var daysFontColor = "#333333";
var dayFontColor = "#333333";
var currentDayFontColor = "#ffffff";
var footFontColor = "#333333";
var calFormat = "mm/dd/yyyy";
var weekDay = 0;
// ------
// codes
var calWidth=200, calHeight=200, calOffsetX=-200, calOffsetY=16;
var calWin=null;
var winX=0, winY=0;
var cal="cal";
var cals=new Array();
var currentCal=null;
var yxMonths=new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var yxDays=new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday");
var yxLinks=new Array("[close]", "[clear]");
var isOpera=(navigator.userAge nt.indexOf ("Opera")! =-1)?true: false;
var isOpera5=(navigator.appVer sion.index Of("MSIE 5")!=-1 && navigator.userAgent.indexO f("Opera 5")!=-1)?true:false;
var isOpera6=(navigator.appVer sion.index Of("MSIE 5")!=-1 && navigator.userAgent.indexO f("Opera 6")!=-1)?true:false;
var isN6=(navigator.userAgent. indexOf("G ecko")!=-1 );
var isN4=(document.layers)?tru e:false;
var isMac=(navigator.userAgent .indexOf(" Mac")!=-1) ;
var isIE=(document.all && !isOpera && (!isMac || navigator.appVersion.index Of("MSIE 4")==-1))?true:false;
if (isN4) {
fontSize+=2;
}
var span2="</span>";
function span1(tag) {
return "<span class='"+tag+"'>";
}
function spanx(tag, color) {
return "."+tag+" { font-family:"+fontFace+"; font-size:"+fontSize+"px; color:"+color+"; }\n";
}
function a1(tag) {
return "<a class='"+tag+"' href=";
}
function ax(tag, color) {
return "."+tag+" { text-decoration:none; color:"+color+"; }\n";
}
function calOBJ(name, title, field, form) {
this.name = name;
this.title = title;
this.field = field;
this.formName = form;
this.form = null
}
function setFont(font, size) {
if (font != "") {
fontFace=font;
}
if (size > 0) {
fontSize=size;
if (isN4) {
fontSize+=2;
}
}
}
function setWidth(tWidth, tMode, dWidth, dDigits) {
if (tWidth > 0) {
titleWidth=tWidth;
}
if (tMode == 1 || tMode == 2) {
titleMode=tMode;
}
if (dWidth > 0) {
dayWidth=dWidth;
}
if (dDigits > 0) {
dayDigits=dDigits;
}
}
function setColor(tColor, dsColor, bColor, dColor, cdColor, fColor, bdColor) {
if (tColor != "") {
titleColor=tColor;
}
if (dsColor != "") {
daysColor=dsColor;
}
if (bColor != "") {
bodyColor=bColor;
}
if (dColor != "") {
dayColor=dColor;
}
if (cdColor != "") {
currentDayColor=cdColor;
}
if (fColor != "") {
footColor=fColor;
}
if (bdColor != "") {
borderColor=bdColor;
}
}
function setFontColor(tColorFont, dsColorFont, dColorFont, cdColorFont, fColorFont) {
if (tColorFont != "") {
titleFontColor=tColorFont;
}
if (dsColorFont != "") {
daysFontColor=dsColorFont;
}
if (dColorFont != "") {
dayFontColor=dColorFont;
}
if (cdColorFont != "") {
currentDayFontColor=cdColo rFont;
}
if (fColorFont != "") {
footFontColor=fColorFont;
}
}
function setFormat(format) {
calFormat = format;
}
function setSize(width, height, ox, oy) {
if (width > 0) {
calWidth=width;
}
if (height > 0) {
calHeight=height;
}
calOffsetX=ox;
calOffsetY=oy;
}
function setWeekDay(wDay) {
if (wDay == 0 || wDay == 1) {
weekDay = wDay;
}
}
function setMonthNames(janName, febName, marName, aprName, mayName, junName, julName, augName, sepName, octName, novName, decName) {
if (janName != "") {
yxMonths[0] = janName;
}
if (febName != "") {
yxMonths[1] = febName;
}
if (marName != "") {
yxMonths[2] = marName;
}
if (aprName != "") {
yxMonths[3] = aprName;
}
if (mayName != "") {
yxMonths[4] = mayName;
}
if (junName != "") {
yxMonths[5] = junName;
}
if (julName != "") {
yxMonths[6] = julName;
}
if (augName != "") {
yxMonths[7] = augName;
}
if (sepName != "") {
yxMonths[8] = sepName;
}
if (octName != "") {
yxMonths[9] = octName;
}
if (novName != "") {
yxMonths[10] = novName;
}
if (decName != "") {
yxMonths[11] = decName;
}
}
function setDayNames(sunName, monName, tueName, wedName, thuName, friName, satName) {
if (sunName != "") {
yxDays[0] = sunName;
yxDays[7] = sunName;
}
if (monName != "") {
yxDays[1] = monName;
}
if (tueName != "") {
yxDays[2] = tueName;
}
if (wedName != "") {
yxDays[3] = wedName;
}
if (thuName != "") {
yxDays[4] = thuName;
}
if (friName != "") {
yxDays[5] = friName;
}
if (satName != "") {
yxDays[6] = satName;
}
}
function setLinkNames(closeLink, clearLink) {
if (closeLink != "") {
yxLinks[0] = closeLink;
}
if (clearLink != "") {
yxLinks[1] = clearLink;
}
}
function addCalendar(name, title, field, form) {
cals[cals.length] = new calOBJ(name, title, field, form);
}
function findCalendar(name) {
for (var i = 0; i < cals.length; i++) {
if (cals[i].name == name) {
if (cals[i].form == null) {
if (cals[i].formName == "") {
if (document.forms[0]) {
cals[i].form = document.forms[0];
}
}
else if (document.forms[cals[i].fo rmName]) {
cals[i].form = document.forms[cals[i].for mName];
}
}
return cals[i];
}
}
return null;
}
function getDayName(y,m,d) {
var wd=new Date(y,m,d);
return yxDays[wd.getDay()].substr ing(0,3);
}
function getMonthFromName(m3) {
for (var i = 0; i < yxMonths.length; i++) {
if (yxMonths[i].toLowerCase() .substring (0,3) == m3.toLowerCase()) {
return i;
}
}
return 0;
}
function getFormat() {
var calF = calFormat;
calF = calF.replace(/\\/g, '\\\\');
calF = calF.replace(/\//g, '\\\/');
calF = calF.replace(/\[/g, '\\\[');
calF = calF.replace(/\]/g, '\\\]');
calF = calF.replace(/\(/g, '\\\(');
calF = calF.replace(/\)/g, '\\\)');
calF = calF.replace(/\{/g, '\\\{');
calF = calF.replace(/\}/g, '\\\}');
calF = calF.replace(/\</g, '\\\<');
calF = calF.replace(/\>/g, '\\\>');
calF = calF.replace(/\|/g, '\\\|');
calF = calF.replace(/\*/g, '\\\*');
calF = calF.replace(/\?/g, '\\\?');
calF = calF.replace(/\+/g, '\\\+');
calF = calF.replace(/\^/g, '\\\^');
calF = calF.replace(/\$/g, '\\\$');
calF = calF.replace(/dd/i, '\\d\\d');
calF = calF.replace(/mm/i, '\\d\\d');
calF = calF.replace(/yyyy/i, '\\d\\d\\d\\d');
calF = calF.replace(/day/i, '\\w\\w\\w');
calF = calF.replace(/mon/i, '\\w\\w\\w');
return new RegExp(calF);
}
function getDateNumbers(date) {
var y, m, d;
var yIdx = calFormat.search(/yyyy/i);
var mIdx = calFormat.search(/mm/i);
var m3Idx = calFormat.search(/mon/i);
var dIdx = calFormat.search(/dd/i);
y=date.substring(yIdx,yIdx +4)-0;
if (mIdx != -1) {
m=date.substring(mIdx,mIdx +2)-1;
}
else {
var m = getMonthFromName(date.subs tring(m3Id x,m3Idx+3) );
}
d=date.substring(dIdx,dIdx +2)-0;
return new Array(y,m,d);
}
function hideCal() {
calWin.close();
calWin = null;
window.status = "";
}
function getLeftIE(x,m) {
var dx=0;
if (x.tagName=="TD"){
dx=x.offsetLeft;
}
else if (x.tagName=="TABLE") {
dx=x.offsetLeft;
if (m) { dx+=(x.cellPadding!=""?par seInt(x.ce llPadding) :2); m=false; }
}
return dx+(x.parentElement.tagNam e=="BODY"? 0:getLeftI E(x.parent Element,m) );
}
function getTopIE(x,m) {
var dy=0;
if (x.tagName=="TR"){
dy=x.offsetTop;
}
else if (x.tagName=="TABLE") {
dy=x.offsetTop;
if (m) { dy+=(x.cellPadding!=""?par seInt(x.ce llPadding) :2); m=false; }
}
return dy+(x.parentElement.tagNam e=="BODY"? 0:getTopIE (x.parentE lement,m)) ;
}
function getLeftN4(l) { return l.pageX; }
function getTopN4(l) { return l.pageY; }
function getLeftN6(l) { return l.offsetLeft; }
function getTopN6(l) { return l.offsetTop; }
function lastDay(d) {
var yy=d.getFullYear(), mm=d.getMonth();
for (var i=31; i>=28; i--) {
var nd=new Date(yy,mm,i);
if (mm == nd.getMonth()) {
return i;
}
}
}
function firstDay(d) {
var yy=d.getFullYear(), mm=d.getMonth();
var fd=new Date(yy,mm,1);
return fd.getDay();
}
function dayDisplay(i) {
if (dayDigits == 0) {
return yxDays[i];
}
else {
return yxDays[i].substring(0,dayD igits);
}
}
function calTitle(d) {
var yy=d.getFullYear(), mm=yxMonths[d.getMonth()];
var s;
if (titleMode == 2) {
s="<tr align='center' bgcolor='"+titleColor+"'>< td colspan='7'>\n<table cellpadding='0' cellspacing='0' border='0'><tr align='center' valign='middle'><td align='right'>"+span1("tit le")+"<b>" +a1("title a")+"'java script:if( window.ope ner && !window.opener.closed && window.opener.moveYear) window.opener.moveYear(-10 )'> & #171;</a>& nbsp;"+a1( "titlea")+ "'javascri pt:if(wind ow.opener && !window.opener.closed && window.opener.moveYear) window.opener.moveYear(-1) '>‹&n bsp;</a></ b>"+span2+ "</td><td width='"+titleWidth+"'><b> "+span1("t itle")+yy+ span2+"</b ></td><td align='left'>"+span1("titl e")+"<b>"+ a1("titlea ")+"'javas cript:if (window.opener && !window.opener.closed && window.opener.moveYear) window.opener.moveYear(1)' >  55;</a>&nb sp;"+a1("t itlea")+"' javascript :if (window.opener && !window.opener.closed && window.opener.moveYear) window.opener.moveYear(10) '>»&n bsp;</a></ b>"+span2+ "</td></tr ><tr align='center' valign='middle'><td align='right'>"+span1("tit le")+"<b>" +a1("title a")+"'java script:if (window.opener && !window.opener.closed && window.opener.prepMonth) window.opener.prepMonth("+ d.getMonth ()+")'>&nb sp;‹& nbsp;</a>< /b>"+span2 +"</td><td width='"+titleWidth+"'><b> "+span1("t itle")+mm+ span2+"</b ></td><td align='left'>"+span1("titl e")+"<b>"+ a1("titlea ")+"'javas cript:if (window.opener && !window.opener.closed && window.opener.nextMonth) window.opener.nextMonth("+ d.getMonth ()+")'>&nb sp;›& nbsp;</a>< /b>"+span2 +"</td></t r></table> \n</td></t r><tr align='center' bgcolor='"+daysColor+"'>";
}
else {
s="<tr align='center' bgcolor='"+titleColor+"'>< td colspan='7'>\n<table cellpadding='0' cellspacing='0' border='0'><tr align='center' valign='middle'><td>"+span 1("title") +"<b>"+a1( "titlea")+ "'javascri pt:if(wind ow.opener && !window.opener.closed && window.opener.moveYear) window.opener.moveYear(-1) '> &# 171;</a>&n bsp;"+a1(" titlea")+" 'javascrip t:if (window.opener && !window.opener.closed && window.opener.prepMonth) window.opener.prepMonth("+ d.getMonth ()+")'> 39; < /a></b>"+s pan2+"</td ><td width='"+titleWidth+"'><no br><b>"+sp an1("title ")+mm+" "+yy+span2+"</b></nobr></t d><td>"+sp an1("title ")+"<b>"+a 1("titlea" )+"'javasc ript:if (window.opener && !window.opener.closed && window.opener.nextMonth) window.opener.nextMonth("+ d.getMonth ()+")'>&nb sp;›< /a> " +a1("title a")+"'java script:if( window.ope ner && !window.opener.closed && window.opener.moveYear) window.opener.moveYear(1)' >»&nb sp;</a></b >"+span2+" </td></tr> </table>\n </td></tr> <tr align='center' bgcolor='"+daysColor+"'>";
}
for (var i=weekDay; i<weekDay+7; i++) {
s+="<td width='"+dayWidth+"'>"+spa n1("days") +dayDispla y(i)+span2 +"</td>";
}
s+="</tr>";
return s;
}
function calHeader() {
return "<head>\n<title>"+currentC al.title+" </title>\n <style type='text/css'>\n"+spanx( "title",ti tleFontCol or)+spanx( "days",day sFontColor )+spanx("f oot",footC olor)+span x("day",da yFontColor )+spanx("c urrentDay" ,currentDa yFontColor )+ax("titl ea",titleF ontColor)+ ax("daya", dayFontCol or)+ax("cu rrenta",cu rrentDayFo ntColor)+a x("foota", footFontCo lor)+"</st yle>\n</he ad>\n<body >\n<table align='center' border='0' bgcolor='"+borderColor+"' cellspacing='0' cellpadding='1'><tr><td>\n <table cellspacing='1' cellpadding='3' border='0'>";
}
function calFooter() {
return "<tr bgcolor='"+footColor+"'><t d colspan='7' align='center'>"+span1("fo ot")+"<b>" +a1("foota ")+"'javas cript:if (window.opener && !window.opener.closed && window.opener.hideCal) window.opener.hideCal()'>" +yxLinks[0 ]+"</a>&nb sp; " +a1("foota ")+"'javas cript:if (window.opener && !window.opener.closed && window.opener.clearDate) window.opener.clearDate()' >"+yxLinks [1]+"</a>< /b>"+span2 +"</td></t r></table> \n</td></t r></table> \n</body>" ;
}
function calBody(d,day) {
var s="", dayCount=1, fd=firstDay(d), ld=lastDay(d);
if (weekDay > 0 && fd == 0) {
fd = 7;
}
for (var i=0; i<6; i++) {
s+="<tr align='center' bgcolor='"+bodyColor+"'>";
for (var j=weekDay; j<weekDay+7; j++) {
if (i*7+j<fd || dayCount>ld) {
s+="<td>"+span1("day")+"&n bsp;"+span 2+"</td>";
}
else {
var bgColor=dayColor;
var fgTag="day";
var fgTagA="daya";
if (dayCount==day) {
bgColor=currentDayColor;
fgTag="currentDay";
fgTagA="currenta";
}
s+="<td bgcolor='"+bgColor+"'>"+sp an1(fgTag) +a1(fgTagA )+"'javasc ript: if (window.opener && !window.opener.closed && window.opener.pickDate) window.opener.pickDate("+d ayCount+") '>"+(dayCo unt++)+"</ a>"+span2+ "</td>";
}
}
s+="</tr>";
}
return s;
}
function moveYear(dy) {
cY+=dy;
var nd=new Date(cY,cM,1);
changeCal(nd);
}
function prepMonth(m) {
cM=m-1;
if (cM<0) { cM=11; cY--; }
var nd=new Date(cY,cM,1);
changeCal(nd);
}
function nextMonth(m) {
cM=m+1;
if (cM>11) { cM=0; cY++;}
var nd=new Date(cY,cM,1);
changeCal(nd);
}
function changeCal(d) {
var dd = 0;
if (currentCal != null) {
var calRE = getFormat();
if (currentCal.form[currentCa l.field].v alue!="" && calRE.test(currentCal.form [currentCa l.field].v alue)) {
var cd = getDateNumbers(currentCal. form[curre ntCal.fiel d].value);
if (cd[0] == d.getFullYear() && cd[1] == d.getMonth()) {
dd=cd[2];
}
}
else {
var cd = new Date();
if (cd.getFullYear() == d.getFullYear() && cd.getMonth() == d.getMonth()) {
dd=cd.getDate();
}
}
}
var calendar=calHeader()+calTi tle(d)+cal Body(d,dd) +calFooter ();
calWin.document.open();
calWin.document.write(cale ndar);
calWin.document.close();
}
function markClick(e) {
if (isIE || isOpera6) {
winX=event.screenX;
winY=event.screenY;
}
else if (isN4 || isN6) {
winX=e.screenX;
winY=e.screenY;
document.routeEvent(e);
}
return true;
}
function showCal(name) {
var lastCal=currentCal;
var d=new Date(), hasCal=false;
currentCal = findCalendar(name);
if (currentCal != null && currentCal.form != null && currentCal.form[currentCal .field]) {
var calRE = getFormat();
if (currentCal.form[currentCa l.field].v alue!="" && calRE.test(currentCal.form [currentCa l.field].v alue)) {
var cd = getDateNumbers(currentCal. form[curre ntCal.fiel d].value);
d=new Date(cd[0],cd[1],cd[2]);
cY=cd[0];
cM=cd[1];
dd=cd[2];
}
else {
cY=d.getFullYear();
cM=d.getMonth();
dd=d.getDate();
}
var calendar=calHeader()+calTi tle(d)+cal Body(d,dd) +calFooter ();
if (calWin != null && !calWin.closed) {
hasCal=true;
calWin.moveTo(winX+calOffs etX,winY+c alOffsetY) ;
}
if (!hasCal) {
if (isIE || isOpera6) {
calWin=window.open("","cal ","toolbar =0,width=" +calWidth+ ",height=" +calHeight +",left="+ (winX+calO ffsetX)+", top="+(win Y+calOffse tY));
}
else {
calWin=window.open("","cal ","toolbar =0,width=" +calWidth+ ",height=" +calHeight +",screenx ="+(winX+c alOffsetX) +",screeny ="+(winY+c alOffsetY) );
}
}
calWin.document.open();
calWin.document.write(cale ndar);
calWin.document.close();
calWin.focus();
}
else {
if (currentCal == null) {
window.status = "Calendar ["+name+"] not found.";
}
else if (!currentCal.form) {
window.status = "Form ["+currentCal.formName+"] not found.";
}
else if (!currentCal.form[currentC al.field]) {
window.status = "Form Field ["+currentCal.formName+"." +currentCa l.field+"] not found.";
}
if (lastCal != null) {
currentCal = lastCal;
}
}
}
function get2Digits(n) {
return ((n<10)?"0":"")+n;
}
function clearDate() {
currentCal.form[currentCal .field].va lue="";
hideCal();
}
function pickDate(d) {
hideCal();
window.focus();
var date=calFormat;
date = date.replace(/yyyy/i, cY);
date = date.replace(/mm/i, get2Digits(cM+1));
date = date.replace(/MON/, yxMonths[cM].substring(0,3 ).toUpperC ase());
date = date.replace(/Mon/i, yxMonths[cM].substring(0,3 ));
date = date.replace(/dd/i, get2Digits(d));
date = date.replace(/DAY/, getDayName(cY,cM,d).toUppe rCase());
date = date.replace(/day/i, getDayName(cY,cM,d));
currentCal.form[currentCal .field].va lue=date;
// IE5/Mac needs focus to show the value, weird.
currentCal.form[currentCal .field].fo cus();
}
// ------
// user functions
function checkDate(name) {
var thisCal = findCalendar(name);
if (thisCal != null && thisCal.form != null && thisCal.form[thisCal.field ]) {
var calRE = getFormat();
if (calRE.test(thisCal.form[t hisCal.fie ld].value) ) {
return 0;
}
else {
return 1;
}
}
else {
return 2;
}
}
function getCurrentDate() {
var date=calFormat, d = new Date();
date = date.replace(/yyyy/i, d.getFullYear());
date = date.replace(/mm/i, get2Digits(d.getMonth()+1) );
date = date.replace(/dd/i, get2Digits(d.getDate()));
return date;
}
function compareDates(date1, date2) {
var calRE = getFormat();
var d1, d2;
if (calRE.test(date1)) {
d1 = getNumbers(date1);
}
else {
d1 = getNumbers(getCurrentDate( ));
}
if (calRE.test(date2)) {
d2 = getNumbers(date2);
}
else {
d2 = getNumbers(getCurrentDate( ));
}
var dStr1 = d1[0] + "" + d1[1] + "" + d1[2];
var dStr2 = d2[0] + "" + d2[1] + "" + d2[2];
if (dStr1 == dStr2) {
return 0;
}
else if (dStr1 > dStr2) {
return 1;
}
else {
return -1;
}
}
function getNumbers(date) {
var calRE = getFormat();
var y, m, d;
if (calRE.test(date)) {
var yIdx = calFormat.search(/yyyy/i);
var mIdx = calFormat.search(/mm/i);
var m3Idx = calFormat.search(/mon/i);
var dIdx = calFormat.search(/dd/i);
y=date.substring(yIdx,yIdx +4);
if (mIdx != -1) {
m=date.substring(mIdx,mIdx +2);
}
else {
var mm=getMonthFromName(date.s ubstring(m 3Idx,m3Idx +3))+1;
m=(mm<10)?("0"+mm):(""+mm) ;
}
d=date.substring(dIdx,dIdx +2);
return new Array(y,m,d);
}
else {
return new Array("", "", "");
}
}
// ------
if (isN4 || isN6) {
document.captureEvents(Eve nt.CLICK);
}
document.onclick=markClick ;
When i tried running it i got this error:
Line:0
Error :Object expected.
But when i tried running it at your url,it works fine.
Maybe , when i copied and paste , i might have done a mistake or i might have not save the right way.
could i pls have the source code and pls tell me how do you save it and run it
Thanks
Actually, when i was looking for the calender, i did find this one .It's your code.
/*************************
<html>
<head>
<title>Date Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!--Calendar Scripts -->
<script language="javascript" src="/scripts/cal2.js"></s
<script language="javascript" src="/scripts/cal_conf2.js
<!--End Calendar Scripts-->
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<table width="21%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="83%">
<div align="center">Date</div>
</td>
<td width="17%">
<div align="center"></div>
</td>
</tr>
<tr>
<td width="83%">
<div align="center">
<input type="text" name="timestamp">
</div>
</td>
<td width="17%">
<div align="center"> <a href="javascript:showCal('
</td>
</tr>
</table>
</form>
<p> </p>
</body>
</html>
/*************************
cal_conf2.js
//Define calendar(s): addCalendar ("Unique Calendar Name", "Window title", "Form element's name", Form name")
addCalendar("Calendar1", "Select Date", "timestamp", "form1");
addCalendar("Calendar2", "Select Date", "divTimeStamp", "form2");
// default settings for English
setFont("verdana", 9);
setWidth(90, 1, 15, 1);
setColor("#cccccc", "#cccccc", "#ffffff", "#ffffff", "#333333", "#cccccc", "#333333");
setFontColor("#333333", "#333333", "#333333", "#ffffff", "#333333");
setFormat("mm/dd/yyyy"); //Change the format as you wish
setSize(200, 200, -200, 16);
setWeekDay(0);
setMonthNames("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
setDayNames("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
setLinkNames("[Close]", "[Clear]");
/*************************
cal2.js
var fontFace="verdana";
var fontSize=9;
var titleWidth=90;
var titleMode=1;
var dayWidth=12;
var dayDigits=1;
var titleColor="#cccccc";
var daysColor="#cccccc";
var bodyColor="##3300CC";
var dayColor="#ffffff";
var currentDayColor="#333333";
var footColor="#cccccc";
var borderColor="#333333";
var titleFontColor = "#333333";
var daysFontColor = "#333333";
var dayFontColor = "#333333";
var currentDayFontColor = "#ffffff";
var footFontColor = "#333333";
var calFormat = "mm/dd/yyyy";
var weekDay = 0;
// ------
// codes
var calWidth=200, calHeight=200, calOffsetX=-200, calOffsetY=16;
var calWin=null;
var winX=0, winY=0;
var cal="cal";
var cals=new Array();
var currentCal=null;
var yxMonths=new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var yxDays=new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday");
var yxLinks=new Array("[close]", "[clear]");
var isOpera=(navigator.userAge
var isOpera5=(navigator.appVer
var isOpera6=(navigator.appVer
var isN6=(navigator.userAgent.
var isN4=(document.layers)?tru
var isMac=(navigator.userAgent
var isIE=(document.all && !isOpera && (!isMac || navigator.appVersion.index
if (isN4) {
fontSize+=2;
}
var span2="</span>";
function span1(tag) {
return "<span class='"+tag+"'>";
}
function spanx(tag, color) {
return "."+tag+" { font-family:"+fontFace+"; font-size:"+fontSize+"px; color:"+color+"; }\n";
}
function a1(tag) {
return "<a class='"+tag+"' href=";
}
function ax(tag, color) {
return "."+tag+" { text-decoration:none; color:"+color+"; }\n";
}
function calOBJ(name, title, field, form) {
this.name = name;
this.title = title;
this.field = field;
this.formName = form;
this.form = null
}
function setFont(font, size) {
if (font != "") {
fontFace=font;
}
if (size > 0) {
fontSize=size;
if (isN4) {
fontSize+=2;
}
}
}
function setWidth(tWidth, tMode, dWidth, dDigits) {
if (tWidth > 0) {
titleWidth=tWidth;
}
if (tMode == 1 || tMode == 2) {
titleMode=tMode;
}
if (dWidth > 0) {
dayWidth=dWidth;
}
if (dDigits > 0) {
dayDigits=dDigits;
}
}
function setColor(tColor, dsColor, bColor, dColor, cdColor, fColor, bdColor) {
if (tColor != "") {
titleColor=tColor;
}
if (dsColor != "") {
daysColor=dsColor;
}
if (bColor != "") {
bodyColor=bColor;
}
if (dColor != "") {
dayColor=dColor;
}
if (cdColor != "") {
currentDayColor=cdColor;
}
if (fColor != "") {
footColor=fColor;
}
if (bdColor != "") {
borderColor=bdColor;
}
}
function setFontColor(tColorFont, dsColorFont, dColorFont, cdColorFont, fColorFont) {
if (tColorFont != "") {
titleFontColor=tColorFont;
}
if (dsColorFont != "") {
daysFontColor=dsColorFont;
}
if (dColorFont != "") {
dayFontColor=dColorFont;
}
if (cdColorFont != "") {
currentDayFontColor=cdColo
}
if (fColorFont != "") {
footFontColor=fColorFont;
}
}
function setFormat(format) {
calFormat = format;
}
function setSize(width, height, ox, oy) {
if (width > 0) {
calWidth=width;
}
if (height > 0) {
calHeight=height;
}
calOffsetX=ox;
calOffsetY=oy;
}
function setWeekDay(wDay) {
if (wDay == 0 || wDay == 1) {
weekDay = wDay;
}
}
function setMonthNames(janName, febName, marName, aprName, mayName, junName, julName, augName, sepName, octName, novName, decName) {
if (janName != "") {
yxMonths[0] = janName;
}
if (febName != "") {
yxMonths[1] = febName;
}
if (marName != "") {
yxMonths[2] = marName;
}
if (aprName != "") {
yxMonths[3] = aprName;
}
if (mayName != "") {
yxMonths[4] = mayName;
}
if (junName != "") {
yxMonths[5] = junName;
}
if (julName != "") {
yxMonths[6] = julName;
}
if (augName != "") {
yxMonths[7] = augName;
}
if (sepName != "") {
yxMonths[8] = sepName;
}
if (octName != "") {
yxMonths[9] = octName;
}
if (novName != "") {
yxMonths[10] = novName;
}
if (decName != "") {
yxMonths[11] = decName;
}
}
function setDayNames(sunName, monName, tueName, wedName, thuName, friName, satName) {
if (sunName != "") {
yxDays[0] = sunName;
yxDays[7] = sunName;
}
if (monName != "") {
yxDays[1] = monName;
}
if (tueName != "") {
yxDays[2] = tueName;
}
if (wedName != "") {
yxDays[3] = wedName;
}
if (thuName != "") {
yxDays[4] = thuName;
}
if (friName != "") {
yxDays[5] = friName;
}
if (satName != "") {
yxDays[6] = satName;
}
}
function setLinkNames(closeLink, clearLink) {
if (closeLink != "") {
yxLinks[0] = closeLink;
}
if (clearLink != "") {
yxLinks[1] = clearLink;
}
}
function addCalendar(name, title, field, form) {
cals[cals.length] = new calOBJ(name, title, field, form);
}
function findCalendar(name) {
for (var i = 0; i < cals.length; i++) {
if (cals[i].name == name) {
if (cals[i].form == null) {
if (cals[i].formName == "") {
if (document.forms[0]) {
cals[i].form = document.forms[0];
}
}
else if (document.forms[cals[i].fo
cals[i].form = document.forms[cals[i].for
}
}
return cals[i];
}
}
return null;
}
function getDayName(y,m,d) {
var wd=new Date(y,m,d);
return yxDays[wd.getDay()].substr
}
function getMonthFromName(m3) {
for (var i = 0; i < yxMonths.length; i++) {
if (yxMonths[i].toLowerCase()
return i;
}
}
return 0;
}
function getFormat() {
var calF = calFormat;
calF = calF.replace(/\\/g, '\\\\');
calF = calF.replace(/\//g, '\\\/');
calF = calF.replace(/\[/g, '\\\[');
calF = calF.replace(/\]/g, '\\\]');
calF = calF.replace(/\(/g, '\\\(');
calF = calF.replace(/\)/g, '\\\)');
calF = calF.replace(/\{/g, '\\\{');
calF = calF.replace(/\}/g, '\\\}');
calF = calF.replace(/\</g, '\\\<');
calF = calF.replace(/\>/g, '\\\>');
calF = calF.replace(/\|/g, '\\\|');
calF = calF.replace(/\*/g, '\\\*');
calF = calF.replace(/\?/g, '\\\?');
calF = calF.replace(/\+/g, '\\\+');
calF = calF.replace(/\^/g, '\\\^');
calF = calF.replace(/\$/g, '\\\$');
calF = calF.replace(/dd/i, '\\d\\d');
calF = calF.replace(/mm/i, '\\d\\d');
calF = calF.replace(/yyyy/i, '\\d\\d\\d\\d');
calF = calF.replace(/day/i, '\\w\\w\\w');
calF = calF.replace(/mon/i, '\\w\\w\\w');
return new RegExp(calF);
}
function getDateNumbers(date) {
var y, m, d;
var yIdx = calFormat.search(/yyyy/i);
var mIdx = calFormat.search(/mm/i);
var m3Idx = calFormat.search(/mon/i);
var dIdx = calFormat.search(/dd/i);
y=date.substring(yIdx,yIdx
if (mIdx != -1) {
m=date.substring(mIdx,mIdx
}
else {
var m = getMonthFromName(date.subs
}
d=date.substring(dIdx,dIdx
return new Array(y,m,d);
}
function hideCal() {
calWin.close();
calWin = null;
window.status = "";
}
function getLeftIE(x,m) {
var dx=0;
if (x.tagName=="TD"){
dx=x.offsetLeft;
}
else if (x.tagName=="TABLE") {
dx=x.offsetLeft;
if (m) { dx+=(x.cellPadding!=""?par
}
return dx+(x.parentElement.tagNam
}
function getTopIE(x,m) {
var dy=0;
if (x.tagName=="TR"){
dy=x.offsetTop;
}
else if (x.tagName=="TABLE") {
dy=x.offsetTop;
if (m) { dy+=(x.cellPadding!=""?par
}
return dy+(x.parentElement.tagNam
}
function getLeftN4(l) { return l.pageX; }
function getTopN4(l) { return l.pageY; }
function getLeftN6(l) { return l.offsetLeft; }
function getTopN6(l) { return l.offsetTop; }
function lastDay(d) {
var yy=d.getFullYear(), mm=d.getMonth();
for (var i=31; i>=28; i--) {
var nd=new Date(yy,mm,i);
if (mm == nd.getMonth()) {
return i;
}
}
}
function firstDay(d) {
var yy=d.getFullYear(), mm=d.getMonth();
var fd=new Date(yy,mm,1);
return fd.getDay();
}
function dayDisplay(i) {
if (dayDigits == 0) {
return yxDays[i];
}
else {
return yxDays[i].substring(0,dayD
}
}
function calTitle(d) {
var yy=d.getFullYear(), mm=yxMonths[d.getMonth()];
var s;
if (titleMode == 2) {
s="<tr align='center' bgcolor='"+titleColor+"'><
}
else {
s="<tr align='center' bgcolor='"+titleColor+"'><
}
for (var i=weekDay; i<weekDay+7; i++) {
s+="<td width='"+dayWidth+"'>"+spa
}
s+="</tr>";
return s;
}
function calHeader() {
return "<head>\n<title>"+currentC
}
function calFooter() {
return "<tr bgcolor='"+footColor+"'><t
}
function calBody(d,day) {
var s="", dayCount=1, fd=firstDay(d), ld=lastDay(d);
if (weekDay > 0 && fd == 0) {
fd = 7;
}
for (var i=0; i<6; i++) {
s+="<tr align='center' bgcolor='"+bodyColor+"'>";
for (var j=weekDay; j<weekDay+7; j++) {
if (i*7+j<fd || dayCount>ld) {
s+="<td>"+span1("day")+"&n
}
else {
var bgColor=dayColor;
var fgTag="day";
var fgTagA="daya";
if (dayCount==day) {
bgColor=currentDayColor;
fgTag="currentDay";
fgTagA="currenta";
}
s+="<td bgcolor='"+bgColor+"'>"+sp
}
}
s+="</tr>";
}
return s;
}
function moveYear(dy) {
cY+=dy;
var nd=new Date(cY,cM,1);
changeCal(nd);
}
function prepMonth(m) {
cM=m-1;
if (cM<0) { cM=11; cY--; }
var nd=new Date(cY,cM,1);
changeCal(nd);
}
function nextMonth(m) {
cM=m+1;
if (cM>11) { cM=0; cY++;}
var nd=new Date(cY,cM,1);
changeCal(nd);
}
function changeCal(d) {
var dd = 0;
if (currentCal != null) {
var calRE = getFormat();
if (currentCal.form[currentCa
var cd = getDateNumbers(currentCal.
if (cd[0] == d.getFullYear() && cd[1] == d.getMonth()) {
dd=cd[2];
}
}
else {
var cd = new Date();
if (cd.getFullYear() == d.getFullYear() && cd.getMonth() == d.getMonth()) {
dd=cd.getDate();
}
}
}
var calendar=calHeader()+calTi
calWin.document.open();
calWin.document.write(cale
calWin.document.close();
}
function markClick(e) {
if (isIE || isOpera6) {
winX=event.screenX;
winY=event.screenY;
}
else if (isN4 || isN6) {
winX=e.screenX;
winY=e.screenY;
document.routeEvent(e);
}
return true;
}
function showCal(name) {
var lastCal=currentCal;
var d=new Date(), hasCal=false;
currentCal = findCalendar(name);
if (currentCal != null && currentCal.form != null && currentCal.form[currentCal
var calRE = getFormat();
if (currentCal.form[currentCa
var cd = getDateNumbers(currentCal.
d=new Date(cd[0],cd[1],cd[2]);
cY=cd[0];
cM=cd[1];
dd=cd[2];
}
else {
cY=d.getFullYear();
cM=d.getMonth();
dd=d.getDate();
}
var calendar=calHeader()+calTi
if (calWin != null && !calWin.closed) {
hasCal=true;
calWin.moveTo(winX+calOffs
}
if (!hasCal) {
if (isIE || isOpera6) {
calWin=window.open("","cal
}
else {
calWin=window.open("","cal
}
}
calWin.document.open();
calWin.document.write(cale
calWin.document.close();
calWin.focus();
}
else {
if (currentCal == null) {
window.status = "Calendar ["+name+"] not found.";
}
else if (!currentCal.form) {
window.status = "Form ["+currentCal.formName+"] not found.";
}
else if (!currentCal.form[currentC
window.status = "Form Field ["+currentCal.formName+"."
}
if (lastCal != null) {
currentCal = lastCal;
}
}
}
function get2Digits(n) {
return ((n<10)?"0":"")+n;
}
function clearDate() {
currentCal.form[currentCal
hideCal();
}
function pickDate(d) {
hideCal();
window.focus();
var date=calFormat;
date = date.replace(/yyyy/i, cY);
date = date.replace(/mm/i, get2Digits(cM+1));
date = date.replace(/MON/, yxMonths[cM].substring(0,3
date = date.replace(/Mon/i, yxMonths[cM].substring(0,3
date = date.replace(/dd/i, get2Digits(d));
date = date.replace(/DAY/, getDayName(cY,cM,d).toUppe
date = date.replace(/day/i, getDayName(cY,cM,d));
currentCal.form[currentCal
// IE5/Mac needs focus to show the value, weird.
currentCal.form[currentCal
}
// ------
// user functions
function checkDate(name) {
var thisCal = findCalendar(name);
if (thisCal != null && thisCal.form != null && thisCal.form[thisCal.field
var calRE = getFormat();
if (calRE.test(thisCal.form[t
return 0;
}
else {
return 1;
}
}
else {
return 2;
}
}
function getCurrentDate() {
var date=calFormat, d = new Date();
date = date.replace(/yyyy/i, d.getFullYear());
date = date.replace(/mm/i, get2Digits(d.getMonth()+1)
date = date.replace(/dd/i, get2Digits(d.getDate()));
return date;
}
function compareDates(date1, date2) {
var calRE = getFormat();
var d1, d2;
if (calRE.test(date1)) {
d1 = getNumbers(date1);
}
else {
d1 = getNumbers(getCurrentDate(
}
if (calRE.test(date2)) {
d2 = getNumbers(date2);
}
else {
d2 = getNumbers(getCurrentDate(
}
var dStr1 = d1[0] + "" + d1[1] + "" + d1[2];
var dStr2 = d2[0] + "" + d2[1] + "" + d2[2];
if (dStr1 == dStr2) {
return 0;
}
else if (dStr1 > dStr2) {
return 1;
}
else {
return -1;
}
}
function getNumbers(date) {
var calRE = getFormat();
var y, m, d;
if (calRE.test(date)) {
var yIdx = calFormat.search(/yyyy/i);
var mIdx = calFormat.search(/mm/i);
var m3Idx = calFormat.search(/mon/i);
var dIdx = calFormat.search(/dd/i);
y=date.substring(yIdx,yIdx
if (mIdx != -1) {
m=date.substring(mIdx,mIdx
}
else {
var mm=getMonthFromName(date.s
m=(mm<10)?("0"+mm):(""+mm)
}
d=date.substring(dIdx,dIdx
return new Array(y,m,d);
}
else {
return new Array("", "", "");
}
}
// ------
if (isN4 || isN6) {
document.captureEvents(Eve
}
document.onclick=markClick
When i tried running it i got this error:
Line:0
Error :Object expected.
But when i tried running it at your url,it works fine.
Maybe , when i copied and paste , i might have done a mistake or i might have not save the right way.
could i pls have the source code and pls tell me how do you save it and run it
Thanks
If you would like i can email you the files in .zip format
BTW
Make sure you copy the cal scripts to the right directory and that you reference them correctly
Make sure you copy the cal scripts to the right directory and that you reference them correctly
ASKER
Hi,
Would be grateful if you could send me the zip format.Have emailed you at the pclnet address.
Just to let you know what idid:
I safed the calendar.html,cal_conf2.js ,cal.js and the image in a folder called images.
When i click at the calendar.html file, and when i debug the error:
debugger stops at t:
showCal('Calendar1')
Thanks
Would be grateful if you could send me the zip format.Have emailed you at the pclnet address.
Just to let you know what idid:
I safed the calendar.html,cal_conf2.js
When i click at the calendar.html file, and when i debug the error:
debugger stops at t:
showCal('Calendar1')
Thanks
Have not received your email.
If you have AIM, my AIM id is in my profile, or post your email and i will zip them to ya
Once you get the files, we will walk thru it.
If you have AIM, my AIM id is in my profile, or post your email and i will zip them to ya
Once you get the files, we will walk thru it.
also i posted the zip file on the server, i dunno how fateback is about zip files, but here is the link, i tested it and i could download the zip
http://jaysolomon.fateback.com/zip.html
http://jaysolomon.fateback.com/zip.html
ASKER
Hi,
I do not have any AIM id. Thank you so much for being very very considerate for taking all the trouble for the zip file.
I have downloaded the zip file and i am further waiting for your instructions on how to do it
Thanks
I do not have any AIM id. Thank you so much for being very very considerate for taking all the trouble for the zip file.
I have downloaded the zip file and i am further waiting for your instructions on how to do it
Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you so much, i really needed that.
God bless you and thanks again
God bless you and thanks again
Glad i could help and thanks for the A
Good luck
Good luck
http://jaysolomon.fateback.com/cal_example.html