asked on

Web Calendar help

Hi,

I have a Text box, on right hand side of the TextBox i display calendar imageIcon. When user clicks on that icon, i will show calendar in separate window where user selects what ever date he wants. When user clicks any of the date, Timestamp will be entered in the corresponding Text box in 4-14-2004 11:51:24 (mm-dd-yyyy HH:MI:ss) format. This calendar will have next and previous icons. When user clicks next arrow it suppose to show the next month. When user clicks previous arrow it suppose to take to the previous month. Everything works for me. But this functionality is not working for me. When i click next arrow it goes to some other month, not for the immediate next month.

If you have code to fullfil this functionality. Please provide me!!! If you want to debug my code i will post it.

I appreciate your valueble time!

Thanks

mark-b

Here is a web calendar that will offer all the functionality you need -- I mention it in this question: https://www.experts-exchange.com/questions/20951897/javascript-or-JS-calander.html

xp_commander

I don't remember where I had picked one , but this has been working like a charm for me , hope it helps.

Create Datepicker.js file and paste in this code :-

var dayA = new Array();
var monthA = new Array();
var yearA = new Array();
var targetfield;
monthA[0]="January";
monthA[1]="February";
monthA[2]="March";
monthA[3]="April";
monthA[4]="May";
monthA[5]="June";
monthA[6]="July";
monthA[7]="August";
monthA[8]="September";
monthA[9]="October";
monthA[10]="November";
monthA[11]="December";

for(var i=1;i<=31;i++)
{
dayA[i]=i;
}

for(var i=0;i<10;i++)
{
yearA[i]=gy(i);
}
function gm(num) {
var mydate = new Date();
mydate.setDate(1);
mydate.setMonth(num-1);
var datestr = "" + mydate;
return datestr.substring(4,7);
}

function gy(num) {
var mydate = new Date();
return (eval(mydate.getYear()) - 4 + num);
}

function ud(mon) {
var i = mon.selectedIndex;

if(mon.options[i].value == "2") {
document.forms[0].day.options[30] = null;
document.forms[0].day.options[29] = null;
var j = document.forms[0].year.selectedIndex;
var year = eval(document.forms[0].year.options[j].value);
if ( ((year%400)==0) || (((year%100)!=0) && ((year%4)==0)) ) {
if (document.forms[0].day.options[28] == null) {
document.forms[0].day.options[28] = new Option("29");
document.forms[0].day.options[28].value = "29";
}
} else {
document.forms[0].day.options[28] = null;
}

}

if(mon.options[i].value == "1" ||
mon.options[i].value == "3" ||
mon.options[i].value == "5" ||
mon.options[i].value == "7" ||
mon.options[i].value == "8" ||
mon.options[i].value == "10" ||
mon.options[i].value == "12")
{
if (document.forms[0].day.options[28] == null) {
document.forms[0].day.options[28] = new Option("29");
document.forms[0].day.options[28].value = "29";
}
if (document.forms[0].day.options[29] == null) {
document.forms[0].day.options[29] = new Option("30");
document.forms[0].day.options[29].value = "30";
}
if (document.forms[0].day.options[30] == null) {
document.forms[0].day.options[30] = new Option("31");
document.forms[0].day.options[30].value = "31";
}
}

if(mon.options[i].value == "4" ||
mon.options[i].value == "6" ||
mon.options[i].value == "9" ||
mon.options[i].value == "11")
{
if (document.forms[0].day.options[28] == null) {
document.forms[0].day.options[28] = new Option("29");
document.forms[0].day.options[28].value = "29";
}
if (document.forms[0].day.options[29] == null) {
document.forms[0].day.options[29] = new Option("30");
document.forms[0].day.options[29].value = "30";
}
document.forms[0].day.options[30] = null;
}

if (document.forms[0].day.selectedIndex == -1)
document.forms[0].day.selectedIndex = 0;

}

function showdate() {
var i = document.forms[0].month.selectedIndex;
var j = document.forms[0].day.selectedIndex;
var k = document.forms[0].year.selectedIndex;
alert(document.forms[0].month.options[i].value + "/" +
document.forms[0].day.options[j].value + "/" +
document.forms[0].year.options[k].value)
}

