Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 421
  • Last Modified:

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
0
mvkraju
Asked:
mvkraju
1 Solution
 
mark-bCommented:
Here is a web calendar that will offer all the functionality you need -- I mention it in this question: http://www.experts-exchange.com/Web/Web_Languages/Q_20951897.html
0
 
xp_commanderCommented:
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='&nbsp;<&nbsp;'"+
   " 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='&nbsp;>&nbsp;'"+
   " 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 = "&nbsp;"
      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>



0
 
jaysolomonCommented:
0
 
mvkrajuAuthor Commented:
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?
0
 
mvkrajuAuthor Commented:
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
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now