Solved

Web Calendar help

Posted on 2004-04-14
5
388 Views
Last Modified: 2008-02-01
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
Comment
Question by:mvkraju
5 Comments
 
LVL 7

Expert Comment

by:mark-b
ID: 10826832
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
 
LVL 3

Expert Comment

by:xp_commander
ID: 10828169
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
 
LVL 16

Accepted Solution

by:
jaysolomon earned 125 total points
ID: 10833607
0
 

Author Comment

by:mvkraju
ID: 10836057
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
 

Author Comment

by:mvkraju
ID: 10836096
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now