function opencalendar(temptargetfield) {
var field= eval("document.forms[0]." + temptargetfield);
targetfield = "opener.document.forms[0]." + temptargetfield + ".value";
var mydate;
if(field.value == "" || field.value.length < 10 || field.value.length >10)
{
mydate = new Date();
}
else
{
var tempday = field.value.charAt(3).toString() + field.value.charAt(4).toString();
var tempmonth = (parseInt((parsemonth(field.value.charAt(0).toString(), field.value.charAt(1).toString())))-1).toString();
var tempyear = (parseInt(field.value.charAt(6).toString() + field.value.charAt(7).toString() + field.value.charAt(8).toString() + field.value.charAt(9).toString())).toString();
mydate = new Date(tempyear, tempmonth, tempday );
}
for(var i=0;i<=monthA.length;i++)
{
      if (mydate.getMonth() == i)
      {
            month = i+1;
      }
}
year = mydate.getYear();
//yearA[4].toString();

calwin = window.open("","calwin","resizable,status,height=250,width=210");
calccal(calwin,month,year,targetfield);
}
function parsemonth(tmpm1, tmpm2)
{
var m1;
var m2;
var m3;
if (tmpm1 == "0")
{
m1 = "";
}
else
{
m1 = "1";
}
m2 = tmpm2;
m3 = m1.toString() + m2.toString();
return m3;
}

function calccal(targetwin,month,year,targetfield) {
var monthname = new Array(12);
monthname[0] = "January";
monthname[1] = "February";
monthname[2] = "March";
monthname[3] = "April";
monthname[4] = "May";
monthname[5] = "June";
monthname[6] = "July";
monthname[7] = "August";
monthname[8] = "September";
monthname[9] = "October";
monthname[10] = "November";
monthname[11] = "December";

var endday = calclastday(eval(month),eval(year));

mystr = month + "/01/" + year;
mydate = new Date(mystr);
firstday = mydate.getDay();

var cnt = 0;

var day = new Array(6);
for (var i=0; i<6; i++)
day[i] = new Array(7);

for (var r=0; r<6; r++)
{
for (var c=0; c<7; c++)
{
if ((cnt==0) && (c!=firstday))
continue;
cnt++;
day[r][c] = cnt;
if (cnt==endday)
break;
}
if (cnt==endday)
break;
}

targetwin.document.write("<TABLE><TR VALIGN=TOP><FORM>");

var prevyear = eval(year) - 1;
targetwin.document.write("<TD><INPUT TYPE=BUTTON NAME=prevyearbutton VALUE='<<'"+
" onclick='document.close();opener.calccal(opener.calwin,"+month+","+prevyear+",\""+targetfield+"\")'></TD>");

var prevmonth = calcprevmonth(month);
var prevmonthyear = calcprevyear(month,year);
targetwin.document.write("<TD><INPUT TYPE=BUTTON NAME=prevmonthbutton VALUE=' < '"+
" onclick='document.close();opener.calccal(opener.calwin,"+prevmonth+","+prevmonthyear+",\""+targetfield+"\")'></TD>");

targetwin.document.write("<TD COLSPAN=3 ALIGN=CENTER>");
var index = eval(month) - 1;
targetwin.document.write("<B><FONT FACE='Arial'>" + monthname[index] + " " + year + "</B></FONT></TD>");

var nextmonth = calcnextmonth(month);
var nextmonthyear = calcnextyear(month,year);
targetwin.document.write("<TD><INPUT TYPE=BUTTON NAME=nextmonthbutton VALUE=' > '"+
" onclick='document.close();opener.calccal(opener.calwin,"+nextmonth+","+nextmonthyear+",\""+targetfield+"\")'></TD>");

var nextyear = eval(year) + 1;
targetwin.document.write("<TD><INPUT TYPE=BUTTON NAME=nextyearbutton VALUE='>>'"+
" onclick='document.close();opener.calccal(opener.calwin,"+month+","+nextyear+",\""+targetfield+"\")'></TD>");

targetwin.document.write("</TR><TR>");
targetwin.document.write("<TD><FONT FACE='Arial' SIZE=2>Su</TD>");
targetwin.document.write("<TD><FONT FACE='Arial' SIZE=2>Mo</TD>");
targetwin.document.write("<TD><FONT FACE='Arial' SIZE=2>Tu</TD>");
targetwin.document.write("<TD><FONT FACE='Arial' SIZE=2>We</TD>");
targetwin.document.write("<TD><FONT FACE='Arial' SIZE=2>Th</TD>");
targetwin.document.write("<TD><FONT FACE='Arial' SIZE=2>Fr</TD>");
targetwin.document.write("<TD><FONT FACE='Arial' SIZE=2>Sa</TD>");
targetwin.document.write("</FONT></TR>");

targetwin.document.write("<TR><TD COLSPAN=7><HR NOSHADE></TD></TR>");

var selectedmonth = eval(month) - 1;
var today = new Date();
var thisyear = today.getYear();
var selectedyear = eval(year) - thisyear + 4;

var conditionalpadder = "";

for(r=0; r<6; r++)
{
targetwin.document.write("<TR>");
for(c=0; c<7; c++)
{
targetwin.document.write("<TD>");
if(day[r][c] != null) {
if (day[r][c] < 10)
conditionalpadder = " "
else
conditionalpadder = "";
targetwin.document.write("<INPUT TYPE=BUTTON NAME="+day[r][c]+ " VALUE=" + conditionalpadder + day[r][c] + conditionalpadder +
      " onClick=\"window.close();" +targetfield+"='"+(selectedmonth+1).toString()+ "/"+ (day[r][c]).toString() + "/" + yearA[selectedyear.toString()]+"';\";>"); }
targetwin.document.write("</TD>");
}
targetwin.document.write("</TR>");
}
targetwin.document.write("</FORM></TABLE>");

}

