Date Picker for Web-Based Application

Please create a subform and create the following in the Body:

Please create a subform and create the following in the Body:

***Please mark the following text as Pass-Thru HTML

 

 <div id='redbox'; style="position:absolute; left :150px; top :150px; background-color='#FFFFFF'"> <input type="hidden" name="calSelectedDate" value=""> <table border="1"> <tr> <td> <select name="tbSelMonth" style='FONT-FAMILY:Arial;FONT-SIZE:10px;FONT- WEIGHT: bold' onchange="fUpdateCal(tbSelYear.value, tbSelMonth.value)"> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <select name="tbSelYear" style='FONT-FAMILY:Arial;FONT-SIZE:10px;FONT- WEIGHT: bold' onchange="fUpdateCal(tbSelYear.value, tbSelMonth.value)"> <option value="1998">1998</option> <option value="1999">1999</option> <option value="2000">2000</option> <option value="2001">2001</option> <option value="2002">2002</option> <option value="2003">2003</option> <option value="2004">2004</option> <option value="2005">2005</option> <option value="2006">2006</option> <option value="2007">2007</option> <option value="2008">2008</option> <option value="2009">2009</option> <option value="2010">2010</option> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> </select> <INPUT TYPE=BUTTON Name="ExitButton" value="X" style='FONT-FAMILY:Arial;FONT- SIZE:11px;FONT-WEIGHT:bold;width:15;height:18' onclick="fClose()" > </td> </tr> <tr> <td> <script language="JavaScript"> var dCurDate = new Date(); fDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 15, 15, "9px", "bold",1); </script> </td> </tr> </table> </ div> *****************


