Tip: you can modify some code before running
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>Pop-up select date Effect (3)</title></head><body><script language="javascript">// Default settingsvar 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 = "# ffffff"; var dayColor = "# ffffff"; var currentDayColor = "#333333 "; var footColor = "# cccccc"; var borderColor = "#333333"; var titleFontColor = "#333333"; var daysFontColor = "#333333"; var dayFontColor = "#333333 "; var currentD AyFontColor = "# ffffff"; var footFontColor = "#333333"; var calFormat = "yyyy/mm/dd"; var weekDay = 0; // ------ // codesvar 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 ", "Maid", "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. userAgent. indexOf ("Opera ")! =-1 )? True: false; var isOpera5 = (navigator. appVersion. indexOf ("MSIE 5 ")! =-1 & navigator. userAgent. indexOf ("Opera 5 ")! =-1 )? True: false; var isOpera6 = (navigator. appVersion. indexOf ("MSIE 5 ")! =-1 & navigator. userAgent. indexOf ("Opera 6 ")! =-1 )? True: false; var isN6 = (navigator. userAgent. indexOf ("Gecko ")! =-1); var isN4 = (document. layers )? True: false; var isMac = (navigator. userAgent. indexOf ("Mac ")! =-1); var isIE = (document. all &&! IsOpera &&(! IsMac | navigator. appVersion. indexOf ("MSIE 4") =-1 ))? True: false; if (isN4) {fontSize + = 2;} var span2 = ""; function span1 (tag) {return "";} 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=cdColorFont; } 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].formName]) { cals[i].form = document.forms[cals[i].formName]; } } return cals[i]; } } return null;}function getDayName(y,m,d) { var wd=new Date(y,m,d); return yxDays[wd.getDay()].substring(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, 'dd'); calF = calF.replace(/mm/i, 'dd'); calF = calF.replace(/yyyy/i, 'dddd'); calF = calF.replace(/day/i, 'www'); calF = calF.replace(/mon/i, 'www'); 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.substring(m3Idx,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!=""?parseInt(x.cellPadding):2); m=false; } } return dx+(x.parentElement.tagName=="BODY"?0:getLeftIE(x.parentElement,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!=""?parseInt(x.cellPadding):2); m=false; } } return dy+(x.parentElement.tagName=="BODY"?0:getTopIE(x.parentElement,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,dayDigits); }}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 (" title ") +"<b>"+ A1 (" titlea ") +" 'javascript: if (window. opener &&! Window. opener. closed & window. opener. moveYear) window. opener. moveYear (-10) '> & laquo; "+ a1 (" titlea ") +" 'javascript: if (window. opener &&! Window. opener. closed & window. opener. moveYear) window. opener. moveYear (-1) '> interval ‹</b>"+ Span2 +"</td><td width='"+titleWidth+"'><b>"+ Span1 (" title ") + yy + span2 +"</b></td><td align='left'>"+ Span1 (" title ") +"<b>"+ A1 (" titlea ") +" 'javascript: if (window. opener &&! Window. opener. closed & window. opener. moveYear) window. opener. moveYear (1) '> › "+ a1 (" titlea ") +" 'javascript: if (window. opener &&! Window. opener. closed & window. opener. moveYear) window. opener. moveYear (10) '> & raquo;</b>"+ Span2 +"</td></tr><tr align='center' valign='middle'><td align='right'>"+ Span1 (" title ") +"<b>"+ A1 (" titlea ") +" 'javascript: if (window. opener &&! Window. opener. closed & window. opener. prepMonth) window. opener. prepMonth ("+ d. getMonth () +") '> interval ‹</b>"+ Span2 +"</td><td width='"+titleWidth+"'><b>"+ Span1 (" title ") + mm + span2 +"</b></td><td align='left'>"+ Span1 (" title ") +"<b>"+ A1 (" titlea ") +" 'javascript: if (window. opener &&! Window. opener. closed & window. opener. nextMonth) window. opener. nextMonth ("+ d. getMonth () +") '> ›</b>"+ Span2 +"</td></tr></table>N</td></tr><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>"+ Span1 (" title ") +"<b>"+ A1 (" titlea ") +" 'javascript: if (window. opener &&! Window. opener. closed & window. opener. moveYear) window. opener. moveYear (-1) '> & laquo; "+ a1 (" titlea ") +" 'javascript: if (window. opener &&! Window. opener. closed & window. opener. prepMonth) window. opener. prepMonth ("+ d. getMonth () +") '> interval ‹</b>"+ Span2 +"</td><td width='"+titleWidth+"'><nobr><b>"+ Span1 (" title ") + mm +" "+ yy + span2 +"</b></nobr></td><td>"+ Span1 (" title ") +"<b>"+ A1 (" titlea ") +" 'javascript: if (window. opener &&! Window. opener. closed & window. opener. nextMonth) window. opener. nextMonth ("+ d. getMonth () + ") '> ›" + a1 ("titlea") + "'javascript: if (window. opener &&! Window. opener. closed & window. opener. moveYear) window. opener. moveYear (1) '> & raquo;</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+"'>"+span1("days")+dayDisplay(i)+span2+"</td>"; } s+="</tr>"; return s;}function calHeader() { return "<head>n<title>"+currentCal.title+"</title>n<style type='text/css'>n"+spanx("title",titleFontColor)+spanx("days",daysFontColor)+spanx("foot",footColor)+spanx("day",dayFontColor)+spanx("currentDay",currentDayFontColor)+ax("titlea",titleFontColor)+ax("daya",dayFontColor)+ax("currenta",currentDayFontColor)+ax("foota",footFontColor)+"</style>n</head>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+"'><td colspan='7' align='center'>"+span1("foot")+"<b>"+a1("foota")+"'javascript:if (window.opener && !window.opener.closed && window.opener.hideCal) window.opener.hideCal()'>"+yxLinks[0]+" "+a1("foota")+"'javascript:if (window.opener && !window.opener.closed && window.opener.clearDate) window.opener.clearDate()'>"+yxLinks[1]+"</b>"+span2+"</td></tr></table>n</td></tr></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 ") +" "+ span2 +"</td>";}Else {var bgColor = dayColor; var fgTag =" day "; var fgTagA =" daya "; if (dayCount = day) {bgColor = currentDayColor; fgTag = "currentDay"; fgTagA = "currenta";} s + ="<td bgcolor='"+bgColor+"'>"+ Span1 (fgTag) + a1 (fgTagA) +" 'javascript: if (window. opener &&! Window. opener. closed & window. opener. pickDate) window. opener. pickDate ("+ dayCount +") '> "+ (dayCount ++) +" "+ 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 [currentCal. field]. value! = "" & CalRE. test (currentCal. form [currentCal. field]. value) {var cd = getDateNumbers (currentCal. form [currentCal. field]. 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 () + calTitle (d) + calBody (d, dd) + calFooter (); calWin.doc u Ment. open (); calWin.doc ument. write (calendar); calWin.doc ument. 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 [currentCal. field]. value! = "" & CalRE. test (currentCal. form [currentCal. field]. value) {var cd = getDateNumbers (currentCal. form [currentCal. field]. 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 () + calTitle (d) + calBody (d, dd) + calFooter (); if (calWin! = Null &&! CalWin. closed) {hasCal = true; calWin. moveTo (winX + calOffsetX, winY + calOffsetY);} if (! HasCal) {if (isIE | isOpera6) {calWin = window. open ("", "cal", "toolbar = 0, width =" + calWidth + ", height =" + calHeight + ", left =" + (winX + calOffsetX) + ", top =" + (winY + calOffsetY);} else {calWin = window. open ("", "cal", "toolbar = 0, width =" + calWidth + ", height =" + calHeight + ", screenx =" + (winX + calOffsetX) + ", screeny =" + (winY + calOffsetY) ;}} calWin.doc ument. open (); calWin.doc ument. write (calendar); calWin.doc ument. close (); c AlWin. 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 [currentCal. field]) {window. status = "Form Field [" + currentCal. formName + ". "+ currentCal. field + "] not found. ";} if (lastCal! = Null) {currentCal = lastCal ;}} function get2Digits (n) {return (n <10 )? "0": "") + n;} function clearDate () {currentCal. form [currentCal. field]. value = ""; 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 ). toUpperCase (); date = date. replace (/Mon/I, yxMonths [cM]. substring (0, 3); date = date. replace (/dd/I, get2Di Gits (d); date = date. replace (/DAY/, getDayName (cY, cM, d ). toUpperCase (); date = date. replace (/day/I, getDayName (cY, cM, d); currentCal. form [currentCal. field]. value = date; // IE5/Mac needs focus to show the value, weird. currentCal. form [currentCal. field]. focus ();} // ------ // user functionsfunction checkDate (name) {var thisCal = findCalendar (name); if (thisCal! = Null & thisCal. form! = Null & thisCal. form [thisCal. field]) {var calRE = getFormat (); if (calRE. test (thisCal. form [thisCal. field]. 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 dat E;} 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. substring (m3Idx, 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 (Event. CLICK);} document. onclick = markClick;</script><script language="javascript">// Define calendar (s): addCalendar ("Unique Calendar Name", "Window title", "Form element's name", Form name ") addCalendar (" Calendar1 ", "Select Date", "firstinput", "sampleform"); addCalendar ("Calendar2", "Select Date", "secondinput", "sampleform "); // default settings for English // Uncomment desired lines and modify its values // setFont ("verdana", 9); setWidth (90, 1, 15, 1 ); // setColor ("# cccccc", "# cccccc", "# ffffff", "# ffffff", "#333333", "# cccccc", "#333333 "); // setFontColor ("#333333", "#333333", "#333333", "# ffffff", "#333333 "); // setFormat ("yyyy/mm/dd"); // 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]");</script><form name="sampleform"><input type="text" name="firstinput" size=20> <small>Select date 1</small><p><input type="text" name="secondinput" size=20> <small>Select date 2</small></form></body></html>
Tip: you can modify some code before running
