Http://blog.csdn.net/hwctl/archive/2007/05/11/1604934.aspx
Method called: onclick= "getDate (this); return false;"
JS on the page
function GetDate (ctrlobj) {
SHOWX = event.screenx-event.offsetx-4-210; + DeltaX;
Showy = event.screeny-event.offsety + 18; + DeltaY;
Newwinwidth = 210 + 4 + 18;
retval = window.showModalDialog ("js/calendardlg.jsp", "", "DIALOGWIDTH:197PX; dialogheight:210px; Dialogleft: "+showx+" PX; Dialogtop: "+showy+" PX; Status:no; Directories:yes;scrollbars:no; Resizable=no; " );
if (retval! = null) {
Ctrlobj.value = retval;
}
}
Calendardlg.jsp content is as follows:
<%@ page contenttype= "text/html; CHARSET=GBK "%>
<HTML><HEAD>
<title>::::::: Date Selection::::::</title>
<meta http-equiv=content-type content= "text/html; CHARSET=GBK ">
<meta content= "MSHTML 6.00.2600.0" name=generator>
<script language=javascript src= "Showcal.js" ></SCRIPT>
</HEAD>
<body bgcolor= "#CFE9F8" onload= "Fload ()" >
<SCRIPT>
function Fload ()
{
Fpopcalendar (Document.all.txt1, DOCUMENT.ALL.TXT1);
}
function Fkeydown ()
{
if (event.keycode==27) {
Event.returnvalue = null;
Window.returnvalue = null;
Window.close ();
}
}
Document.onkeydown=fkeydown;
</SCRIPT>
<input id=txt1 style= "Display:none" type=button> </BODY></HTML>
Showcal.js Detailed content:
var Gdctrl = new Object ();
var goselecttag = new Array ();
var Gcgray = "#808080";
var gctoggle = "#ffffff";
var GCBG = "#000000";
var gridbg = "#CFE9F8";
var previousobject = null;
var gdcurdate = new Date ();
var giyear = Gdcurdate.getfullyear ();
var gimonth = Gdcurdate.getmonth () +1;
var giday = Gdcurdate.getdate ();
var gcalmode = "";
var gcaldefdate = "";
var Cal_mode_noblank = "2";
function Fsetdate (iyear, Imonth, Iday) {
VicPopCal.style.visibility = "hidden";
if (iyear = = 0) && (imonth = = 0) && (iday = = 0)) {
Gdctrl.value = "";
}else{
Imonth = imonth + 100 + "";
Imonth = imonth.substring (1);
Iday = iday + 100 + "";
Iday = iday.substring (1);
Gdctrl.value = iyear+ "-" +imonth+ "-" +iday;
}
For (i in Goselecttag)
goselecttag[i].style.visibility = "visible";
goselecttag.length = 0;
Window.returnvalue=gdctrl.value;
Window.close ();
}
function Hiddendiv ()
{
var i;
VicPopCal.style.visibility = "hidden";
For (i in Goselecttag)
goselecttag[i].style.visibility = "visible";
goselecttag.length = 0;
}
function fsetselected (Acell) {
var ioffset = 0;
var iyear = parseint (Tbselyear.value);
var imonth = parseint (Tbselmonth.value);
Acell.bgcolor = gridbg;
With (acell.children["Celltext"]) {
var iday = parseint (InnerText);
if (Color==gcgray)
Ioffset = (victor<10)? -1:1;
/*** below temp patch by Maxiang ***/
if (color = = Gcgray) {
Ioffset = (Iday < 15)? 1:-1;
}
/*** above temp patch by Maxiang ***/
Imonth + = Ioffset;
if (imonth<1) {
iyear--;
Imonth = 12;
}else if (imonth>12) {
iyear++;
Imonth = 1;
}
}
Fsetdate (Iyear, Imonth, iday);
}
function point (IX, IY) {
This.x = IX;
This.y = IY;
}
function fbuildcal (iyear, Imonth) {
var amonth=new Array ();
for (i=1;i<7;i++)
Amonth[i]=new Array (i);
var dcaldate=new Date (Iyear, iMonth-1, 1);
var idayoffirst=dcaldate.getday ();
var idaysinmonth=new Date (iyear, Imonth, 0). GetDate ();
var ioffsetlast=new Date (iyear, iMonth-1, 0). GetDate ()-idayoffirst+1;
var iDate = 1;
var iNext = 1;
for (d = 0; d < 7; d++)
Amonth[1][d] = (d<idayoffirst)?-(Ioffsetlast+d): idate++;
for (w = 2; w < 7; w++)
for (d = 0; d < 7; d++)
Amonth[w][d] = (idate<=idaysinmonth)? idate++:-(inext++);
return amonth;
}
function fdrawcal (iyear, Imonth, Icellheight, sdatetextsize) {
var WeekDay = new Array ("Day", "one", "two", "three", "four", "five", "six");
var styletd = "bordercolor= ' #ffffff ' valign= ' Middle ' align= ' center ' height= '" +icellheight+ "' style= ' font-size:12px; ";
With (document) {
Write ("<tr bgcolor= ' #D0DCE0 ' >");
for (i=0; i<7; i++)
Write ("<TD" +styletd+ "color: #000000 ' >" + weekday[i] + "</td>");
Write ("</tr>");
for (w = 1; w < 7; w++) {
Write ("<tr bgcolor= '" +gridbg+ ">");
for (d = 0; d < 7; d++) {
Write ("<td Id=calcell" +styletd+ "Cursor:hand; ' onmouseover= ' this.bgcolor=gctoggle ' onmouseout= ' this.bgColor= gridbg ' title= ' Click to Value ' onclick= ' fsetselected (this) ' > ');
Write ("<font id=celltext ><b> </b></font>");
Write ("</td>")
}
Write ("</tr>");
}
}
}
function fupdatecal (iyear, Imonth) {
Mymonth = fbuildcal (iyear, imonth);
var i = 0;
for (w = 0; w < 6; w++)
for (d = 0; d < 7; d++)
With (celltext[(7*w) +d]) {
Victor = i++;
if (mymonth[w+1][d]<0) {
color = Gcgray;
InnerText =-mymonth[w+1][d];
}else{
Modified by Maxiang for we need
Saturday displayed in blue font color.
color = ((d==0) | | (d==6))? " Red ": Black";
if (d = = 0) {
color = "Red";
}else if (d = = 6) {
color = "Blue";
}else{
color = "BLACK";
}
End of above Maxiang
InnerText = Mymonth[w+1][d];
}
}
}
function Fsetyearmon (iyear, IMon) {
Tbselmonth.options[imon-1].selected = true;
for (i = 0; i < tbselyear.length; i++)
if (Tbselyear.options[i].value = = iyear)
Tbselyear.options[i].selected = true;
Fupdatecal (Iyear, IMon);
}
function Fprevmonth () {
var iMon = Tbselmonth.value;
var iyear = Tbselyear.value;
if (--imon<1) {
IMon = 12;
iyear--;
}
Fsetyearmon (Iyear, IMon);
}
function Fnextmonth () {
var iMon = Tbselmonth.value;
var iyear = Tbselyear.value;
if (++imon>12) {
IMon = 1;
iyear++;
}
Fsetyearmon (Iyear, IMon);
}
function Ftoggletags () {
With (Document.all.tags ("select")) {
for (i=0; i<length; i++)
if (item (i). victor!= "Won") &&ftaginbound (item (i))) {
Item (i). style.visibility = "hidden";
Goselecttag[goselecttag.length] = Item (i);
}
}
}
function Ftaginbound (ATAG) {
With (Vicpopcal.style) {
var L = parseint (left);
var t = parseint (top);
var r = l+parseint (width);
var B = t+parseint (height);
var ptlt = Fgetxy (ATAG);
Return! ((ptlt.x>r) | | (ptlt.x+atag.offsetwidth<l) | | (ptlt.y>b) | | (ptlt.y+atag.offsetheight<t));
}
}
function Fgetxy (ATAG) {
var otmp = ATag;
var pt = new Point (0,0);
do {
Pt.x + = Otmp.offsetleft;
Pt.y + = Otmp.offsettop;
Otmp = otmp.offsetparent;
} while (otmp.tagname!= "BODY");
Return pt;
}
Main:popctrl is the widget beyond which you want this calendar to appear;
Datectrl is the widget into which you want to put the selected date.
i.e.: <input type= "text" name= "DC" style= "Text-align:center" readonly><input type= "button" value= "V" onclick= "Fpopcalendar (DC,DC); return false" >
function Fpopcalendar (Popctrl, Datectrl, mode, defdate) {
Gcalmode = mode;
Gcaldefdate = defdate;
if (Popctrl = = Previousobject) {
if (VicPopCal.style.visibility = = "visible") {
Hiddendiv ();
return true;
}
}
Previousobject = Popctrl;
Gdctrl = Datectrl;
Fsetyearmon (Giyear, gimonth);
var point = Fgetxy (Popctrl);
if (Gcalmode = = Cal_mode_noblank) {
document.all.CAL_B_BLANK.style.visibility = "hidden";
}else{
document.all.CAL_B_BLANK.style.visibility = "visible";
}
With (Vicpopcal.style) {
left = Point.x;
top = point.y+popctrl.offsetheight;
width = vicpopcal.offsetwidth;
Height = vicpopcal.offsetheight;
Ftoggletags (point);
visibility = ' visible ';
}
}
var gmonths = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
With (document) {
Write ("<div id= ' vicpopcal ' style= ' Overflow:hidden; Position:absolute; visibility:hidden;border:0px Ridge;width:100%;height:100%;top:0;left:0;z-index:100;overflow:hidden ' > ');
Write ("<table border= ' 0 ' bgcolor= ' #CFE9F8 ' >");
Write ("<tr bgcolor= ' #CFE9F8 ' >");
Write ("<td valign= ' middle ' align= ' center ' ><input type= ' button ' name= ' prevmonth ' value= ' < ' style= ' height : 23;width:20; Font:bold ' onclick= ' fprevmonth () ' > ');
Write (" <select name= ' tbselyear ' onchange= ' fupdatecal (tbselyear.value, Tbselmonth.value) ' Victor= ' Won ' > ");
for (i=1930;i<2030;i++)
Write ("<option value=" "+i+" > "+i+" Year </OPTION> ");
Write ("</SELECT>");
Write (" <select name= ' tbselmonth ' onchange= ' fupdatecal (tbselyear.value, Tbselmonth.value) ' Victor= ' Won ' > ");
for (i=0; i<12; i++)
Write ("<option value=" + (i+1) + ">" +gmonths[i]+ "</option>");
Write ("</SELECT>");
Write (" <input type= ' button ' name= ' prevmonth ' value= ' > ' style= ' height:23;width:20; Font:bold ' onclick= ' fnextmonth () ' > ');
Write ("</td>");
Write ("</tr><tr bgcolor= ' #9A9A9A ' >");
Write ("<td align= ' center ' >");
Write ("<table width= ' 100% ' border= ' 0 ' cellspacing=1 bgcolor= ' #9A9A9A ' >");
Fdrawcal (Giyear, Gimonth, 8, ' 12 ');
Write ("</table></DIV>");
Write ("</td>");
Write ("</tr><tr bgcolor= ' #CFE9F8 ' ><td align= ' center ' >");
Write ("<table width= ' 100% ' bgcolor= ' #CFE9F8 ' ><tr><td align= ' center ' >");
Write ("<b id=/" cal_b_blank/"style= ' Color:" +gcbg+ "; visibility:visible; cursor:hand; font-size:12px ' onclick= ' Fsetdate (0,0,0) ' onmouseover= ' this.style.color=gctoggle ' onmouseout= ' THIS.STYLE.COLOR=GCBG ' > Emptying </B> ');
Write ("</td><td algin= ' center ' >");
Write ("<b style= ' color:" +gcbg+ "; cursor:hand; font-size:12px ' onclick= ' fsetdate (giyear,gimonth,giday) ' > Today: "+giyear+"-"+gimonth+"-"+giday+" </B> ");
Write ("</td></tr></table>");
Write ("</TD></TR>");
Write ("</TABLE></Div>");
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
