The most exquisite web date control.

the most sophisticated calendar date input control (smart ver 1.00)

<Script language = "JavaScript">
<! --
/*************************************** *****************************
Time: 2004-01-01
Author: smart
Function: Calendar date Selection Control
 
Parameters:
Note:
1. Use the following to directly call the input box:Code
<SCRIPT> datebox ("inputname", "datevalue") <\/SCRIPT>
Inputname is the text box of the input date. Note: it cannot be blank.
Datevalue is the default date value of the text box for the input date. Format: YYYY-MM-DD. For example
This value can be left blank or empty. The default value is the current day. (client)
2. Use the following code to call other "buttons ":
Calldate ("inputname ")
Inputname is the text box of the input date. Note: it cannot be blank.

Modify Area

Time:
Modified:
Cause:

**************************************** ****************************/
/* Basic parameters */
VaR FRW = 106; // calendar width
VaR FRH = 137; // calendar height
VaR Fr = 4; // The shadow size.
VaR hid = true; // whether the calendar is enabled
/* Create a framework */
Document. writeln ('<Div id = calendar author = smart scrolling = "no" frameborder = 0 style = "border: 0px solid # eeeeee; position: absolute; width: '+ FRW +'; Height: '+ FRH +'; Z-index: 0; filter: \ 'progid: DXImageTransform. microsoft. shadow (Direction = 135, color = # aaaaaa, strength = '+ FR +') \ '; display: none "> </div> ');
/* Get today's date */
Function gettodaydate ()
{
Today = new date ();
Y = today. getyear ();
M = (today. getmonth () + 1 );
If (M <10)
{
M = '0' + m;
}
D = today. getdate ();
If (d <10)
{
D = '0' + D;
}
Return y + '-' + M + '-' + d
}
/* Enter the current day */
Function settodaydate (inputbox)
{
Hiddencalendar ();
Inputbox. value = gettodaydate ();
}
/* Obtain the week value of the first day of a month of a year (month-1 )*/
Function getfirstweek (the_year, the_month)
{
Return (new date (the_year, The_Month-1, 1). getday ()
}
/* The total number of days in a certain month */
Function getthisdays (the_year, the_month)
{
Return (new date (the_year, the_month, 0). getdate ()
}
/* Take the total number of days in the previous month of a certain year */
Function getlastdays (the_year, the_month)
{
Return (new date (the_year, The_Month-1, 0). getdate ()
}
/* Determine whether it is a leap year */
Function runnian (the_year)
{
If (the_year % 400 = 0) | (the_year % 4 = 0) & (the_year % 100! = 0 )))
Return true;
Else
Return false;
}
/* Determine whether the date of the date (YYYY-MM-DD) is correct */
Function dateistrue (asdate ){
VaR lsdate = asdate + "";
VaR lodate = lsdate. Split ("-");
If (lodate. length! = 3) return false;
VaR liyear = parsefloat (lodate [0]);
VaR limonth = parsefloat (lodate [1]);
VaR response = parsefloat (lodate [2]);
If (lodate [0]. length> 4) | (lodate [1]. length> 2) | (lodate [2]. length> 2) return false;
If (isnan (liyear) | isnan (limonth) | isnan (period) return false;
If (liyear <1800) | (liyear> 2500) return false;
If (limonth> 12) | (limonth <= 0) return false;
If (getthisdays (liyear, limonth) <period) return false;
Return! Isnan (date. UTC (liyear, limonth, week ));
}
/* Obtain the weekly value of a month */
Function getcountweeks (the_year, the_month)
{
VaR allday;
Allday = 0;
If (the_year> 2000)
{

For (I = 2000; I <the_year; I ++)
If (runnian (I ))
Allday + = 366;
Else
Allday + = 365;
For (I = 2; I <= the_month; I ++)
{
Switch (I)
{
Case 2:
If (runnian (the_year ))
Allday + = 29;
Else
Allday + = 28;
Break;
Case 3: allday + = 31; break;
Case 4: allday + = 30; break;
Case 5: allday + = 31; break;
Case 6: allday + = 30; break;
Case 7: allday + = 31; break;
Case 8: allday + = 31; break;
Case 9: allday + = 30; break;
Case 10: allday + = 31; break;
Case 11: allday + = 30; break;
Case 12: allday + = 31; break;
}
}
}
Return (allday + 6) % 7;
}
/* The input box is displayed */
Function inputvalue (inputbox, year, month, day)
{
If (month <10)
{
Month = '0' + month
}
If (day <10)
{
Day = '0' + day
}
Inputbox. value = year + "-" + month + "-" + day
}
// Last month
Function forwardmonth (inputbox, year, month, day)
{
Month = month-1;
If (month <1)
{
Month = 12;
Year = year-1;
If (year <1, 1800)
Year = 2500;
}
Day = (getthisdays (year, month) <day )? Getthisdays (year, month): Day)
Hid = false;
Showcalendar (inputbox, year, month, day)
}
// Next month
Function nextmonth (inputbox, year, month, day)
{
Month = month + 1;
If (month> 12)
{
Month = 1;
Year = year + 1;
If (Year> 2500)
Year = 1800;
}
Day = (getthisdays (year, month) <day )? Getthisdays (year, month): Day)
Hid = false;
Showcalendar (inputbox, year, month, day)
}
// Previous year
Function forwardyear (inputbox, year, month, day)
{
Year = year-1;
If (year <1, 1800)
Year = 2500;
Day = (getthisdays (year, month) <day )? Getthisdays (year, month): Day)
Hid = false;
Showcalendar (inputbox, year, month, day)
}
// Next year
Function nextyear (inputbox, year, month, day)
{
Year = year + 1;
If (Year> 2500)
Year = 1800;
Day = (getthisdays (year, month) <day )? Getthisdays (year, month): Day)
Hid = false;
Showcalendar (inputbox, year, month, day)
}
/* Display calendar for other events */
Function opendate (where)
{
Getcalendar (where)
}
/* Display the Calendar Based on the date in the input box */
Function getcalendar (where)
{
Hid = false;
VaR box_name = where. Name;
VaR box_value = where. value;
If (dateistrue (box_value ))
{
Lodate = box_value.split ("-");
Y = parsefloat (lodate [0]);
M = parsefloat (lodate [1]);
D = parsefloat (lodate [2]);
Showcalendar (where, Y, M, d );
}
Else
{
Today = new date ();
Y = today. getyear ();
M = (today. getmonth () + 1 );
D = today. getdate ();
Showcalendar (where, Y, M, d );
}
}