function calclastday(month,year) {
if ((month==2) && ((year%4)==0))
return 29;

if ((month==2) && ((year%4)!=0))
return 28;

if ((month==1) || (month == 3) || (month == 5) || (month == 7) ||
(month==8) || (month == 10) || (month ==12))
return 31;

return 30;
}

function calcnextmonth(month) {
if (month=="12")
return "1";
else
return (eval(month)+1);
}

function calcnextyear(month,year) {
if (month=="12")
return (eval(year)+1);
else
return (year);
}

function calcprevmonth(month) {
if (month=="1")
return "12";
else
return (eval(month)-1);
}

function calcprevyear(month,year) {
if (month=="1")
return (eval(year)-1);
else
return (year);
}

Create CSS file called Datepicker.css and paste in this code :-

.arrowTable {
      font-family: Verdana, Arial, Helvetica ;
      font-size: 9px ;
      font-weight: normal ;
      color: #02115A ;
      }

.cellTable {
      width: 15px ;
      height: 9px ;
      text-align: center ;
      padding: 0px ;
      }

.headingText {
      width: 30px ;
      height: 14px ;
      font-family: Verdana, Arial, Helvetica ;
      font-size: 9px ;
      font-weight: bold ;
      color: #02115A ;
      }

.headingDays {
      font-family: Verdana, Arial, Helvetica ;
      font-size: 9px ;
      font-weight: normal ;
      color: #02115A ;
      }

.bodyDays {
      text-decoration: none ;
      text-align: center ;
      font-family: Verdana, Arial, Helvetica ;
      font-size: 9px ;
      font-weight: normal ;
      color: #02115A ;
      }

.arrowTable:link, .bodyDays:link {
      text-decoration: none ;
      }

.arrowTable:visited, .bodyDays:visited {
      text-decoration: none ;
      }

.arrowTable:hover {
      font-weight: bold ;
      font-size: 9px ;
      }

.bodyDays:hover {
      font-weight: bolder ;
      font-size: 9px ;
      }

.layerBackground {
      layer-background-color: #E4E3E3 ;
      background-color: #E4E3E3 ;
      border-width: 1px;
      border-color: #02115A ;
      border-style: solid ;
}

BODY { font-family: Arial; font-size: 9pt; }
TH { font-family: Arial; font-size: 9pt; }
TR { font-family: Arial; font-size: 9pt; }
TD { font-family: Arial; font-size: 9pt; }
INPUT { font-family: Arial; font-size: 9pt; color:"#000000"; }
TEXTAREA { font-family: Arial; font-size: 9pt; color:"#000000"; }

Add HTML Header to include JS and CSS files as, dont forget to change ure path where this files are :-

<LINK REL=StyleSheet TYPE="text/css" HREF="/server/path/DatePicker.css">
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="/server/path/DatePicker.js"></SCRIPT>

onLoad of the the form call:-

initCalendar() ;

On the date field call the opencalender function such as :-

<input name="d_DueDate" value="" size=12></font></td><td width="78"><a onclick="opencalendar('d_DueDate') ; return false;" href="">Pick Date</a>

ASKER CERTIFIED SOLUTION

jaysolomon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mvkraju

ASKER

jaysolomon, the link you have is very nice.
It seams for me that we can use one calendar per form.
Is it possible to have 2 calendar images in a form?

mvkraju

ASKER

xp_commander..
i appreciate ur help. i did not get how to call openCalendar function from my code.
here is my code

<html:text property="startDate" style="font-size:10px;" size="18" maxlength="10" />
<a href="javascript:show_calendar('document.msgWarehouseRptForm.startDate', document.msgWarehouseRptForm.startDate.value);">
<img src="sqcal.jpg" width="17" height="14" border="0"></a</TD>

thanks