Modified HTML date Control

Chris. J's date control is a good stuff, but I found a few shortcomings when using it. I don't know whether it is the version I downloaded or the Code itself.

The problem is as follows:
1. After the date interface is expanded, you cannot obtain the date of the day by clicking "today", and the interface cannot be closed;
2. After the date interface is expanded, if controls such as select are available on the interface, these controls will not be covered (not very nice to see ).

Based on the above reasons, I made some modifications to the code of Chris. J to solve the above problems. The source code is as follows:

//★★
//★Date control version 1.1★
//★★
//★Code by Chris. J (Huang jialong)★
//★Update by Edmond. Y ()★
//★★
//★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

Function popupcalendar (InstanceName)
{
/// Global tag
This. InstanceName = InstanceName;
/// Properties
This. Separator = "-"
This. obtntodaytitle = "today"
This. obtncanceltitle = "cancel"
This. weekdaysting = new array ("S", "M", "T", "W", "T", "F", "S ");
This. monthsting = new array ("January", "February", "March", "l", "may", "June", "July", "August ", "September", "October", "November", "December ");
This. Length = 200;
This. currdate = new date ();
This. Today = new date ();
This. startyear = 1970;
This. endyear = 2010;
/// CSS
This. normalfontcolor = "#666666 ";
This. selectedfontcolor = "red ";
This. divbordercss = "1px solid # bcd0de ";
This. titletablebgcolor = "# 98b8cd ";
This. tablebordercolor = "# cccccc"
/// Method
This. init = calendarinit;
This. Fill = calendarfill;
This. Refresh = calendarrefresh;
This. Restore = calendarrestore;
/// Htmlobject
This. otaget = NULL;
This. opreviouscell = NULL;
This. sdivid = InstanceName + "_ Div ";
This. stableid = InstanceName + "_ table ";
This. smonthid = InstanceName + "_ month ";
This. syearid = InstanceName + "_ year ";
This. stodaybtnid = InstanceName + "_ todaybtn ";
This. siframeid = InstanceName + "_ iframe"; // Edmond
 
}
Function calendarinit () // create panel
{
VaR smonth, syear
Smonth = This. currdate. getmonth ();
Syear = This. currdate. getyear ();
Htmlall = ""
Htmlall + = "<IFRAME id = '" + this. siframeid + "'src = 'javascript: false; 'rolling = 'no' frameborder = '0' style = 'position: absolute; width:" + this. width + "; display: none; '> </iframe>"; // Edmond
Htmlall + = "<Div id = '" + this. sdivid + "'style = 'display: none; position: absolute; width:" + this. width + "; Border:" + this. divbordercss + "; padding: 2px; Background-color: # ffffff; Z-index: 100 '> ";
Htmlall + = "<Div align = 'center'> ";
/// Month
Htmlomonth = "<select id = '" + this. smonthid + "'onchange = calendarmonthchange (" + this. InstanceName + ") style = 'width: 50%'> ";
For (I = 0; I <12; I ++)
{
Htmlomonth + = "<option value = '" + I + "'>" + this. monthsting [I] + "</option> ";
}
Htmlomonth + = "</SELECT> ";
/// Year
Htmloyear = "<select id = '" + this. syearid + "'onchange = calendaryearchange (" + this. InstanceName + ") style = 'width: 50%'> ";
For (I = This. startyear; I <= This. endyear; I ++)
{
Htmloyear + = "<option value = '" + I + "'>" + I + "</option> ";
}
Htmloyear + = "</SELECT> </div> ";
/// Day
Htmlodaytable = "<Table id = '" + this. stableid + "'width = '000000' border = 0 cellpadding = 0 cellspacing = 1 bgcolor = '" + this. tablebordercolor + "'> ";
Htmlodaytable + = "<tbody bgcolor = '# ffff' style = 'font-size: 13px'> ";
For (I = 0; I <= 6; I ++)
{
If (I = 0)
Htmlodaytable + = "<tr bgcolor = '" + this. titletablebgcolor + "'> ";
Else
Htmlodaytable + = "<tr> ";
For (j = 0; j <7; j ++)
{

If (I = 0)
{
Htmlodaytable + = "<TD Height = '20' align = 'center' valign = 'midddle' style = 'cursor: hand'> ";
Htmlodaytable + = This. weekdaysting [J] + "</TD>"
}
Else
{
Htmlodaytable + = "<TD Height = '20' align = 'center' valign = 'midddle' style = 'cursor: Hand '";
Htmlodaytable + = "onmouseover = calendarcellsmsover (" + this. InstanceName + ")";
Htmlodaytable + = "onmouseout = calendarcellsmsout (" + this. InstanceName + ")";
Htmlodaytable + = "onclick = calendarcellsclick (this," + this. InstanceName + ")> ";
Htmlodaytable + = "& nbsp; </TD>"
}
}
Htmlodaytable + = "</tr> ";
}
Htmlodaytable + = "</tbody> </table> ";
/// Today button
Htmlobutton = "<Div align = 'center' style = 'padding: 3px '>"
Htmlobutton + = "<button id = '" + this. stodaybtnid + "'style = 'width: 40%; Border: 1px solid # bcd0de; Background-color: # eeeeee; cursor: Hand '"
Htmlobutton + = "onclick = calendartodayclick (" + this. InstanceName + ")>" + this. obtntodaytitle + "</button> & nbsp ;"
Htmlobutton + = "<button style = 'width: 40%; Border: 1px solid # bcd0de; Background-color: # eeeeee; cursor: Hand '"
Htmlobutton + = "onclick = calendarcancel (" + this. InstanceName + ")>" + this. obtncanceltitle + "</button>"
Htmlobutton + = "</div>"
/// All
Htmlall = htmlall + htmlomonth + htmloyear + htmlodaytable + htmlobutton + "</div> ";
Document. Write (htmlall );
This. Fill ();
}
Function calendarfill ()///
{
VaR smonth, syear, sweekday, stoday, otable, currrow, maxday, idaysn, sindex, rowindex, cellindex, oselectmonth, oselectyear
Smonth = This. currdate. getmonth ();
Syear = This. currdate. getyear ();
Sweekday = (new date (syear, smonth, 1). getday ();
Stoday = This. currdate. getdate ();
Idaysn = 1
Otable = Document. All [This. stableid];
Currrow = otable. Rows [1];
Maxday = calendargetmaxday (syear, smonth );
 
Oselectmonth = Document. All [This. smonthid]
Oselectmonth. selectedindex = smonth;
Oselectyear = Document. All [This. syearid]
For (I = 0; I <oselectyear. length; I ++)
{
If (parseint (oselectyear. Options [I]. Value) = syear) oselectyear. selectedindex = I;
}
////
For (rowindex = 1; rowindex <= 6; rowindex ++)
{
If (idaysn> maxday) break;
Currrow = otable. Rows [rowindex];
Cellindex = 0;
If (rowindex = 1) cellindex = sweekday;
For (; cellindex <currrow. cells. length; cellindex ++)
{
If (idaysn = stoday)
{
Currrow. cells [cellindex]. innerhtml = "<font color = '" + this. selectedfontcolor + "'> <I> <B>" + idaysn + "</B> </I> </font> ";
This. opreviouscell = currrow. cells [cellindex];
}
Else
{
Currrow. cells [cellindex]. innerhtml = idaysn;
Currrow. cells [cellindex]. style. Color = This. normalfontcolor;
}
Calendarcellsetcss (0, currrow. cells [cellindex]);
Idaysn ++;
If (idaysn> maxday) break;
}
}
}
Function calendarrestore () // clear data
{
VaR I, j, otable
Otable = Document. All [This. stableid]
For (I = 1; I <otable. Rows. length; I ++)
{
For (j = 0; j <otable. Rows [I]. cells. length; j ++)
{
Calendarcellsetcss (0, otable. Rows [I]. cells [J]);
Otable. Rows [I]. cells [J]. innerhtml = "& nbsp ;";
}
}
}
Function calendarrefresh (newdate )///
{
This. currdate = newdate;
This. Restore ();
This. Fill ();
}
Function calendarcellsmsover (oinstance) // cell Mouseover
{
VaR mycell = event. srcelement;
Calendarcellsetcss (0, oinstance. opreviouscell );
If (mycell)
{
Calendarcellsetcss (1, mycell );
Oinstance. opreviouscell = mycell;
}
}
Function calendarcellsmsout (oinstance) //// cell mouseout
{
VaR mycell = event. srcelement;
Calendarcellsetcss (0, mycell );
}
Function calendaryearchange (oinstance) // year change
{
VaR SDAY, smonth, syear, newdate
SDAY = oinstance. currdate. getdate ();
Smonth = oinstance. currdate. getmonth ();
Syear = Document. All [oinstance. syearid]. Value
Newdate = new date (syear, smonth, SDAY );
Oinstance. Refresh (newdate );
}
Function calendarmonthchange (oinstance) // month change
{
VaR SDAY, smonth, syear, newdate
SDAY = oinstance. currdate. getdate ();
Smonth = Document. All [oinstance. smonthid]. Value
Syear = oinstance. currdate. getyear ();
Newdate = new date (syear, smonth, SDAY );
Oinstance. Refresh (newdate );
}
Function calendarcellsclick (ocell, oinstance)
{
VaR SDAY, smonth, syear, newdate
Syear = oinstance. currdate. getfullyear ();
Smonth = oinstance. currdate. getmonth ();
SDAY = oinstance. currdate. getdate ();
If (ocell. innertext! = "")
{
SDAY = parseint (ocell. innertext );
If (SDAY! = Oinstance. currdate. getdate ())
{
Newdate = new date (syear, smonth, SDAY );
Oinstance. Refresh (newdate );
}
}
Sdatestring = syear + oinstance. Separator + calendardblnum (smonth + 1) + oinstance. Separator + calendardblnum (SDAY); // return sdatestring
If (oinstance. otaget. tagname. tolowercase () = "input") oinstance. otaget. value = sdatestring;
Calendarcancel (oinstance );
Return sdatestring;
}
Function calendartodayclick (oinstance) // "today" button change
{
Oinstance. Refresh (new date ());
// Edmond
Sdatestring = oinstance. currdate. getfullyear () + oinstance. separator + calendardblnum (oinstance. currdate. getmonth () + 1) + oinstance. separator + calendardblnum (oinstance. currdate. getdate (); // return sdatestring
If (oinstance. otaget. tagname. tolowercase () = "input") oinstance. otaget. value = sdatestring;
Calendarcancel (oinstance );
Return sdatestring;
}
Function getdatestring (oinputsrc, oinstance)
{
If (oinputsrc & oinstance)
{
VaR calendardiv = Document. All [oinstance. sdivid];
Oinstance. otaget = oinputsrc;
Calendardiv. style. pixelleft = calendargetpos (oinputsrc, "Left ");
Calendardiv. style. pixeltop = calendargetpos (oinputsrc, "TOP") + oinputsrc. offsetheight;
Calendardiv. style. Display = (calendardiv. style. Display = "NONE ")? "": "NONE ";
// Edmond
VaR calendariframe = Document. All [oinstance. siframeid];
Calendariframe. style. pixelleft = calendargetpos (oinputsrc, "Left ");
Calendariframe. style. pixeltop = calendargetpos (oinputsrc, "TOP") + oinputsrc. offsetheight;
Calendariframe. style. Display = (calendariframe. style. Display = "NONE ")? "": "NONE ";
}
}
Function calendarcellsetcss (smode, ocell) // set cell CSS
{
// Smode
// 0: onmouserout 1: onmouseover
If (smode)
{
Ocell. style. Border = "1px solid # 5589aa ";
Ocell. style. backgroundcolor = "# bcd0de ";
}
Else
{
Ocell. style. Border = "1px solid # ffffff ";
Ocell. style. backgroundcolor = "# ffffff ";
}
}
Function calendargetmaxday (nowyear, nowmonth) // get maxday of current month
{
VaR nextmonth, nextyear, currdate, nextdate, themaxday
Nextmonth = nowmonth + 1;
If (nextmonth> 11)
{
Nextyear = nowyear + 1;
Nextmonth = 0;
}
Else
{
Nextyear = nowyear;
}
Currdate = new date (nowyear, nowmonth, 1 );
Nextdate = new date (nextyear, nextmonth, 1 );
Themaxday = (nextdate-currdate)/(24*60*60*1000 );
Return themaxday;
}
Function calendargetpos (El, EPRO) // get absolute position
{
VaR EPOS = 0;
While (El! = NULL)
{
EPOS + = El ["offset" + EPRO];
El = El. offsetparent;
}
Return EPOS;
}
Function calendardblnum (Num)
{
If (Num <10)
Return "0" + num;
Else
Return num;
}
Function calendarcancel (oinstance) // cancel
{
VaR calendardiv = Document. All [oinstance. sdivid];
Calendardiv. style. Display = "NONE ";
// Edmond
VaR calendariframe = Document. All [oinstance. siframeid];
Calendariframe. style. Display = "NONE ";
}

You need to set it on the page before, for example:

<Script language = "JavaScript" type = "text/JavaScript" src = "/JS/date. js"> </SCRIPT>
<SCRIPT>
VaR ocalendarchs = new popupcalendar ("ocalendarchs"); // when initializing the control, provide the Instance name: ocalendarchs
Ocalendarchs. weekdaysting = new array ("day", "one", "two", "three", "four", "five", "Six ");
Ocalendarchs. monthsting = new array ", "August September", "August October", "August November", "August December ");
Ocalendarchs. obtntodaytitle = "today ";
Ocalendarchs. obtncanceltitle = "cancel ";
Ocalendarchs. INIT ();
</SCRIPT>

<Input type = "text" id = "birthdate" name = "birthdate" onclick = "getdatestring (this, ocalendarchs)"/>