/* Hide the calendar */
Function hiddencalendar ()
{
Document. All. Calendar. style. Display = "NONE ";
}
Function closecalendar ()
{
If (HID)
Document. All. Calendar. style. Display = "NONE ";
Hid = true;
}
/* Display calendar */
Function showcalendar (inputbox, the_year, the_month, the_day)
{
VaR now_year = (the_year = NULL? 2004: the_year );
VaR now_month = (the_month = NULL? 1: the_month );
VaR now_day = (the_day = NULL? 1: the_day );
VaR box_name+'{}parent.doc ument. all. '+ inputbox. Name;
VaR fw = getfirstweek (now_year, now_month );
VaR LD = getlastdays (now_year, now_month );
VaR TD = getthisdays (now_year, now_month );
VaR isnd = false; // whether it is the date of the next month
VaR d = 1, W = 1;
VaR framecontent;
VaR FRL, FRT, winw, winh;
/* Display position */
Winw = Document. Body. offsetwidth;
Winh = Document. Body. offsetheight;
FRL = inputbox. getboundingclientrect (). Left-2;
FRT = inputbox. getboundingclientrect (). Top + inputbox. clientheight;
If (FRL + FRW + fr)> winw) & (FRW + fr <winw ))
FRL = winw-FRW-fr;
If (FRT + FRH + fr> winh) & (FRH + fr <winh ))
FRT = winh-FRH-fr;
Document. All. Calendar. style. Display = "";
Document. All. Calendar. style. Left = FRL;
Document. All. Calendar. style. Top = FRT;
// Display calendar content
Framecontent = "\ n <Table onselectstart = \" Return false; \ "border = '0' cellpadding = '0' cellspacing = '0' bgcolor = '#395592 'width = '000000' Height = '15' style = \" color: white; font-weight: bolder; Border: 0px solid \ ">" + "\ n <tr> \ n ";
Framecontent + = "<TD width = 8> ";
Framecontent + = " ";
Framecontent + = "</TD> \ n ";
Framecontent + = "<TD valign = middle align = 'center'> ";
Framecontent + = now_year;
Framecontent + = "year ";
Framecontent + = "</TD> \ n ";
Framecontent + = "<TD width = 8> ";
Framecontent + = " ";
Framecontent + = "</TD> \ n ";
Framecontent + = "<TD width = 8> ";
Framecontent + = " ";
Framecontent + = "</TD> \ n ";
Framecontent + = "<TD valign = middle align = 'center' width = '16'> ";
Framecontent + = now_month;
Framecontent + = "</TD> \ n ";
Framecontent + = "<TD valign = middle align = 'center' width = '13'> ";
Framecontent + = "month ";
Framecontent + = "</TD> \ n ";
Framecontent + = "<TD width = 8> ";
Framecontent + = " ";
Framecontent + = "</TD>" + "\ n ";
Framecontent + = "</tr>" + "\ n ";
Framecontent + = "</table>" + "\ n ";
Framecontent + = "<Table onselectstart = \" Return false; \ "border = '0' cellpadding = '0' cellspacing = '1' width = '000000' bgcolor = '# cccccccccc'>" + "\ n ";
Framecontent + = "<tr bgcolor = '# f5f5f5'>" + "\ n ";
Framecontent + = "<TD> <center> 1 </center> </TD>" + "\ n ";
Framecontent + = "<TD> <center> 2 </center> </TD>" + "\ n ";
Framecontent + = "<TD> <center> 3 </center> </TD>" + "\ n ";
Framecontent + = "<TD> <center> 4 </center> </TD>" + "\ n ";
Framecontent + = "<TD> <center> 5 </center> </TD>" + "\ n ";
Framecontent + = "<TD> <center> 6 </center> </TD>" + "\ n ";
Framecontent + = "<TD> <center> <font color = '# ff0000'> day </font> </center> </TD>" + "\ n ";
Framecontent + = "</tr>" + "\ n ";
// If the first day of the month is Monday or Sunday, add seven to ensure that the date of the previous month is displayed.
If (FW <2)
TF = fw + 7;
Else
TF = fw;
Framecontent + = "<tr bgcolor = '# ffff'>" + "\ n ";
// The first row date of the previous month
For (L = (LD-TF + 2); L <= LD; l ++)
{
Framecontent + = "<TD onclick = \" parent. forwardmonth (registry.parent.doc ument. all. "+ inputbox. name + "," + now_year + "," + now_month + "," + L + ") \" style = 'cursor: hand '> <center> <font color =' # bbbbbb '> "+ L +" </font> </center> </TD> "+" \ n ";
W ++;
}
// The date of the first row of this month
For (F = TF; F <= 7; F ++)
{
// Sunday, but not the input date
If (w % 7) = 0) & (d! = Now_day ))
Framecontent + = "<TD onmouseover = \" this. style. background = \ '# e1e1e1 \' \ "onmouseout = \" this. style. background = \ '# ffffff \' \ "onclick = \" parent.inputvalue(w.w.w.parent.doc ument. all. "+ inputbox. name + "," + now_year + "," + now_month + "," + D + "); parent. hiddencalendar () \ "style = 'cursor: hand'> <center> <font color = '# ff0000'> "+ D +" </font> </center> </TD> "+" \ n ";
// Date is the input date
Else if (D = now_day)
Framecontent + = "<TD style = \" Background: #420042; cursor: hand \ "onclick = \" parent.inputvalue(w.w.parent.doc ument. all. "+ inputbox. name + "," + now_year + "," + now_month + "," + D + "); parent. hiddencalendar () \ "> <center> <font color = '# ffff'>" + D + "</font> </center> </TD>" + "\ n ";
// Others
Else
Framecontent + = "<TD onmouseover = \" this. style. background = \ '# e1e1e1 \' \ "onmouseout = \" this. style. background = \ '# ffffff \' \ "onclick = \" parent.inputvalue(w.w.w.parent.doc ument. all. "+ inputbox. name + "," + now_year + "," + now_month + "," + D + "); parent. hiddencalendar () \ "style = 'cursor: hand'> <center>" + D + "</center> </TD>" + "\ n ";
D ++;
W ++;
}
Framecontent + = "</tr>" + "\ n ";
W = 1;
For (I = 2; I <7; I ++)
{
Framecontent + = "<tr bgcolor = '# ffff'>" + "\ n ";
For (j = 1; j <8; j ++)
{
If (isnd) // Date of next month
Framecontent + = "<TD style = 'cursor: hand' onclick = \" parent. nextmonth (w.w.parent.doc ument. all. "+ inputbox. name + "," + now_year + "," + now_month + "," + D + ") \ "> <center> <font color = '# bbbbbbbb'>" + D + "</font> </center> </TD>" + "\ n ";
Else // Date of this month
{
// Sunday, but not the input date
If (w % 7) = 0) & (d! = Now_day ))
Framecontent + = "<TD onmouseover = \" this. style. background = \ '# e1e1e1 \' \ "onmouseout = \" this. style. background = \ '# ffffff \' \ "onclick = \" parent.inputvalue(w.w.w.parent.doc ument. all. "+ inputbox. name + "," + now_year + "," + now_month + "," + D + "); parent. hiddencalendar () \ "style = 'cursor: hand'> <center> <font color = '# ff0000'> "+ D +" </font> </center> </TD> "+" \ n ";
// Date is the input date
Else if (D = now_day)
Framecontent + = "<TD style = \" Background: #420042; cursor: hand \ "onclick = \" parent.inputvalue(w.w.parent.doc ument. all. "+ inputbox. name + "," + now_year + "," + now_month + "," + D + "); parent. hiddencalendar () \ "> <center> <font color = '# ffff'>" + D + "</font> </center> </TD>" + "\ n ";
// Others
Else
Framecontent + = "<TD onmouseover = \" this. style. background = \ '# e1e1e1 \' \ "onmouseout = \" this. style. background = \ '# ffffff \' \ "onclick = \" parent.inputvalue(w.w.w.parent.doc ument. all. "+ inputbox. name + "," + now_year + "," + now_month + "," + D + "); parent. hiddencalendar () \ "style = 'cursor: hand'> <center>" + D + "</center> </TD>" + "\ n ";
}
// Determine whether it is the date of this month
If (D = TD)
{
Isnd = true;
D = 0;
}
W ++;
D ++;
}
Framecontent + = "</tr>" + "\ n ";
}
Framecontent + = "</table>" + "\ n ";
Framecontent + = "<Table onselectstart = \" Return false; \ "cellpadding = '0' cellspacing = '0' bgcolor = '# f5f5f5 'width = '000000' Height = '15'>" + "\ n <tr> \ n";
Framecontent + = "<TD Title = \" Today: "+ gettodaydate () +" \ "style = \" cursor: hand \ "onclick = \" parent.settodaydate(##parent.doc ument. all. "+ inputbox. name + ") \"> ";
Framecontent + = "<font color = Red> today: </font>" + gettodaydate ();
Framecontent + = "</TD> \ n ";
Framecontent + = "<TD> ";
Framecontent + = " ";
Framecontent + = "</TD> \ n ";
Framecontent + = "</tr> \ n ";
Document. All. Calendar. innerhtml = framecontent;
Document. All. Calendar. style. Display = "";
}
/* Display the input box */
Function datebox (sboxname, sdfltvalue)
{
If (sboxname = NULL)
Sboxname = 'date _ box'
If (sdfltvalue = NULL) |! (Dateistrue (sdfltvalue )))
Sdfltvalue = gettodaydate ()
Else
{
Datestr = sdfltvalue. Split ("-");
Y = parsefloat (datestr [0]);
M = (parsefloat (datestr [1]) <10 )? ('0' + parsefloat (datestr [1]): parsefloat (datestr [1]);
D = (parsefloat (datestr [2]) <10 )? ('0' + parsefloat (datestr [2]): parsefloat (datestr [2]);
Sdfltvalue = Y + '-' + M + '-' + d
}
Document. write ("<input size = '10' readonly class = 'inputdate' name = '" + sboxname + "'value ='" + sdfltvalue + "'onclickinto'getcalendar({{doc ument. all. "+ sboxname +") '> ");
}
Document. onclick = closecalendar;
// -->
</SCRIPT>
<Body topmargin = "0" leftmargin = "0">
Click the input box to call the calendar. <SCRIPT> datebox ("test1") </SCRIPT>
& Nbsp;
<SCRIPT> datebox ("Test2", "2004-01-01") </SCRIPT>
& Nbsp; Calendar for calling other events.
<Input type = "text" class = "inputdate" size = "10" name = "test3" readonly>
<Input type = "button" class = "inputdate" onclick = "opendate (test3)" value = "Show Calendar">
</Body>
</Html>