The following code is the practice of inserting dates into the database that I use as a time selector in development.
<script language= "JavaScript" >
var Gdctrl = new Object ();
var Gcgray = "#808080";
var gctoggle = "Highlight";
var GCBG = "Threedface";
var gmonths = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var gdcurdate = new Date ();
var giyear = Gdcurdate.getfullyear ();
var gimonth = Gdcurdate.getmonth () +1;
var giday = Gdcurdate.getdate ();
var sxyear = giyear;
var sxmonth = Gimonth;
var sxday = Giday;
var sxdatestr = Gdctrl.value;
if (sxdatestr!= "") {
var sxdate = new Date (SXDATESTR);
Sxyear = Sxdate.getfullyear ();
}
var vicpopcal = new Object ();
function MouseOver (obj) {
Obj.style.borderTop = ' Buttonshadow 1px solid ';
Obj.style.borderLeft = ' Buttonshadow 1px solid ';
Obj.style.borderRight = ' buttonhighlight 1px solid ';
Obj.style.borderBottom = ' buttonhighlight 1px solid ';
}
function Mouseout (obj) {
Obj.style.borderTop = ' buttonhighlight 1px solid ';
Obj.style.borderLeft = ' buttonhighlight 1px solid ';
Obj.style.borderRight = ' Buttonshadow 1px solid ';
Obj.style.borderBottom = ' Buttonshadow 1px solid ';
}
function MouseDown (obj) {
Obj.style.borderTop = ' Buttonshadow 1px solid ';
Obj.style.borderLeft = ' Buttonshadow 1px solid ';
Obj.style.borderRight = ' buttonhighlight 1px solid ';
Obj.style.borderBottom = ' buttonhighlight 1px solid ';
}
function MouseUp (obj) {
Obj.style.borderTop = ' buttonhighlight 1px solid ';
Obj.style.borderLeft = ' buttonhighlight 1px solid ';
Obj.style.borderRight = ' Buttonshadow 1px solid ';
Obj.style.borderBottom = ' Buttonshadow 1px solid ';
}
function Fpopcalendar (Popctrl, Datectrl, popcal) {
Parent.event.cancelbubble=true;
vicpopcal = popcal;
Gdctrl = Datectrl;
Fsetyearmon (Giyear, gimonth);
var point = Fgetxy (Popctrl);
With (Vicpopcal.style) {left = Point.x;top = point.y+popctrl.offsetheight+1;visibility = ' Visible ';}
Vicpopcal.focus ();
}
function Fsetdate (iyear, Imonth, Iday) {
if ((iyear = 0) && (imonth = = 0) && (iday = 0)) {
Gdctrl.value = "";
}
else{
if (Imonth <) {Imonth = "0" +imonth;}
if (Iday <) {Iday = "0" +iday;}
Gdctrl.value = iyear+ "-" +imonth+ "-" +iday;
}
VicPopCal.style.visibility = "hidden";
}
function fsetselected (Acell) {
var ioffset = 0;
var iyear = parseint (Document.all.tbSelYear.value);
var imonth = parseint (Document.all.tbSelMonth.value);
Acell.bgcolor = GCBG;
With (acell.children["Celltext"]) {
var iday = parseint (innertext);
if (color==gcgray) {ioffset = (victor<10)? -1:1;}
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, Iday, Icellwidth, idatetextsize) {
var weekday = new Array ("Day", "one", "two", "three", "four", "five", "six");
var styletd = "bgcolor=" "+gcbg+" ' width= ' "+icellwidth+" ' bordercolor= ' "+gcbg+" ' valign= ' Middle ' align= ' center ' style= ' Font-size:12px;background:buttonface;border-top:buttonhighlight 1px solid;border-left:buttonhighlight 1px solid; Border-right:buttonshadow 1px solid; Border-bottom:buttonshadow 1px solid; ";
With (document) {
Write ("<tr align= ' center ' >");
For (i=0 i<7; i++) {write ("<td height= '" +styletd+ "color: #990099 ' >" + weekday[i] + "</td>");}
Write ("</tr>");
for (w = 1; w < 7; w++) {
Write ("<tr align= ' center ' >");
for (d = 0; d < 7; d++) {
Write ("<td width= ' 10% ' height= ' Id=calcell" +styletd+ "Cursor:hand") ' onmouseover= ' mouseover (this) ' onmouseout= ' Mouseout (This) ' onmousedown= ' MouseDown (a) ' onmouseup= ' MouseUp (this) ' onclick= ' fsetselected (this) ' > ');
Write ("<font style= ' font-size:13px; ' Id=celltext victor= ' liming Weng ' > </font>");
Write ("</td>");
}
Write ("</tr>");
}
}
}
function fupdatecal (iyear, Imonth) {
Sxyear = iyear;
Sxmonth = Imonth;
Yeartd1.innertext = Sxyear + "year";
Monthtd1.innertext = Gmonths[sxmonth-1];
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{
color = ((d==0) | | (d==6))? " Red ": Black";
innertext = Mymonth[w+1][d];
}
}
}
}
}
function Fsetyearmon (iyear, Imon) {
Sxyear = iyear;
Sxmonth = Imon;
Yeartd1.innertext = Sxyear + "year";
Monthtd1.innertext = Gmonths[sxmonth-1];
Document.all.tbselmonth.options[imon-1].selected = true;
for (i = 0; i < document.all.tbSelYear.length; i++) {
if (Document.all.tbselyear.options[i].value = = iyear) {
Document.all.tbselyear.options[i].selected = true;
}
}
Fupdatecal (Iyear, Imon);
}
function Fprevmonth () {
var imon = Document.all.tbSelMonth.value;
var iyear = Document.all.tbSelYear.value;
if (--imon<1) {
Imon = 12;
iyear--;
}
Fsetyearmon (Iyear, Imon);
}
function Fnextmonth () {
var imon = Document.all.tbSelMonth.value;
var iyear = Document.all.tbSelYear.value;
if (++imon>12) {
Imon = 1;
iyear++;
}
Fsetyearmon (Iyear, Imon);
}
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;
}
With (document) {
Write ("<div id= ' popcal ' onclick= ' event.cancelbubble=true ' style= ') position:absolute;" Visibility:hidden; BorderColor: #000000; border:2px ridge;width:10;z-index:100; > ");
Write ("<table id= ' poptable ' border= ' 1 ' bgcolor= ' #eeede8 ' cellpadding= ' 0 ' cellspacing= ' 0 ' style= ' font-size:12px '") > ");
Write ("<TR>");
Write ("<td valign= ' middle ' align= ' center ' style= ' Cursor:default ' >");
Write ("<table width= ' 176 ' border= ' 0 ' cellpadding= ' 0 ' cellspacing= ' 0 ' >");
Write ("<tr align= ' center ' >");
Write ("<td height= ' width= ' name= ' prevmonth ' style= ' font-family:/'" webdings/"; font-size:15px ' onClick= ') Fprevmonth () ' onmouseover= ' this.style.color=/' #ff9900/' onmouseout= ' this.style.color=/'/' >3</td> ');
Write ("<td width= ' id= ' yeartd1 ' style= ' font-size:12px ' onmouseover= ') yeartd1.style.display=/' none/"; yeartd2.style.display=/"/"; ' onmouseout= ' this.style.background=/'/' > ');
Write (Sxyear + "year");
Write ("</td>");
Write ("<td width= ' id= ' yeartd2 ' style= ' display:none ' onmouseout= ') yeartd2.style.display=/' none/"; yeartd1.style.display=/"/"; > ");
Write ("<select style= ' width:64px;font-size:12px;font-family: Song body; ' id= ' tbselyear ' onchange= ') fupdatecal ( Document.all.tbSelYear.value, Document.all.tbSelMonth.value); yeartd2.style.display=/"none/"; yeartd1.style.display=/"/"; Victor= ' Won ' > ');
for (i=1930;i<2015;i++) {
Write ("<option value= '" +i+ "' >" +i+ "Year </OPTION>");
}
Write ("</SELECT>");
Write ("</td>");
Write ("<td width= ' id= ' monthtd1 ' style= ' font-size:12px ' onmouseover= ') monthtd1.style.display=/" none/"; monthtd2.style.display=/"/"; ' onmouseout= ' this.style.background=/'/' > ');
Write (gmonths[sxmonth-1]);
Write ("</td>");
Write ("<td width= ' id= ' monthtd2 ' style= ' display:none ' onmouseout= ') monthtd2.style.display=/" none/"; monthtd1.style.display=/"/"; > ");
Write ("<select style= ' width:72px;font-size:12px;font-family: Song body; ' id= ' tbselmonth ' onchange= ') fUpdateCal ( Document.all.tbSelYear.value, Document.all.tbSelMonth.value); monthtd2.style.display=/"none/"; monthtd1.style.display=/"/"; Victor= ' Won ' > ');
For (i=0 i<12; i++) {
Write ("<option value= '" + (i+1) + "' >" +gmonths[i]+ "</option>");
}
Write ("</SELECT>");
Write ("</td>");
Write ("<td width= ' name= ' prevmonth ' style=" font-family:/"webdings/"; font-size:15px ' onclick= ') ' FNextMonth () ' Onmouseover= ' this.style.color=/' #ff9900/"' onmouseout= ' this.style.color=/"/"' >4</td>");
Write ("</tr>");
Write ("</table>");
Write ("</td></tr><tr><td align= ' center ' >");
Write ("<div style= ' background-color:teal;") ><table width= ' 100% ' border= ' 0 ' bgcolor= ' threedface ' the cellpadding= ' 0 ' cellspacing= ' 0 ' > ');
Fdrawcal (Giyear, Gimonth, Giday, 19, 14);
Write ("</table></DIV>");
Write ("</td></tr><tr><td height= ' align= ' center ' valign= ' bottom ' >");
Write ("<font style= ' cursor:hand;font-size:12px ' onclick= ' fsetdate (0,0,0) ' onmouseover= ' this.style.color=/" # 0033ff/"' onmouseout= ' this.style.color=0 ' > Empty </font>");
Write (" ");
Write ("<font style= ' cursor:hand;font-size:12px ' onclick= ' Fsetdate" (giyear,gimonth,giday) ' onMouseOver= ') this.style.color=/"#0033FF/" ' onmouseout= ' this.style.color=0 ' > Today: "+giyear+"-"+gimonth+"-"+giday+" </font > ");
Write ("</TD></TR></TD></TR></TABLE>");
Write ("</Div>");
}
</script>
The above is the JS section, the following is in the JSP how to call (is how to use JS, this and we usually use the same method, relatively simple) ....
<input alt= "Click to select the Date" Name= "News_time" type= "text" style= "Cursor:hand" onfocus= "Fpopcalendar (this,this,popcal); return false; "onclick=" Javascript:this.focus () "value=" <%=news_time%> "readonly=" readonly "/>