Include in the JS Header

 

 JS Header var objDate=new Object(); var objPrevElement = new Object(); function fToggleColor(myElement) { var toggleColor = "#ff0000"; if (myElement.id == "calDateText") { if (myElement.color == toggleColor) { myElement.color = ""; } else { myElement.color = toggleColor; } } else if (myElement.id == "calCell") { for (var i in myElement.children) { if (myElement.children[i].id == "calDateText") { if (myElement.children[i].color == toggleColor) { myElement.children[i].color = ""; } else { myElement.children[i].color = toggleColor; } } } } } function fSetSelectedDay(myElement){ if (myElement.id == "calCell") { if (!isNaN(parseInt(myElement.children["calDateText"].innerText))) { myElement.bgColor = "#c0c0c0"; objPrevElement.bgColor = ""; document.all.calSelectedDate.value = parseInt(myElement.children["calDateText"].innerText); SelMonth=document.forms[0].tbSelMonth.options[document.forms[0] .tbSelMonth.options.selectedIndex].value; SelDay=myElement.children("calDateText").innerText; SelYear=document.forms[0].tbSelYear.options[document.forms[0 ].tbSelYear.options.selectedIndex].value; var YearStr=SelYear.toString() + "/" if (SelMonth<=9) var MonthStr='0'+SelMonth.toString() + "/" else var MonthStr=SelMonth.toString() + "/"; var DayStr=SelDay.toString(); var DateStr=YearStr+MonthStr+DayStr; eval("document.forms[0]."+objDate.name+".value= '"+DateStr+"'"); objDateFrom=myElement; objPrevElement = myElement; document.all.redbox.style.visibility="hidden"; } } } function fGetDaysInMonth(iMonth, iYear) { var dPrevDate = new Date(iYear, iMonth, 0); return dPrevDate.getDate(); } function fBuildCal(iYear, iMonth, iDayStyle) { var aMonth = new Array(); aMonth[0] = new Array(7); aMonth[1] = new Array(7); aMonth[2] = new Array(7); aMonth[3] = new Array(7); aMonth[4] = new Array(7); aMonth[5] = new Array(7); aMonth[6] = new Array(7); var dCalDate = new Date(iYear, iMonth-1, 1); var iDayOfFirst = dCalDate.getDay(); var iDaysInMonth = fGetDaysInMonth(iMonth, iYear); var iVarDate = 1; var i, d, w; if (iDayStyle == 2) { aMonth[0][0] = "Sunday"; aMonth[0][1] = "Monday"; aMonth[0][2] = "Tuesday"; aMonth[0][3] = "Wednesday"; aMonth[0][4] = "Thursday"; aMonth[0][5] = "Friday"; aMonth[0][6] = "Saturday"; } else if (iDayStyle == 1) { aMonth[0][0] = "Sun"; aMonth[0][1] = "Mon"; aMonth[0][2] = "Tue"; aMonth[0][3] = "Wed"; aMonth[0][4] = "Thu"; aMonth[0][5] = "Fri"; aMonth[0][6] = "Sat"; } else { aMonth[0][0] = "Su"; aMonth[0][1] = "Mo"; aMonth[0][2] = "Tu"; aMonth[0][3] = "We"; aMonth[0][4] = "Th"; aMonth[0][5] = "Fr"; aMonth[0][6] = "Sa"; } for (d = iDayOfFirst; d < 7; d++) { aMonth[1][d] = iVarDate; iVarDate++; } for (w = 2; w < 7; w++) { for (d = 0; d < 7; d++) { if (iVarDate <= iDaysInMonth) { aMonth[w][d] = iVarDate; iVarDate++; } } } return aMonth; } function fDrawCal(iYear, iMonth, iCellWidth, iCellHeight, sDateTextSize, sDateTextWeight, iDayStyle) { var myMonth; myMonth = fBuildCal(iYear, iMonth, iDayStyle); document.write("<table border='0'>") document.write("<tr>"); document.write("<td align='center' BGCOLOR=blue style='FONT- FAMILY:Arial;FONT-SIZE:9px;FONT-WEIGHT: bold;COLOR=white '>" + myMonth[0][0] + "</td>"); document.write("<td align='center' BGCOLOR=blue style='FONT- FAMILY:Arial;FONT-SIZE:9px;FONT-WEIGHT: bold;COLOR=white'>" + myMonth[0][1] + "</td>"); document.write("<td align='center' BGCOLOR=blue style='FONT- FAMILY:Arial;FONT-SIZE:9px;FONT-WEIGHT: bold;COLOR=white'>" + myMonth[0][2] + "</td>"); document.write("<td align='center' BGCOLOR=blue style='FONT- FAMILY:Arial;FONT-SIZE:9px;FONT-WEIGHT: bold;COLOR=white'>" + myMonth[0][3] + "</td>"); document.write("<td align='center' BGCOLOR=blue style='FONT- FAMILY:Arial;FONT-SIZE:9px;FONT-WEIGHT: bold;COLOR=white'>" + myMonth[0][4] + "</td>"); document.write("<td align='center' BGCOLOR=blue style='FONT- FAMILY:Arial;FONT-SIZE:9px;FONT-WEIGHT: bold;COLOR=white'>" + myMonth[0][5] + "</td>"); document.write("<td align='center' BGCOLOR=blue style='FONT- FAMILY:Arial;FONT-SIZE:9px;FONT-WEIGHT: bold;COLOR=white'>" + myMonth[0][6] + "</td>"); document.write("</tr>"); for (w = 1; w < 7; w++) { document.write("<tr>") for (d = 0; d < 7; d++) { document.write("<td align='left' valign='top' width='" + iCellWidth + "' height='" + iCellHeight + "' id=calCell style='CURSOR:Hand' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>"); if (!isNaN(myMonth[w][d])) { document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT- WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>" + myMonth[w][d] + "</font>"); } else { document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT- WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)> </font>"); } document.write("</td>") } document.write("</tr>"); } document.write("</table>") } function fUpdateCal(iYear, iMonth) { myMonth = fBuildCal(iYear, iMonth); objPrevElement.bgColor = ""; document.all.calSelectedDate.value = ""; for (w = 1; w < 7; w++) { for (d = 0; d < 7; d++) { if (!isNaN(myMonth[w][d])) { calDateText[((7*w)+d)-7].innerText = myMonth[w][d]; } else { calDateText[((7*w)+d)-7].innerText = " "; } } } } function fClose() { document.all.redbox.style.visibility="hidden"; } function calendar(Dfname,hpos,vpos) { var dCurDate = new Date(); document.all.redbox.style.visibility="visible"; document.all.redbox.style.pixelTop=vpos; document.all.redbox.style.pixelLeft=hpos; objDate.name=Dfname; if (eval("document.forms[0]."+objDate.name+".value")!="") { var DateString=eval("document.forms[0]."+objDate.name+".value.toString ()") document.forms[0].tbSelMonth.options[DateString.substr(5,2)- 1].selected=true; document.forms[0].tbSelYear.value=(DateString.substr(0,4)); fUpdateCal((DateString.substr(0,4)),(DateString.substr(5,2))); } else { document.forms[0].tbSelYear.value=dCurDate.getFullYear(); document.forms[0].tbSelMonth.value=dCurDate.getMonth()+1; fUpdateCal(dCurDate.getFullYear(),dCurDate.getMonth()+1); } }

Suppose you have Datefrom in your main form and you want to call calendar function. Please call this function from On Click event

 

 x1=event.x; y1=event.y; calendar("Datefrom",x1,y1)

Put the following code in On Load event on the Main Form

 document.all.redbox.style.visibility="hidden";

Please choose Generate HTML for all fields in the Main form.

This was first published in February 2001

Dig deeper on Domino Resources - Part 3

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

-ADS BY GOOGLE

SearchWinIT

Search400

  • iSeries tutorials

    Search400.com's tutorials provide in-depth information on the iSeries. Our iSeries tutorials address areas you need to know about...

  • V6R1 upgrade planning checklist

    When upgrading to V6R1, make sure your software will be supported, your programs will function and the correct PTFs have been ...

  • Connecting multiple iSeries systems through DDM

    Working with databases over multiple iSeries systems can be simple when remotely connecting logical partitions with distributed ...

SearchEnterpriseLinux

SearchVirtualDataCentre.co.UK

Close